Skip to main content

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:

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.

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.

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.