Migrating my blog from Jekyll to Astro

An introduction to my journey migrating my blog from Jekyll to Astro.

Blogging

So back in January I wrote about my dissatisfaction with Jekyll and how I really wanted to switch to something else that I would be more comfortable being able to tweak and extend myself.

I’d been toying with the idea of writing my own engine from scratch, but had not made much progress. I’d also looked at Eleventy, but struggled to see how it would fit with what I wanted. My SixPivot colleague Gert suggested I take a look at Astro as it has a blog template (amongst other features). I’d not heard of it before (not totally surprising given the pace of change in web frameworks!).

Astro logo and name

To start with I encountered some issues with npm and PowerShell, to which Gert also suggested I give the PnPM package manager a try. I must admit I’m now hooked - pnpm is really fast! I now make sure to define PNPM_HOME as part of my Reinstall Windows scripts, so that I benefit from having a single package cache that continues to work after reinstalling Windows.

Often I skip tutorials and just start poking around with new tools, but in this case with Astro I decided that there were quite a few new concepts to understand and maybe working step by step through the tutorial would be helpful - and it was. By the end I had a much better idea how Astro worked and whether it would be a good fit for what I wanted to achieve. I was cautiously optimistic.

Astro is a web framework that is primarily about content, and in particular it excels at rendering static content. It does have support for server-side rendering, and you can also integrate with popular client-side frameworks like React and Vue, but that is optional (and not something relevant to me for now).

Astro supports multiple page types. Its native file type are .astro files, which allow TypeScript/JavaScript to be included in the first part of the file (delimited by --- separators), and then HTML in the second part. Astro UI components (based on HTML) use the same notation. Crucially, Astro also supports regular Markdown files .md. All my existing posts were already in this format.

Astro’s support for TypeScript is first class. Being a .NET dev at heart I really like types. If I wasn’t going to use a .NET blog engine, then choosing one with great TypeScript support was a must.

I ended up using the Astro blog tutorial as the basis for my rewrite, but also took inspiration from some of the other Astro community-provided templates, for both customising the theme of my blog and figuring out how to do a few things that weren’t obvious.

Rather than try and fit everything into one post, I’m going turn this into a series where I can focus each post on a different aspect of the migration. Additional topics I plan to cover in this series include:

I will update this list and link to those posts as they are published