Building this site with Astro
Turns out it's pretty good!
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. Mind-blowing.
So I looked into what was hip for building static sites. I wanted something minimal in terms of code to maintain and 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.
The way it works is that Astro has you use .astro template files, which are very similar to
.jsx. However, by default any JavaScript code you write runs at build time, when
you generate the static site.
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: page load fast. The idea is to just have static HTML, any runtime JavaScript is only loaded for the individual components that need it, when it’s needed. 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.
Anyways, I’m just genuinely very impressed with this framework. I haven’t added any interactivity to this site yet, but even just as a static site generator Astro has been great. Maybe this is just how it feels to use appropriate tools for the job.