Why I used Astro to build my blog

I’m using Astro to power this blog, and I’m a massive fan. Astro is the framework I spent years looking for but never existed. Now before you try and tell me about Eleventy and Gatsby - Yes I’ve tried them (this blog actually used to use Gatsby), but none of them hit the sweet spot of functionality and developer experience like Astro has. Let me tell you about all the ways Astro has made my blogging journey a smooth and enjoyable one.

Don’t fancy reading the full blog post? Just watch the clip above for a brilliant overview of Astro.

1. Markdown and MDX support

For developer bloggers I’d argue that Markdown is the best way to write long-form content. Markdown is simple enough that anyone can learn it in a half an hour, but expressive enough that you’ll never miss having a WYSIWYG editor.

With native markdown support Astro pretty much elimates the need for a CMS - an the complexities that come with one. I can write my blogs in my code editor (and enjoy all the shortcuts that I’m used to) or I can even write blog posts directly into the github editor (and get a fairly decent markdown preview). Since my blog posts are stored in the repo rather than in an external CMS I get the benefits of source control too!

Astro also supports MDX files: a form of Markdown that allows you to chuck components directly into your Markdown. This is commonly a React component but in the context of Astro it also might be a .Astro file.

2. Syntax of Astro files

Astro follows a similar path to Vue JS and Svelte in how components implement JS and CSS. An Astro component might look something like this:

<div>
	<p>Hello, world!</p>
</div>

<script>
	window.addEventListener("DOMContentLoaded", async event => {
		console.log("I'm ready for business");
	});
</script>

<style>
	p {
		color: red;
		font-size: 54px;
	}
</style>

Notice how the HTML, CSS, and JS all live in the same file? This used to be considered bad practice until React opened the floodgates with JSX, which mixes JS and HTML. Everyone seemingly decided that if React was doing it then it must be fine, and now most modern frameworks have followed suit.

Well if React is doing it, it can’t be too bad…

I’ll admit that I was a JSX naysayer when it was first introduced. And to an extent I still am. Astro files, on the other hand, feel more natural. While JSX frankensteined JS and HTML together Astro files keep the logic and presentation in seperate chunks even if they’re in the same file.

Astro mixes JS, CSS, and HTML the right way.

The way that Astro mixes HTML, CSS, and JS is very straightforward. Astro uses the style and script blocks native to HTML, which should feel familiar to developers of all skill levels. There is a very practical reason for doing this too - this pattern makes it easy to build self-contained components with few dependencies.

3. Simple Scoped CSS

CSS in Astro is scoped to the component by default but can be made global with the is:global attribute. This approach is extremely elegant and simple, particularly when in comparision to solutions found in the React space like Emotion and CSS Modules.

Look at this:

<style>
	/* Local to the component */
</style>

<style is:global>
	/* Applies everywhere */
</style>

Beautiful, isn’t it?

CSS in Astro is simple, uncomplicated, vanilla CSS. You can choose to bring your own tooling like SCSS or Tailwind to the table if you like (there is support for a whole range of CSS frameworks ) however you can also just write plain ol’ CSS and everthing works as expected. chef’s kiss

4. Flexibility to use React, Vue, etc (but only if I want to!)

Astro is an extremely flexible framework - almost a meta-framework really - in that it allows you to write static HTML alongside components written in React, Solid, Svelte, and Vue.

The real magic, however, comes from the islands architecture. Here’s a nice image from Jason Miller’s blog post :

From the docs:

The term “Astro Island” refers to an interactive UI component on an otherwise static page of HTML. Multiple islands can exist on a page, and an island always renders in isolation. Think of them as islands in a sea of static, non-interactive HTML.

The fact that Astro have taken the islands concept and made it a reality is a remarkable and trailblazing achievement. I think a lot of devs intuitively know that islands are a good idea, but until now there hasn’t been any easy way to implement them (intersection observer? - no thanks!).

Islands can be loaded in several different ways depending on the attribute you pass the component.

// Load and hydrate the component immediately on page load
<BuyButton client:load />

// Load and hydrate the component one the page is done with its initial load
<ShowHideButton client:idle />

// Load and hydrate the component once it has completely entered the user's viewport.
<HeavyImageCarousel client:visible />

Example above borrowed from the Astro docs

Functionality like this makes the developer experience with Astro a real dream and gives devs no excuse for ignoring performance!

5. Performance

Astro is built on Vite, a lightning fast bundler . I’ve been using Vite for about a year now and I can’t recommend it enough. It’s a joy to use and the performance is second to none. Whereas I still have nightmares about using Webpack, Vite is straightforward to use with minimal configuration. What this actually means to you is that your dev server boots quickly enough that you’ll never have time to wonder is it done yet.

The real performance benefits, however, come from the fact that Astro is a static site generator. This means that your site is pre-rendered and served as static HTML, CSS, and JS. I’ve never really been one to fuss over getting a perfect Lighthouse score, but with very minimal fiddling in Astro I achieved the following results:

Sidenote: Ok, so I cheated. To get this result I had to remove the embedded youtube video from the page. It turns out that the youtube embed brings along with it a heap of network requests and downloads that Lighthouse doesn’t like. This is pretty frustrating, but most of my blog posts won’t have blog posts so I think the scores above are fairly representative of a normal post.

Good performance is baked into the framework. Provided you use Astro the way it’s intended to be used it’s pretty difficult to get a slow site.

6. The documentation

Did I mention that the documentation is incredible? It’s usually hard to get too excited about documentation but trust me, I’m enthused about Astro’s docs.

In constrast to Eleventy and Gastby I was productive in Astro almost immediately. In part this is due to it sharing many patterns with React, however it’s also due to the brilliantly direct and clear documentation.

---

I took the long road around before landing on Astro. I toyed with Gatsby, Eleventy, and even had a crack at building my own static site generator for a while (it turned out to be a lot of hacky node scripts - comment if you’d like a full blog post on that process 😂), but in the end Astro was the clear winner and will probably remain my preferred way of building sites for the foreseeable future.