Migrating from Gatsby to Astro

After running my portfolio site on Gatsby for a few years, I decided it was time for a refresh. Astro has been gaining popularity, and the promise of “less JavaScript, more speed” was appealing. Here’s a look at my migration experience.

Why I Chose Astro

Gatsby served me well, but it came with some overhead. Every site, even simple ones, would ship with a full React runtime. Astro’s approach is more aligned with my philosophy - ship only the JavaScript you actually need.

Some key benefits that attracted me to Astro:

1. Content-focused: Perfect for my portfolio and blog
2. Performance: Significantly faster page loads out of the box
3. Framework-agnostic: I can use React components when I need them, but I’m not locked in
4. Simpler mental model: The file-based routing and component system just clicked for me

The Migration Process

The migration process was surprisingly smooth. Astro’s component model was easy to grasp, and the file-based routing system meant I could often map my Gatsby pages directly to equivalent Astro pages.

Key Steps in My Migration

1. Setting up the Astro project: Getting started was as simple as running npm create astro@latest
2. Migrating layouts: I recreated my main layouts in Astro’s component system
3. Converting React components: Most UI components could be converted to Astro components with minimal changes
4. Implementing collections: Astro’s content collections were perfect for organizing my blog posts

Content Collections vs GraphQL

One of the biggest changes was moving from Gatsby’s GraphQL data layer to Astro’s content collections. While I enjoyed the flexibility of GraphQL, I found that for my relatively simple site, it was overkill.

Astro’s content collections gave me:

• Type safety with schema validation
• Simple, direct imports without complex queries
• A more intuitive content organization structure

Performance Improvements

The performance improvements were immediately noticeable:

• Faster build times
• Smaller bundle sizes
• Better Lighthouse scores

My Gatsby site was already pretty fast, but the Astro version took it to another level, especially on mobile devices.

What I Miss from Gatsby

Nothing.

Conclusion

For my portfolio site, Astro has been a great choice. The migration was smooth, and the performance benefits have been worth it. If you have a content-focused site and want to ship less JavaScript, Astro is definitely worth considering.

The web development landscape is constantly evolving, and it’s exciting to see innovations like Astro that help us build faster, more efficient websites. I’m looking forward to seeing how the framework continues to develop.