If you’ve been a regular reader of my blog, you might have noticed a change in how things look and feel today. The engine that powered this space for the last four years was Gatsby. Today, it’s built with Astro. Here’s why I decided to move away from Gatsby and what I like about Astro.
A bit of history
My journey with this blog started in 2007. That’s 16 years of memories, thoughts and experiences but a bit of learning and tinkering with the tech.
WordPress
Initially, I started with WordPress, probably the most popular blog engine. It’s a great platform with much freedom to experiment with various themes and plugins. It served me quite well during my early years of blogging. It was also the time when I needed more purpose and direction with my blog. I was writing for the sake of writing. But given my background in web development, I was always curious to try out new things.
Over time, the constant need for updates, fighting with plugins and themes, and the overall bloat of the platform started to wear me down. I wanted something simpler, something that would allow me to focus less on the tech and more on the content. That’s when I decided to move to a static site generator.
Middleman
In 2016, I moved to Middleman. As a static site generator, it was a breeze to use. The content was written in Markdown, which was a huge plus. It felt more natural to write in Markdown than in the WordPress editor. I could also easily compose my templates and layouts, which was a nice bonus.
I used it for a couple of years, but then I started to feel the platform’s limitations. I wanted to have more control over the content. Especially when it came to images. Back then, I began to publish more content and more photo stories, and I wanted to be able to easily resize and optimize images included in the posts. That’s when I decided to move to Gatsby.
Gatsby
It was also a time when React was at its peak. I was already using it in my day-to-day work, so it felt like a natural choice. Gatsby, GraphQL, and Emotion (CSS-in-JS) all seemed like a perfect fit for my needs.
I’ve redesigned the blog, migrated all the content to Gatsby, wrote my own templates and styles and started to write new posts. It was a great experience. I could easily publish more and more photo stories, rich with vivid, full-screen images. I think Gatsby Image was one of the best features of the platform. Its ability to resize and optimize images was one of the key features, and I think it’s still one of the best image solutions out there.
However, over time, the momentum of Gatsby’s development seemed to plateau. Due to the choice of dependencies, I was stalled with the upgrade cycle. I tried multiple times to rewrite and adapt, but the complexities of Gatsby’s content system (and routing) threw me off track every time.
I did explore other tools like Ghost or Next.js. But something always felt wrong, be it image handling, markdown support or just the simplicity I yearned for.
Astro
This year, I returned to try Astro again. They’ve recently unveiled its 3.x version. I decided to give it another shot. I was more persistent this time, and I’m glad I did.
What you’re seeing now is the result of my efforts. I’ve rebuilt again the blog templates from scratch, migrated all the content from Gatsby to Astro, and I’m happy with the result.
Here’s what I appreciate about Astro:
- Straightforward File-Based Routing: very easy to grasp and understand
- Elegant handling of content with Content Collections: easy to organize, type-safe with Typescript schema
- Astro template syntax: with JSX-like syntax and code fences was all I needed
- Image Handling: built-in support image assets added in version 3 along with
<Image />and<Picture />components enabled me to relatively easily migrate my image-heavy content (images collocated with markdown files) - Good Ecosystem: Tailwind and MDX are the two major integrations I use; both worked well without much hassle
- Emphasis on Static Builds: in the end, I wanted to have a static site so I could host it anywhere I wanted. Astro was an excellent fit for that.
Using Astro, I’ve managed to keep things simple. A handful of pages with simple routing rules and a few reusable components here and there, all styled using Tailwind. It was relatively straightforward to map content collections to static routes and pages.
The minor hiccup I experienced was quite a long initial build time. With many images, the build times exceeded Netlify’s limits, and I had to look for other solutions. I had the same problem with Gatsby as well, but it was mitigated by the incremental builds provided by Gatsby Cloud.
I’ve managed to solve the problem by moving to Vercel. They’re handling the builds better.
Update: With latest Astro release (v3.4), this is no longer a problem! 🎉🎉🎉
Astro now generates optimized images concurrently at build time for static sites, which can significantly speed up build times for sites with many images.
What’s next?
The first phase is done. However, this migration was done for more than just the sake of migration. It lays a new foundation for the future. I want to create and design new content with better, art-directed layouts and photo galleries. Astro will be a great fit for that.
