Redesign notes and switching to Octopress

When I set out to redesign this site and start blogging, I knew I wanted it to be a static HTML generated weblog (also commonly known as “baked”). Coming from Wordpress, this publishing workflow is a dream.

Content, which is just static HTML, is created in Markdown in a text editor, saved into version control (Git) and pushed to GitHub to deploy. This means no database (MySQL) — a potential security nightmare and single point of failure, no page caching (goodbye WP Super Cache and W3 Total Cache), no FTP and super fast page loads – all good things.

I evaluated some great systems including Octopress, Middleman, Nesta CMS and I’m keeping a close eye on Calypso (built on Node.js and MongoDB), but in the end I opted for Octopress as it fitted my needs. I’m still ironing out a few kinks with Octopress, but overall I’m very pleased with how its worked out.

Here are some notes on the thought process behind this redesign:

• Powered by Octopress – with static HTML offering many advantages over the traditional database and caching (especially if you get fireballed).
• Hosted on GitHub – not only are their servers very quick it’s also free. Anyone can make a pull request on GitHub to contribute to this website, suggest changes or amendments.
• Speed – the goal was to have this site load in one second. To make this possible, speed led all of the decisions and compromises that were made with this site.
• Page-weight – the aim was to keep pages below 100k for a great mobile experience. This meant that anything that didn’t need to be there went and everything that was left was heavily compressed.
• HTTP requests – another point critical to speed. For this reason, the basic theme for this site has no images, apart from the picture of me in the footer, but that's been encoded in base64 and embedded into the main stylesheet.
• JavaScript – minimal JavaScript, just Disqus and Google Analytics (both loaded asynchronously) plus Typekit. No jQuery.
• Mobile-first, responsive web design – my previous design wasn’t responsive and that bothered me. I’ve been building almost exclusively responsive websites since the latter part of 2010 and this was not reflected in my personal website – so this was a priority.
• Design – I’m a big fan of Instapaper, Readability and Reeder app, and I wanted this great reading experience to be the default for my site.
• Typography – page-weight was also the final deciding factor for the typography. I trialled dozens of serif faces before narrowing it down to three. Of these, the beautiful Freight Text Pro was noticeably leaner. This became even more apparent when I added ‘All Characters’ in Typekit, should I wish to add ligatures in the future. I even made the decision to forgo a bold weight, instead using colour to give the appearance of increased emphasis.

There’s still some issues I’d like to address with the redesign, and as this is my personal site, I like to use it as my playground for trying out new techniques and ideas. So, it’s likely to remain in a state of flux for the foreseeable future.