Building and deploying our new website with Jekyll, GitHub, Ngnix and Graphicsmagick
by Filip Hnízdo, September 14, 2017
NOTE: We’ve since (2020) rebuilt our website using a different technology stack. But are keeping this online in case anyone is interested in the details.
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.
- GitHub Pages doesn’t support HTTPS on custom urls. We love HTTPS and our site has always used it.
- We wanted to do some things such as automatic image resizing and compression that GitHub Pages doesn’t support.
- We wanted full control over how the site was served/cached.
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:
- Git Pull from GitHub to get the latest code.
- Jekyll build
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 filip@octophin.com.
