Astro Framework: Building a Website & Fixing Deployment Issues

Today, I explored Astro, a modern framework for building fast and lightweight websites. The setup process was straightforward I installed Astro

, created pages, and used its component based system to structure my site. Everything worked smoothly on localhost, and I was excited to deploy it online.

To make my site live, I pushed the code to GitHub and deployed it on Vercel. However, after deployment, I noticed a major issue all my images were missing. The site loaded fine, but none of the images appeared. At first, I thought it might be a Vercel-specific issue, so I decided to try deploying it on Netlify instead. Unfortunately, the same problem happened again—no images on the live site.

I double-checked my file paths, refreshed the deployments multiple times, and even searched online for possible solutions, but nothing seemed to work. It was frustrating because everything was working perfectly in my local environment, yet the images disappeared after deployment.

After some trial and error, I finally figured out the solution! The problem was that I had placed my images inside the src folder, but in Astro, static assets like images should be stored in the public folder. To fix the issue, I moved all images from the src folder to the public folder, pushed the updated code to GitHub, and then refreshed the Netlify deployment page. And just like that, everything started working perfectly!

Through this experience, I learned a few important things. First, always store images in the public folder when using Astro to avoid deployment issues. Second, use direct paths instead of importing images inside components. And finally, after making changes, always push the updated code to GitHub before redeploying.

This was a simple mistake, but it taught me a valuable lesson about handling static assets in Astro. If you ever face the same issue while deploying an Astro site, I hope this helps! 🚀

#Astro #WebDev #Netlify #Vercel #TIL