Published on: 17th February 2025
At the beginning of the year, the little Raspberry Pi that hosts this site needed to be wiped and reinstalled. All my fault: I’d done an in-place upgrade of the Rasberry Pi OS despite all of the warnings and, while it worked to begin with, it didn’t come back after an unexpected reboot. Thankfully the good people at Mythic Beasts have images available to set up the latest version of PiOS with minimal hassle. The bad news was that I had to restore the site.
It would have been easy for me to copy everything back, shrug and get on with things. But I happened to be looking at static websites around the time this happened, and I started to think: maybe it’s the way forward for the site?
I’d read plenty about static sites and the concept was easy to grasp. That’s the point I think! Have a minimal site containing just HTML and CSS that would be speedy and hack-resistant. (The whole site could be read only, for one thing.) What I couldn’t grasp was how static sites could scale. It looked like an admin nightmare; one layout change would have to be implemented across every page. Given that progammers are lazy (and that’s a good thing), there had to be a better way to make a static site. And then I stumbled on Astro.
I saw posts about Astro in the React weekly news mailshot and thought it worth a look. It’s a system for building static websites using shared components and layouts in the design stage. Perfect! The latest version 5 also had a feature called collections where groups of similarly-formatted items could be addressed as a group. These blog posts just happen to be similarly formatted items, so I got stuck in.
There is plenty of JavaScript and JSX in the design stage (fine by me) but the site then builds/compiles to simpler HTML and CSS. After so much time with React the layout and programming were familiar, and the simplicity of it all was refreshing.
Thanks to their excellent tutorial and reference I was able to take the collection of blog posts and make an Astro collection that I could retrieve and sort. The home page shows the most recent four posts; since the Astro collection is a JavaScript array it’s no trouble to sort by date and slice the four most recent posts. Astro even has pagination built in, so for the proper blog page it was possible to specify a number of posts to show on each page and let pagination do the rest.
Since the built site is plain(ish) HTML, all of the pagination happens during the build phase. So if I add a post (as I am doing right now!) then the site has to be rebuilt. The build process is fast so that’s no problem.
I still needed to make everything scale properly, but that’s an issue for part two.