Hugo Static Site missing images once deployed to Cloudflare Pages
Hi everyone,
Thank you for looking at this issue.
I made a simple Hugo website locally, git pushed to GitHub, and deployed to Cloudflare Pages (https://williamsrestore.com/). I removed the base_url in hugo.toml and used the build commands of "hugo -b $CF_PAGES_URL" in Cloudflare pages. I attached an image showing that Cloudflare Pages uploaded the images (work1-4.jpg) but when I visit https://williamsrestore.com, the images are broken/not loading at the bottom of the website.
Any advice on how to fix this? Thanks in advance.
12 Replies
can you send the build logs ?
The assets appear to be uploaded during build but I think they're incorrectly being referenced and thus breaking.
Pages is case sensitive. You're referencing them in your html as
.jpg lowercase, but they're uppercase
https://williamsrestore.com/images/work2.JPG
vs
https://williamsrestore.com/images/work2.jpg
It'll work on Windows because Windows is case-insensitive, but in other more sane systems it won't
I would just lowercase the extensions/keep all filenames lowercase
Yooo! Thank you. Good eye. I will test it.
whats this image x)
It's equipment for water damage restoration.
I only have .jpg on my local environment but it is showing as uploading both upper and lower case... do I need to redeploy on cloudflare pages to remove the uppercase? i am still pointing to lower case but the images are still broken/not loading.
you don't really need both but that'll work. The only thing you're hitting now is cache
yes, i didn't intend to upload both. the github only has lowercase so it is the old cache as you say
thank you!
You could go to Caching -> Configuration -> Purge everything, or Caching -> Cache Rules to stop your website from caching Pages. Pages has its own internal cache, it's just that your Custom Domain will also cache images and certain extensions
If you make a cache rule like this, you can stop that:
(don't mind my text edit over someone I helped create this before, easier to reuse lol, same idea)
i absolutely love cloudflare. thank you for this information
this cache rule is great and i now see the images. you're the best @Chaika
thanks for your help too @Nob