About the site
This site has been through several incarnations. It’s always been a static site, but the choice of generator has changed several times.
The first version, which I posted in late 2012, was built with Octopress. Maintaining a working Ruby setup for Octopress was a lot of hassle, so a year or so later I switched to the Python-based Pelican. That worked fairly well, but the AGPL and licensing question always made me a bit nervous. In 2016, I experimented with writing my own site generator (called Hot Chocolate), but I just spent a lot of time reinventing wheels.
The current version is back to Ruby and Jekyll, wrapped in Docker to simplify the build process. What you see today is powered by:
- Jekyll, for building the HTML
- Sass, for building the CSS and stylesheets
- Docker, which wraps the local build process
- GitHub Actions, which builds and deploys the site
- Netlify, which hosts the site
and all the site source code is on GitHub.
I’m also using some icons from the Noun Project, used with a NounPro subscription.
Between the Wayback Machine and my screenshots, I’ve put together a short visual history of what the site used to look like. Feast your eyes on my evolving skills in web design.
Mid 2022 to present: Cards for browsing the archive
Most of the design is the same as in 2018, barring minor tweaks to spacing and text styles. I did add cards to the homepage to link to blog posts, as part of a design refresh to make it easier for new visitors to find posts they might like in the backlog.
I also used this design on the “best of” posts page, because at nearly 350 posts it was impossible for anybody who wasn’t me to navigate the archive.
2018 to mid-2022: A bio on the homepage
I continue to tweak the styles, but the major themes are the same: Georgia for the font, red accents, that speckled border across the top of the page.
I finally ditched the blog list from the homepage, because it was difficult to get a sense of the site – what you saw would vary based on what I’d written most recently, and if it was a really long post you might never see anything else! I replaced the homepage with a bio and a profile picture, with links out to blog posts but not jumping straight into the content.
I also added new code to tweak the accent colour and the stripe, so I can theme individual pages if it suits the content. Here’s a purple page:
2016: A speckled red header
I kept cutting the vertical height of the header – on small phone screens, you’d pretty much only have a header when you loaded the page, and you wouldn’t see anything else!
I also added the speckled background, which I’ve really liked as a bit of lightweight visual flare (barely 2KB). It falls back to a solid red stripe if the image doesn’t load.
Late 2014: The first red stripe
Unsatisfied with the bubbly menu in the previous design, I did another version of the site that added a red stripe across the top. I’ve tweaked this design quite a bit since the first version — the stripe became a less orangey red, I kept reducing the vertical height, and switched to a serif font — but the basic idea has remained the same.
Sometime in 2015, I swapped out the sans serif font (this screenshot is Avenir) for a serif font (Georgia), which is the current font.
Early 2014: What is that sidebar?
The site went through another redesign and two font changes in 2014, as well as a sidebar that aged badly. If I’d put anything more useful there it might have worked, but it just had the links that had been in the header. This only lasted a few months before I moved the sidebar back into the header, and then redesigned the site again.
2013: A big name design
The first major redesign introduced the red-and-white that’s been a common theme ever since, along with a name in the header that seems ridiculously large to me today.
Late 2012: Octopress
The original site was a lightly modified version of the default Octopress theme, with a blue tint that didn’t last. I’m pretty sure I had a red version of this theme, but neither the Wayback Machine nor my screenshots provide any evidence that it existed.