Wrong path to static resources in github pages

support
1

According to Hugo’s documentation, to reference an image, place the image in the static folder, and then reference the image in md with the static folder as the root.

Now I place img.png in the static folder and reference it in md like this:

! [img](/img.png)

Using hugo server, the link opens and the image is displayed correctly.

However, when deploying to github pages, the image is linked incorrectly. the url for github pages is https://xxx.github.io/Sample-Blog/, however the link for the image is https://xxx.github.io/img.png, the correct image link should be The correct image link should be https://xxx.github.io/Sample-Blog/img.png.

I also tried to change the configuration file for github action. hugo’s official configuration file build steps are:

- name: Build with Hugo
env:
    HUGO_ENVIRONMENT: production
    HUGO_ENV: production
run: |
    hugo \
    --gc \
    --minify \
    --baseURL "${{ steps.pages.outputs.base_url }}/"

I tried to change it to:

- name: Build with Hugo
env:
    HUGO_ENVIRONMENT: production
    HUGO_ENV: production
run: |
    hugo \
    --gc \
    --minify \
    --baseURL "${{ steps.pages.outputs.base_url }}/Sample-Blog/"

But this instead makes the paths to the other resources wrong.

2

https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2

Are you using a theme? If yes, which one?
Have you created your own image render hook?
Is this a multilingual single-host site?

It would be helpful to know where you found that in our documentation.

3

I use reimu theme, and the author of the theme said that the images in the markdown are not processed in any way, everything is handled in the same way as in hugo.

The website is a single language, single-host site.

4

If the image placed in a page bundle, the link to the image is correct both locally tested and on github pages.

If the image placed in “static” folder, the link to the image still not correct on github pages, although I have enable Hugo’s embedded link and image render hooks in my site configuration:

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

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

I create a repo about this issue.

6

you missed the mounts entries shown at the end of the docs for the default image render hook

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

I took a closer look at the documentation I was looking at earlier and it turns out it’s outdated. Thanks to everyone who participated in the issue!

8

btw, baseurl does not have to come from steps. For example, my workflow uses


run: |
  hugo \
   --gc \
   --minify \
   --baseURL "https://${{ github.repository_owner }}.github.io/" \
   --cacheDir "${{ runner.temp }}/hugo_cache"

still, the theme implemented here creates a custom image render hook that parses

  • relative
  • assets
    {{- with or (.PageInner.Resources.Get $url.Path) (resources.Get $url.Path) -}} 
  {{- $query := cond $url.RawQuery (printf "?%s" $url.RawQuery) "" -}}
  {{- $fragment := cond $url.Fragment (printf "#%s" $url.Fragment) "" -}}
  {{- $dest = printf "%s%s%s" .RelPermalink $query $fragment -}}
  • static
    {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
1 Like
9

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