Can't get images working on github pages

support
1

The repo in question is GitHub - FreeSlave/halflife-featureful: Half-Life SDK for making mods upon it

The hugo files are at the “documentation” subfolder.

I followed the “Host on GitHub Pages” guide

I had to add working-directory in some places of github workflow .yaml because I want to generate the documentation from the subfolder.

The website is deployed fine, but images don’t work. E.g. the image on this page doesn’t show Player inventory | Featureful SDK

If I prepend the repo name to the image url in browser, it shows the image.

I did a lot of searching and this problem is quite well-known indeed. I did change baseURL in hugo.toml (though it probably shouldn’t matter as it’s specified in the build stage in github workflow. Considering it’s doing the correct job of course)

I also tried render hooks as suggested in the issue 51033 on this discourse (can’t post more than 2 links, so I had to go by topic number)

[markup.goldmark.renderHooks]
      [markup.goldmark.renderHooks.image]
        enableDefault = true
      [markup.goldmark.renderHooks.link]
        enableDefault = true

[module]
  [[module.mounts]]
    source = 'assets'
    target = 'assets'

  [[module.mounts]]
    source = 'static'
    target = 'assets'

but with no success. So now I’m kinda lost.

I guess I could prepend every image with /halflife-featureful but is it the right apporach?

Considering there’re so many topics with this problem maybe it should be explicitly addressed in the tutorial with the correct solution (searching for this problem gives mixed answers which confuses even more)

2

You are using the hugo-book theme. This provides it’s own image render hook

themes\hugo-book\layouts\_default\_markup\render-image.html

looks like this is NOT the default mentioned in 5113

The default one is here: hugo/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html at master · gohugoio/hugo · GitHub

Copy the content to your layouts/_default/_markup/render-image.html
Now the image shows up - so your general config is correct.

Check if it breaks other images on the site, logos…, maybe provided by the theme.
If somethings wrong, you’ll have to compare and adjust the code to support both.

2 Likes
3

Do the same thing with the link render hook, and reduce your markdown config to:

[markup.goldmark.renderer]
unsafe = true

The best config file is the smallest possible config file.

Also, now that you are using the default link and image render hooks, there is no need to use the relref shortcode.

Replace things like this:

[env_global]({{< relref "env_global.md" >}})

With this:

[env_global](entities/env_global)

With the above, use a path relative to the current page, or a path relative to the contentDir.

Related proposal: https://github.com/gohugoio/hugo/issues/13535

2 Likes
4

Thank you very much for your answers. I took render-link.html and render-image.html from hugo and it works now.

I couldn’t think the theme would be a culprit. I gotta learn much more about Hugo

2 Likes
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.