Hello Astro!

Back in January I decided it was time to upgrade my blog’s tech stack to something more modern. While doing research I stumbled upon Astro and was immediately intrigued: Authoring content in Markdown files? TypeScript support out of the box? Nice selection of site templates and themes? Runs as a Static Site Generator or a Server-side Rendering framework?

It all sounded pretty nice so I decided to dive in and begin experimenting. So far I’ve really enjoyed working with Astro.

Content Authoring with Markdown

I originally built my web site with a bunch of custom ColdFusion code (!) all the way back around 2001. Over the years, I moved from one content management system to another: Blogger, TypePad, Wordpress and Squarespace. What little time I was finding to work on my site was spent fiddling with the tech stack rather than writing content. The reality is that I just didn’t need a CMS and it was largely a distraction.

Authoring content in Markdown is quick and easy and the format is 100% portable. Astro also allows you to define a schema for the metadata defined in the Frontmatter, effectively providing compile-time checking for your Markdown. The layout attribute in the Frontmatter allows for customization of an individual page’s look and feel with no fuss. I love the simplicity but there’s also some great flexibility here.

TypeScript

I wouldn’t work on a large Web or Node project without it.

It’s great to see Astro embrace TS and apply some concepts and benefits to the Markdown schemas as I mentioned above. The definitions are easy to write using the Zod toolkit and the on the fly TS generation is really slick.

It’s just awesome to see the adoption of TS continue to grow year over year with more and more frameworks supporting it. Years back there was a non-trivial time investment required to get multiple tools and frameworks playing nicely with TS. It feels like we’ve reached a tipping point where many popular frameworks are supporting it as a first class citizen, or even defaulting to it out of the box.

I still remember seeing Anders Hejlsberg introduce TypeScript in a talk over ten years ago and thinking to myself, “this is going to be huge.” It’s satisfying to see the time I’ve invested learning it really paying off now.

Themes

There are some really nice themes available on the Astro site that look great and are generally easy to customize. It’s also worth mentioning that Astro doesn’t exactly have an API for building themes or customizing them: a theme is really just a fully-functional site which is shared on GitHub so that others can fork it and hack away. Most of them make strong use of Astro’s Markdown support, so they work great for content-heavy sites.

I started out with the Astrofy theme by Manuel Ernesto Garcia. It was a really nice theme, although I had found one or two minor visual issues while customizing it. When I was checking the repo to see if any issues had been filed, I noticed a lot of development going on: not just bug fixes but changes to the layout and functionality of the site. That was going to make it challenging to pull in fixes that I wanted while avoiding some of the feature changes I didn’t want. I foresaw a lot of git cherry-pick and resolving merge conflicts in my future, so I figured it would be worth taking a second look around.

Eventually I found the Blogster theme created by Dinesh Pandiyan: it has a sharp minimalist design that caught my eye. Beyond that, I was really impressed with code and how it was organized, the site’s setup for customizing fonts and icons, and the helpful comments all through throughout the codebase.

I was able to switch to the new theme surprisingly quickly, in part due to two technical design decisions in Astro:

1. Using Markdown to store the majority of page content means that much less code to worry about porting to a new theme.
2. Astro’s component model puts business logic in the frontmatter of the .astro file and the UI design and layout in the section below it. While this seperation exists in a lot of other frameworks, the Astro component model is simple since it’s not attempting to support client-side components with an involved lifecycle API. This made it a lot easier to port themes by updating the declarative layout section while requiring only minimal changes to the scripting in the Frontmatter. Astro’s model is simple and just works.

Wrapping Up

I’m going to write a separate post on Server-side rendering since exploring it has been really interesting.

The new site actually soft launched back in April and I’ve been making minor tweaks and refinements since - and getting a little distracted by Diablo IV and Minecraft 1.20. It’s good to get this post up and make it official 🎉