File paths for libraries and {{ .Site.BaseURL }}

In response to a previous question it was recommended that I use an assets partial to link scipts to any page that needs it. The assets partial is literally just:

< script src="{{ .Site.BaseURL }}js/d3.js">
< script src="{{ .Site.BaseURL }}js/knockout-3.1.0.js">

This works on the index, the libraries are linked just fine. However when I link them to anything else the path is relative to the page its on and not just the

What I want is for every page i link the assets to should look for it in the same place.

What I’m getting is

Shouldn’t {{ .Site.BaseURL }} only return the BaseURL of the page? This is what the docs have lead me to believe.

I had the same problem, it was driving me nuts. The thing is you can’t put it inside the source parameter, basically you can’t put the {{ .Site.BaseURL }} inside quotes ("") just like that. The reason why it works on your index page is because what you wrote returns blank for {{ .Site.BaseURL }} and so it renders as:

< script src="js/d3.js">
< script src="js/knockout-3.1.0.js">

Which coincidentally as a relative path is exactly what you want only on the index.html level, but not anywhere else. The solution, which I frankly think should be the first example in the “Variables” page of the documentation, was to use printf which uses a slightly different syntax as in:

< script src={{ printf "%sjs/d3.js" $.Site.BaseURL  }}>
< script src={{ printf "%sjs/knockout-3.1.0.js" $.Site.BaseURL  }}>

Where the %s within the “” stands for what is returned as a string by .Site.BaseURL and the dollar sign just tells it to stick that in. Just try those two, you should see your site populate immediately. You’d think this would be a common enough thing to be featured prominently on the documentation for people who are comfortable with html + css + js, but are not familiar with Go, nor have to be to get a site going (which I bet is the case for a lot of people who chose Hugo).

1 Like

Just one more thing. If you have your site at the top level of a domain I think

< script src="/js/d3.js">
< script src="/js/knockout-3.1.0.js">

With the trailing “/” would work just fine too, because it just starts from the root level of the website. However, if you are using say a subdomain like you would do using a GitHub project repository and github pages to host as in, then it doesn’t work because it gets rendered as… instead of… Then what I wrote in the previous post is more failproof.

Just saying, these are things that have cracked my head before :stuck_out_tongue:

1 Like


This worked. So often the answer is simpler than I thought it would be. Problem solved, next problem.

1 Like