Modernizing My Personal Site: From GitHub Pages to Astro and Vercel
After maintaining my personal website on GitHub Pages for several years, I decided it was time for a refresh. In this post, I’ll walk through my migration to Astro using the astro-micro starter, deployment on Vercel, and a sneak peek at my new weather integration feature.
Why Astro?
The decision to move to Astro wasn’t just about jumping on the latest tech trend. Astro’s “Islands Architecture” provides the perfect balance between static site generation and dynamic components. Coming from a traditional static site, I was particularly drawn to astro-micro’s minimalist approach – it gave me just enough structure without the bloat.
Migration Process with astro-micro
The migration process was surprisingly straightforward. astro-micro provided an excellent foundation with its zero-JS-by-default philosophy. Here’s what made the transition smooth:
- The built-in Markdown support made it easy to port over my existing content
- The minimal styling meant I could maintain my site’s existing aesthetic while modernizing the underlying tech
- Component-based architecture allowed me to break down my layout into reusable pieces
The most significant change was adapting to Astro’s .astro components, but the syntax felt natural coming from HTML and JSX.
Deploying to Vercel
While GitHub Pages served me well, moving to Vercel opened up new possibilities. The deployment process was remarkably simple:
- Connected my GitHub repository to Vercel
- Configured the build settings (Vercel automatically detected Astro!)
- Added my custom domain
The automatic preview deployments for each pull request have been game-changing for my workflow. I can now preview changes before they go live, something I sorely missed with GitHub Pages.
Real-time Weather Integration
One exciting new feature I’ve added is real-time weather data from my personal Raspberry Pi weather station. While I’ll dive deeper into the technical details in a future post, I’m using Astro’s client-side islands to fetch and display current conditions without affecting the site’s overall performance. Here’s a Preact component used in this MDX file:
Looking Ahead
This migration has set a solid foundation for future improvements. The combination of Astro’s modern development experience and Vercel’s robust deployment platform has made maintaining my personal site more enjoyable than ever.
Stay tuned for my next post, where I’ll do a deep dive into setting up the Raspberry Pi weather station and integrating its data into an Astro site!
