[SOLVED] Site based on official Hugo documentation layout not adding baseurl to images

support
1

I’m new to Hugo and based a site on the official Hugo documentation layout. I’m using Hugo v18-Dev. Everything has been going great as long as I use hugo server to serve the site.

When I run hugo the generated pages in the public folder does not reference css style sheets etc correctly, the base_url is not prefixed. I’ve now added {{ .Site.BaseURL }} to all css and js includes in layouts/partials/header.html and layouts/partials/footer.html which seems to solve the problem.

The only thing not working is images. The baseurl is not added to image urls.

The following markdown ![](/images/foo.png) renders as <img src="/images/foo.png" alt=""> with no baseurl prefixed. Is this something I can fix or is it a bug in v18-Dev?

2

That’s correct behavior. Hugo will only render the value of {{ .Site.BaseURL }} where it is explicitly referenced in a template or when adding cross-references.

What you can do with your theme is to add the HTML base tag in the header section of layouts/partials/header.html (assuming you’re using that partial):

<head>
  <base href="{{ .Site.BaseURL }}">
  ...
</head>

This will make the browser implicitly prepend the base URL to every relative path in the template.

3

Thanks,

, this seems to fix the problem with the images as long as the image path don’t start with /. Unfortunately all my do (which worked fine when I used hugo server) but I guess I can look up som emacs magic so search an replace all of them in all files :slight_smile:

New problem. After the addition of the base tag all links in the page TOC include the baseurl.

Btw, should I end my baseurl with / or not?

4

If Hugo is smart enough, either should work. But you can simply do a quick test yourself.

5

Setting canonifyurls = true in config.toml solved my problem with the images urls.

Turns out {{ .Site.BaseURL }} adds a trailing / to baseurl if it is missing.

1 Like