>> Return to graphic design services...
Rebuilding www.roythezebra.com with Jekyll and Netlify
Time to read - 5 minutes
Jekyll, the static site generator, was used to redevelop the popular reading website www.roythezebra.com. It’s been a delightful process and now means that the site is easy to amend and, combined with a global content delivery network by Netlify, has superb performance across the UK, USA and Australia.
Life before Jekyll…
www.RoyTheZebra.com is my popular website that supports children learning to read. I am passionate about literacy and this website uses my games and stories to excite and engage children about literacy. It has been a long-term project for me which I started way back in 2005.
I built the original site as a static html website in 2007. It used Flash player to power all its games and was a huge hit with around 10,000 people visiting it each day from around the world. The site was found under thousands of search queries. The site ranked well for high profile keyword searches such as ‘Reading Games’ as-well-as thousands of other keywords.
Whilst I was building the site in 2006, database driven content management systems (CMS) were just taking off in popularity. At that point, I wasn’t skilled with these CMSs and so decided to build a static site using Adobe Dreamweaver. From a performance point of view this was a good decision as static websites place a much lighter burden on the server and with growing traffic this meant my server was able to deal with the load. However, with over 500 pages of content it was a nightmare to edit, as each one would need to be edited individually… making a change to the navigation would be a weekend of work!
Changing the navigation links would take all weekend…
The website remained in its 2007 version until 2017 when it was long-due a rebuild. During this period the games and stories were rebuilt to be compatible with iPads. I used CreateJS and RevealJS to do this.
Choosing a Content Management System for Roy…
Choosing a way to easily manage the content on Roy was one of my top considerations when I came to redeveloping the website. I needed to be able to update any element of the website quickly and easily. I also needed the website to be secure, and also to be fast… not just in the UK but in the US, Canada and Australia.
Equally important, my budget was very small and the cost of deploying a WordPress database type solution across the planet was too high for me. Deploying and scaling databases on a content delivery network is very expensive. So that ruled out all database driven content management systems.
I decided that the most affordable way would be to build another static website by hand and just live with the admin nightmare - not a great solution!
Jekyll to the rescue
At this point, my research fortunately came across Jekyll. I wasn’t even aware that there was such a thing as a static website generator. In fact there are lots but Jekyll is the most popular.
Jekyll is great because it builds your html static website from a collection of text (your content) and layout files. So for example, you might have a layout file with your navigation code in and another file with your footer in. When Jekyll builds every page of your website it merges in the navigation and the footer files with your text content files to complete each html page… think Microsoft Word merging addresses with a letter. If you need to change the navigation then you change just one file and rebuild your site.
Jekyll builds your static html site from collections of text and layout files
The final output from Jekyll is your html website - ready to send to a server… it takes just a couple of seconds for each build of www.roythezebra.com. I have the site setup so that every time I make a change to my layout or content files then Jekyll rebuilds the website and creates a new set of html files.
Super fast
In fact, database driven websites have roughly the same process as described above… when a visitor visits a URL of a web page the content management system connects with the database and starts pulling out content plus layout and piecing it together to form the web page. The only difference with Jekyll is that this is pre-done (at the time of editing the site) before a visitor arrives. The finished .html page is immediately delivered to the website visitor rather than waiting for a database to connect and the software to build the webpage. Cutting the database out of the equation gives Roy a massive speed boost in comparison to a solution built with WordPress or another database driven CMS.
High performance around the planet…
To speed things up globally I chose to put the site on a content delivery network… that way users would be close to the website whether they were located in the US, UK or Australia. Putting your website on a content delivery network means that the site is stored in multiple places around the planet and is served from the nearest location… it gives a speed boost because the bytes have to travel less distance to get to the website visitor.
I could have chosen Amazon Web Services cloud but in the end decided on Netlify as they made it very easy to automatically deploy a Jekyll site to their content delivery network with the use of Git software.
Backing up is easy… it happens everytime I edit the site…
Talking of Git… Git is software that helps to manage the versions of your code project. It tracks changes and allows you to roll back to earlier versions of your project. It’s best practice for web developers to use Git.
I wanted to use Git with www.roythezebra.com… so that all changes to the site could be tracked. I also wanted to use GitHub - a hosting service to save my code to. Everytime I make a change to Roy I use Git to keep track of the change and then send the modified files to GitHub… Git does all this for me with just a few commands.
I was sold on the Netlify hosting service when I learned that the ‘live’ version of www.roythezebra.com could be updated with Git and GitHub. It works like this…
- I make a change to www.roythezebra.com
- I use Git to track that change
- I use Git to send the modified files to GitHub
- Github notifies Netlify that I have modified my site
- Netlify rebuilds www.roythezebra.com using Jekyll and the latest files from GitHub
- Netlify publishes the site to its global content delivery network
From my point of view… I simply do steps 1, 2 and 3 and the rest is taken care of. This is superb! And it means that my site is always backed up to GitHub which means that I could always redeploy the site or roll back to earlier versions (in fact you can do this within Netlify also) if I need to.
My site is always backed up to GitHub
Increased security… increased peace of mind…
Another benefit of removing the database from the equation is that there is less software responsible for managing the website. Software can be hacked and MySQL (the most popular database software) has a history of allowing hackers to access content directly. With the new Jekyll www.roythezebra.com website there is no database so no need to worry about being hacked on that front.
Summary
I would highly recommend Jekyll for building your website and Netlify for hosting static generated sites. I certainly feel happy with the choices that I have made with the redevelopment of www.roythezebra.com. I feel that the site is much more robust and secure. It is faster than it has ever been and is doing well in the search engine results pages.
The only thing I would add is that I don’t have an admin panel associated with www.roythezebra.com so for everyday editing for non-technical folk then I would add Cloud Cannon (which has a WordPress type dashboard as-well-as having inline editing) or Netlify’s open source CMS which Fort’s website uses.
By: Tim Bowerbank
Role: Web Developer