Paul McGrath

Static Websites with Jekyll

Some basic outlines.

I put aside a few weekends recently to work on developing a simple new blog and portfolio site from scratch. My old blog was a basic template that I set up after DroidCon Montréal, so I thought it’d be fun to dig into Jekyll and play with a few new tools, while sprucing it up a bit.

I worked on a few mock-up ideas, starting from mobile-first, and decided to let it evolve from there. Depending on how long it’s been since I wrote this article, the site could look quite a bit different now.

Lately I’ve been using new tools for creating wireframes, partly to avoid the subscription to Adobe CC, but also because there are some great tools being built by small teams at the moment. My two favourites so far are Affinity Designer, a direct illustrator replacement, and Sketch which is more focused on wireframing and prototyping.

Incredibly straightforward, and highly recommended.

Having spent some time working with Joomla, Wordpress, and Drupal, I was far more interested in building a static site than deploying another bloated CMS. The three I found most appealing were Jekyll, Middleman, and Ghost. As Github provides free hosting of static sites through Jekyll, the decision was pretty easy.

As a digression, I’ve always bought and managed my domain names through Gandi, whose slogan is No Bullshit™ and is pretty accurate in my experience. A CNAME file added to the root of the repo, and the site would have a custom domain. Super stuff.

Admittedly, I can't handle how slow Atom is.

I initially used Yeoman to scaffold a Gulp-based workflow; however, it was a little opinionated in what it generated, so instead I used Jekyll new to create a basic structure and then build a simple workflow from there. Jekyll’s watch command, with compressed Sass output, and Browsersync running under a single Gulp command was all I needed.

I decided to use Bourbon, Neat, and Bitters to assist with mixins, grids, and typography. Overall I enjoyed the experience and they work well without much hassle. I would like to try Susy for my next project though, as I like the grids-on-demand approach, rather than an entire framework.

Went in a totally different direction in the end.

A week or two later, I had some free time and cleaned it up a bit more.

Having this goal completed, it seemed like the right time to start optimising what I’d built, so I started with removing dependencies to unnecessary external files, such as using four SVGs for my footer rather than import FontAwesome, and then losslessly compressed all the images on the site.

Anything that could be done in CSS rather than using an image (like the original rainbow strip in the header) was also fixed. I did make small compromises, however. I replaced TypeKit’s async Javascript with Google Fonts stylesheet reference, as the FOUT was proving too irritating and I was willing to take the tiny performance hit.

One of the most useful decisions I made was to sign up for a CloudFlare account, which allowed me to control caching, content delivery over HTTPS, and further minification of resources. It also provides excellent statistics, protection, and a wealth of other options.

An unexpected lesson to learn was Jekyll’s lack of support for html minification without additional plugins. A bit of searching later, and this incredibly smart Liquid-based hack sealed the deal.

As a tool, I think Jekyll is pretty decent, especially as it has GitHub support, which makes deploys so much easier. I normally end up rebuilding my site each year, so we’ll see will it stand up to scrutiny this time next year.