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.

A homepage with three coloured cards linking to articles at the bottom of the page. The cards have a title, a picture, and a short description, plus a coloured border.

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.

A red stripe along the top of the site, with a large picture of a face on the right and a bio in the body of the page.

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:

An article with a purple stripe across the top, and purple text in the title.

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.

A red stripe with speckled squares at the top of the page, with an article below it.

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.

A tall reddish-orange strip with the name “alexwlchan” and a bio line, with an article below it.

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.

A white background site with a sidebar on the left and an article in the main area.

The same design, but with a slightly different font.

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.

The name “Alex Chan” in big red letters at the top, then an article below it.

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.

The name “Alex Chan” at the top, set against a dark blue background, then an article below it.