Rebuilding my Website with Astro

After over three years of using Gatsby, I recently completed a rebuild of my website using Astro. The decision to switch to Astro was driven by its growing popularity, framework-agnostic nature, and my desire for a simpler and easier-to-maintain website. In this article, I’ll delve into the reasons behind my transition and highlight the changes I made during the process.

The Journey from Medium to Hugo to Gridsome to Gatsby

In 2018, I ventured into creating my website, establishing a space on the internet that truly reflected my identity. Initially, I relied on Medium for my writing, but I soon realized the need for a dedicated platform that I could customize to my liking. That’s when I discovered Hugo, a static page generator built with Go, enabling me to swiftly launch my website despite my limited knowledge of Go. Using a starter theme, I focused on creating content rather than worrying about intricate technical details. However, as time passed and new frameworks emerged, I found myself inclined to explore alternative options that aligned better with my evolving needs and skills.

In 2019, I switched to Gridsome, which was built on top of Vue.js, a JavaScript framework I was already comfortable with. Although Gridsome initially seemed like a good fit, I soon encountered issues with its slow development and lack of serious project advancement from the maintainers. Around the same time, Gatsby, a React-based framework, gained significant popularity, boasting extensive support and resources. Recognizing the advantages of a thriving community and comprehensive tooling, I decided to transition from Gridsome to Gatsby in 2020.

I started using Gatsby in 2020, and it has been powering my website since until recently, when I decided to change to Astro.

Enter Astro: A Simpler Alternative

While using Gatsby, I noticed that as my website grew larger, it became increasingly challenging to maintain. Returning to the codebase after some time away, I often struggled to understand its intricacies and navigate through the complexities. That’s when I stumbled upon Astro, a simpler alternative that caught my attention due to its growing popularity and framework-agnostic nature.

I spent the last few weeks exploring Astro. After tinkering for a few days, I decided to transition this website from Gatsby to Astro.

Disclaimer: I would like to state I like Gatsby. I have no major criticisms of the project and would turn to it first if React was my favourite JavaScript library. All the reasons mentioned in the article are not why Gatsby is bad but rather why I preferred Astro for this blog.

One of the primary factors that attracted me to Astro was its rising popularity. Seeing the buzz surrounding Astro made me curious to explore its capabilities and understand what made it appealing to developers. Additionally, Astro’s framework-agnostic approach was a significant advantage. It provided the freedom to use any JavaScript framework or library, allowing me to leverage my existing knowledge and skills without being bound to a specific technology stack.

However, it was the simplicity of Astro that won me over. Compared to Gatsby, Astro offered a more streamlined development experience, making it easier to grasp the codebase and maintain the website. This simplicity aligned perfectly with my desire to focus on creating content rather than getting entangled in complex technical details.

During the transition from Gatsby to Astro, I took the opportunity to revamp the design of my website to reflect the change in framework and enhance the user experience. Some of the notable changes I made include:

• Colour scheme: I opted for a darker colour scheme, providing a visually appealing and immersive experience.
• Font and font sizes: I switched to a different font and adjusted font sizes to improve readability and aesthetics.
• Layout: I introduced a new layout that facilitated a more intuitive navigation and enhanced the overall structure of the website.
• About page: I added an about page to provide visitors with information about myself and my background.
• RSS feed: I incorporated an RSS feed to allow users to subscribe to my content and receive updates.
• Updated content: I took the opportunity to review and update the copy of my content, ensuring its relevance and accuracy.

Wrapping it up

Overall, I’m happy with the rebuild. The process provided an excellent opportunity to evaluate the features my website needed and architect it in a way that ensures easy maintenance going forward.

Looking ahead, I am confident that Astro will be my preferred framework for the long term. Its simplicity, flexibility, and growing popularity make it an ideal choice for creating and maintaining my website. I plan to create a theme with my current Astro set-up, allowing others to benefit from the design and structure I have developed.