Migrating to Astro

Background

I started this site in 2013 using Middleman as the static site generator. Since the site was solely for showcasing my software, which does not update frequently, I eventually switched to maintaining raw HTML files. Recently, I decided to start a blog, prompting me to explore which SSG to use.

What is Static Site Generator

When you have a bunch of HTML files on a website, you don’t want to edit all of them just to change © 2025 to © 2026 each year. SSG is a software that uses template engine to generate HTML files. Additionally, it provides extra features such as converting Markdown to HTML, generating table of contents, and so on.

Candidates

Middleman

Middleman uses Sass for managing stylesheets and ERb or Haml for templates. As browsers evolve and features like CSS Nesting are added, the need for something like Sass is becoming lower and lower. Also, I don’t have good memories of using Haml. Maybe it is better than HTML, but these days I prefer raw HTML.

Zola

Written in Rust. Seems good, but maybe too basic?

Astro

Astro has lots of plugins and very versatile. It uses its own file type called .astro, which combines JavaScript and HTML in a single file. With Treesitter and LSP support, editing it in NeoVim is quite comfortable.

Setting up Astro

Create an Astro project:

$ npm create astro@latest

Recently, I prefer using Tailwind CSS when possible:

$ npx astro add tailwind

Catppuccin is a color theme that has wide support across various platforms, including editors, terminals, and more. It also supports Tailwind CSS. Currently, only the beta version supports Tailwind v4:

$ npm install -D @catppuccin/tailwindcss@1.0.0-beta.1

The HTML created from Markdown is out of the control of Tailwind CSS, so I need another plugin to apply stylesheets:

$ npm install -D @tailwindcss/typography

Pitfalls

The files generated by Astro contain some that start with an underscore, so I had to add a .nojekyll file to the public/ directory when using it for GitHub Pages.

Conclusion

Astro’s syntax was easy to grasp, and customizing it was just a matter of writing some JavaScript code. I enjoyed it.