A tale about migrating a 200 entries Gatsby blog untouched for 3 years to Astro

1. vite

   1 892 71,552 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   Over the years, the blog was migrated from WordPress to Gatsby for blazing fast performance and nice features. Blazing being about a medium 60 lighthouse score for a mostly static site, not very blazing. Sadly, when writing new articles, a slightly annoying 5 minutes boot time was required before any change could be shown. It was about 2 years after we started using Vitejs in production for most SPA clients, and the slowness was terrible.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. Tailwind CSS

   2 1,490 86,522 9.9 TypeScript

   A utility-first CSS framework for rapid UI development.

   

   First of all, as the codebase was quite old and as I didn't want to bring more tech than what was required, I started to migrate my few React components on Gatsby from StyledComponent (a great CSS-in-JS solution) to Tailwind CSS. Mostly because I wanted to see if I could measure the impact of moving from CSS-in-JS to pure CSS. The second goal was to allow Astro to run without client-side JS. To do so, I either needed to set up StyledComponent in Astro or migrate to Tailwind. Tailwind is documented and largely used on most projects now, and I was curious about the performance impact.

4. partytown

   3 70 13,258 8.1 TypeScript

   Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉

   

   ✅ At least keep the user experience on par: The blog performance on Lighthouse increased from 69 to a comfortable 99 (migration to Astro + using Partytown for analytics) and a few features/ugly content flash were added/fixed.

5. pagefind

   4 36 4,019 9.0 Rust

   Static low-bandwidth search at scale

   

   Search: Using our old search was not possible nor wanted and I found a great static page search in Pagefind. There is even a simple Astro integration to avoid boilerplate code. The search is both faster than before, accessible through the shortcut / and has a nice excerpt as well as a picture for each result. Nice win!

6. htmx

   5 641 43,975 9.7 JavaScript

   </> htmx - high power tools for HTML

   

   I also needed to keep the infinite scroll on the homepage, authors, and categories pages which allow for scrolling all 200 posts as paginated pages of about 10 posts. To do so, I used partial HTML render routes that I render at build time with Astro (like any other page) and used HTMX to fetch pages on scroll. You can try it by scrolling on the blog homepage to see requests going out when scrolling to load the next page and inject it into the current document.

7. Alpine.js

   6 264 29,314 8.1 HTML

   A rugged, minimal framework for composing JavaScript behavior in your markup.

   

   By default, there is no React.js on the client, see results for the impact, but it's clearly a better golden path for static sites. I even chose to only keep JSX as Astro components to opt-in to a very light Alpine.js client-side library for light interactivity like the search/header.

Suggest a related project