I recently gave my website a new look by switching from Jekyll to Astro as my static site generator.
Jekyll vs Astro (source)
Table of Contents
Open Table of Contents
The Need for Change
Jekyll, a site generator in Ruby and the engine behind GitHub pages, has served me well these past 14 months and has been perfectly sufficient to my needs. However, I got that developers itch and fancied a change.
Several factors prompted my switch:
- Improved reader experience
- Curiosity about new tech
- Desire to learn a new frontend framework
- Website modernisation
- Enhanced SEO capabilities
I still highly recommend using Jekyll + GitHub pages for those looking to start a personal site. This video is a great tutorial to get started that I wish I had, would’ve saved a few headaches.
Exploring Static Site Generator Options
There are many static site generators for developers to choose from. I researched the most popular frameworks and found these contenders:
- NextJS (126k ⭐) - a React-based framework for building server-side rendered and static websites with excellent performance and developer experience.
- Hugo (75k ⭐) - a fast static site generator with a focus on speed and simplicity, using Go templates.
- Gatsby (55k ⭐) - a React-based static site generator optimised for fast web apps, offering seamless integration with GraphQL and extensive plugin ecosystem.
- Astro (46k ⭐) - a modern static site builder that delivers lightweight, minimal JavaScript pages with a focus on content-first and component-based development.
- Eleventy (11k ⭐) - a flexible static site generator that supports multiple template languages and emphasises simplicity and speed.
Each have their own strengths, but Astro resonated with me the most as it struck the right balance between being feature-rich, flexible and simple.
Why Astro Emerged as the Top Choice
After careful consideration, Astro stood out as the clear winner, despite being a relatively new player in the field. Launched in August 2022, Astro has quickly gained traction in the developer community, and for good reason. Its innovative approach to building websites addresses many of the pain points developers face with traditional frameworks.
Popular Javascript frameworks
What sets Astro apart is not just its feature set, but its philosophy of providing powerful capabilities while maintaining simplicity and performance. This balance of power and efficiency made it an attractive choice for my blog redesign.
Here’s why Astro became the top choice:
- Performance-First Architecture
- Zero JavaScript by default
- Static HTML output for fast load times
- Partial hydration for interactive components
- Flexible Framework Support
- Seamless integration with React, Vue, Svelte, and more
- Use multiple frameworks in a single project
- Framework-agnostic approach
- Developer Experience
- Intuitive component-based structure
- Built-in Markdown support
- Hot module replacement for rapid development
- SEO Optimisation
- Server-side rendering for improved search engine visibility
- Automatic sitemap generation
- Easy metadata management
- Growing Ecosystem
- Active and supportive community
- Expanding library of integrations and themes
- Regular updates and improvements (Astro 5.0 is now in beta)
- Content-Focused
- Markdown-centric workflow
- Content Collections for organised content management
- Easy integration with headless CMS platforms
- Build Performance
- Fast build times, even for large sites
- Efficient caching mechanisms
- Incremental builds for quick updates
- Scalability
- Suitable for small personal blogs to large corporate sites
- Easy deployment to various hosting platforms
- Built-in image optimisation
Site Improvements Post-Switch
With Astro’s flexible framework and powerful features, I was able to implement a range of enhancements that significantly improved both the aesthetics and functionality of the site. These improvements not only modernised the look and feel of the blog but also made it more accessible and user-friendly for my readers.
The move to Astro enabled several enhancements (although many of these features are also possible in Jekyll with workarounds):
- Light and dark mode toggle
- Site-wide search functionality
- Reading progress indicator
- Modern page transitions
- “Scroll to top” button
- Improved mobile responsiveness
- Better code syntax highlighting
You can see my old site here and compare the changes yourself.
Future Plans
One of the most exciting aspects of switching to Astro is the potential it unlocks for future development. As I’ve become more familiar with the framework, I’ve started to think of new features and blog content that were previously not possible.
The switch to Astro opens up new possibilities:
- Implementation of dynamic content areas
- Creation of interactive data visualisations
- Improved accessibility features