Trouble w/ relative images - Astro site on Pages
Hey all,
I have been messing around with deploying my blog to Cloudflare Pages and the experience has been awesome! Except I'm having issues with relatively-referenced images like my favicon and a header PNG not loading. This is happening only on the Cloudflare Pages instance of the site. All other remote images, i.e. ones from my CDN, are working just fine.
These resources are referenced relatively, i.e.
/myfavicon.svg or /header-image.png and are placed in my Astro public folder so they're straight copied when the site is built.
To troubleshoot, I've tried deploying the site to S3, running it via npm run preview with Astro locally, and even running it on my DigitalOcean Droplet. In every case but Pages, I'm able to see the icon/image. In addition, my site was previously built with Gatsby, and when I deployed it to Pages I had no issues - the images loaded just fine!
Has anyone else had issues with Astro + Cloudflare Pages like this? Seems like Pages is the only variable that could be affecting things here.2 Replies
Here's a screenshot of the build configuration for the site in Pages, as well as a link to the Pages URL: https://benscarblog-v2.pages.dev/
Ben's Car Blog
A personal blog highlighting my passion for all things automotive. Reviews, guides, tutorials, and more!
UPDATE: I tried deploying my site to Netlify, and noticed the same issue. They let you download the build artifacts and it appears that the entirety of my
public folder is not being copied/grabbed when running npm run build on the server.
This does not seem to be a Cloudflare Pages issue, specifically. Now I need to figure out why the build copies the public files to dist when running locally but not on a server...
It helps if you don't include public in your .gitignore...the directory wasn't being copied on the server because it only existed on my local machine!
As dumb as I feel now, I'm going to leave this here in case anyone else runs into a similar issue. Hopefully it saves someone some time/headache!