Migrating to Astro By Chad Tomlinson on 01-Sept-2025 in coding

The previous Gatsby site was basic, with the generic Bootstrap styling, and I lacked the time and patience working with the framework to implement necessary features or theming.

GraphQL was difficult to work with, but the plugins were brutal. Although Gatsby has a vast ecosystem of plugins, trying to weave the necessary plugins together to obtain the desired functionality was diffcult, as they often had compatibility issues.

What I wanted was the exact opposite, somthing easy to style and build, so I decided to build a site with two of the most popular frameworks.

Astro

Astro is a uniquely flexible framework offering leading performance by rendering content as a lightweight static html, pruning any superfluous JavaScript before minifying the codebase.

The Islands Architecture enables other JavaScript frameworks, including React, Svelte, Vue to create content using either Server-Side Rendering or Static Site Generation. JavaScript content can be loaded on deman to prevent unnecessary code from slowing down the site.

For styling Astro can use traditional HTML and CSS with pre-processors such as Sass and Less, there isn’t a framework specific styling system that developers are required to learn.

Tailwind

Tailwind CSS is different from other frameworks because it doesn’t impose any predetermined design decisions, enabling full control over the look and feel of a website.

The utility-first framework that allows developers to create custom designs without writing any CSS. It provides a set of low-level classes that can be combined to style a site.

Numerous prebuilt UI component frameworks are available, enabling sites to be easily drafted, and then customised by using directives to build unique class structures. Due to Tailwinds support in Astro I decided to use the open-source Preline UI framework.

Building the site

The popularity and hype surrounding Astro combined the more unified platform, documentation and examples made it easy to produce results.

The most difficult thing was learning how to utilise Astro’s Content Collections, understand how to extract the content and how to integrate it, but its JavaScript foundation made it easier to learn than GraphQL.

Implementing Tailwind, it became easy to understand why developers prefer it, the framework is just so flexible, enabling every element to be perfectly presented.

The combination of the two frameworks left me impressed, making the greatest challange actually creating the theme and content.

Although it’s not finished, I think I’ve finally refined it enough to warrant making it live.