Building this site with Astro
My usual approach when building a new thing is either to (a) use a basic tool and reinvent the wheel, in order to learn the basics of whatever I’m planning on doing, or (b) use overkill tech just because I want to learn it.
However, just this once I went with a different approach, looking for the most appropriate tool for the job from the modern ecosystem. I know, mind-blowing.
So I looked into what was hip for building static sites. I wanted something minimal in terms of code to maintain as well as load times. It should also be expandable with more complex interactivity, or anything else I might want down the line.
After looking around for a bit, it seemed Astro fit the bill.
Astro describes itself as a “web framework for content-driven sites”. In my
own words, I’d say it’s a really advanced static site generator. The
“content-driven” part, I feel, shows up mostly in how easy it is to write blog
posts as .md files and pull them into the site, with metadata options
declared in the frontmatter of the same file.
In short, Astro has you use .astro template files, which are very similar to
.jsx. And by default any JavaScript code you write runs at build time, when
you generate the static site.
However, you may add interactive components from the frameworks they support
(React, Svelte, Vue, …) or through vanilla JS <script> tags.
Astro’s interactivity is based on the islands architecture. In case you’re unfamiliar, this lets the page load fast, since it’s just static HTML and the JavaScript is only loaded for the individual components that need it. I really appreciate how easily you can defer hydration until a component comes into view. (Relevant docs)
It feels good to use a tool that feels like it had real thought put into the
developer experience. One feature I especially love is the hot-reload when
initializing a dev server with npx astro dev. It’s extremely fast, the time
between saving a file and seeing the change in the browser feels immediate.
And since I’m just generating a purely static site that doesn’t talk to a
server, deploying it is easy: run npx astro build, copy the generated
./dist folder to a container in my homelab, and spin up Caddy with a tiny
config file.
Anyway, I’m not an Astro shill, just genuinely impressed with it, although I haven’t even needed any interactivity yet. But even just as a static site generator it’s superb. Maybe this is just what happens when you actually use appropriate tools for the job.