Rendering Images in GitHub Pages

#Coding #Hugo #GitHub #Frontend

When I built my personal blog site with Hugo Texify3 and tried deploying it using GitHub Pages, something very weird happened: for a blog containing images, while those images can be shown locally under the URL http://localhost:1313, they cannot be rendered under GitHub Pages.

After muddling this issue with GitHub Copilot embedded in VS Code for hours, eventually ChatGPT saved my day. The reason is actually simple: in the post, the image was initially referenced as

![case 1 visualization](/images/2025/case_1.png)

This works fine locally (it resolves to ./static/images/2025/case_1.png) but breaks remotely (it resolves to https://littlecottage.github.io/public/images/2025/case_1/png while the correct location is https://littlecottage.github.io/ZX_BLOG/public/images/2025/case_1/png). So a quick fix is updating the reference to

![case 1 visualization](/ZX_BLOG/images/2025/case_1.png)

so that it resolves to the correct path both locally and remotely. To ensure that the path was searched in an absolute way rather than relatively, then adding the statement

canonifyURLs = true

to the hugo.toml configuration file so that Hugo converts all relative URLs to absolute URLs using baseURL = https://littlecottage.github.io/ZX_BLOG/.

The learned lesson is:

  1. When an object failed to display in the browser, 99% is a path specification issue.

  2. Trust ChatGPT more than Copilot.

A complete chat history with ChatGPT is here.