Choosing Jekyll – a static cms

The main purpose of our company website is to showcase our work and the type of work we do through static pages. It’s updated by a closed, small group of people. It doesn’t need a complex database or content management system (CMS) behind it. For these reasons we chose Jekyll, a static content CMS. This means our site is made up of lots of HTML files with a few helpers such as templates to stop us having to repeat ourselves.

It means we can concentrate on the content (written in Markdown, an easy to write/read plain text format) and design the site to be as cleanly coded as possible without hopping through hoops set up by other systems.

As we do lots of our work through GitHub (a version control and issue tracking website) we decided that editing the content through GitHub was a good fit for us. GitHub also hosts Jekyll sites so we wouldn’t have to worry about hosting the site on our servers! Fantastic! Or not…

Hosting and auto-updating Jekyll on our Nginx powered servers

GitHub hosts Jekyll sites through its GitHub pages system. It even lets you use custom urls. Unfortunately we ran into a few problems with that.

So we deployed it on our Ubuntu Linux server.

Autoupdating from GitHub

Having to manually update the server every time we pushed a change onto GitHub would have been a pain so we wanted our server to rebuild the static pages and update the site on our server automatically everytime something changed.

For this we used GitHub’s webhooks system. A webhook is a call to a web address on a server of your choice that is triggered everytime something happens. We made a little PHP file on our servers to accept this request and do the work on the server.

Giving a PHP script root access to run any commands on the server is a security risk so I wrote a locked down bash script that would be the only thing the PHP script would be allowed to run (we used the Linux sudoers file for this).

The script does the following:

Optimising images using Graphicsmagick

There are a lot of images on our site and we really wanted to keep the page size down to make it fast and easy on people’s mobile data limits. Jekyll doesn’t come with any automatic compression of images so if we wanted to serve smaller image thumbnails in certain areas (such as the project listing) we would have to upload small images ourselves. A key aim was to make the site easy to maintain and update so this was a problem.

In steps Graphicsmagick, an amazing set of open source tools for running scripts to resize, alter and do other things to images. Unlike something like the MyTrueSelfie app we built which uses lots of advanced Graphicsmagick features, we just needed to bulk resize images into a folder whenever they update.

This is beautifully simple with Graphicsmagick. Just run something like:

gm mogrify -output-directory ../small/images -resize 800x *.png *.jpg

And it resizes all png and jpg images to a width of 800px (preserving aspect ratio) and saves them to a small/images folder.

Once this snippet was written and tested, all we needed to do was add this script to the deployment bash script. Now every time GitHub is updated our small folder is automatically populated with smaller versions of the images we can link to in our templates where needed.

So our site is clean, fast and easy to update.

Want more information about the process or have some comments? Message @filipnest on Twitter or email