Rendering Images in GitHub Pages
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

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

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:
When an object failed to display in the browser, 99% is a path specification issue.
Trust ChatGPT more than Copilot.
A complete chat history with ChatGPT is here.