Monthly Archives: July 2018

Why Static Sites

Today, a static site doesn’t mean writing all of the HTML code by hand. You start by picking one of many static site generators. There are a wide range available and most are free and open source. The best known is Jekyll. Jekyll is GitHub’s creation and powers GitHub pages. It also powers our own website.

With Jekyll, or any static site generator, you create templates just like you would with WordPress, Joomla, Drupal or any other CMS. The key difference is that rather than uploading the templates to your server with the CMS, you run your static site generator on your own computer, over the templates. The static site generator creates plain HTML files that do not need to be processed by a server before they are sent out to your visitors.

This is the key advantage: the server requirements are extremely basic. Because the requirements are so basic, even a very small server can cope with a massive traffic. Furthermore, as CDNs become ever more popular, not worrying about a CMS and a database means that you can put your whole site on a CDN – not just the images, CSS and Javascript. This means that your visitors in Syndey can enjoy the same experience as your visitors in London.

Our Experience

Before moving to a static site, we mostly relied on Silex, a micro-framework designed to ease the development overhead of small web applications. As we started to focus on improving our website’s content, both for search engines and real users, we wanted to streamline the process of making changes and take advantage of a full site CDN.

We experimented with Jekyll, the most widely adopted static site generator and were able to port our website to Jekyll fairly easily with a Python script. We then started to investigate hosting a static site and, found Netlify. Although you can host a static site anywhere, there are a number of considerations such as choosing a CDN, storing the files somewhere and handling forms, SSL certificates and technical optimisation (such as CSS and Javascript minification). Considering all of this together, you can save a lot of time and get the best results using Netlify.

After moving to Jekyll and Netlify, making changes on our website became easier and our website is generally much faster. Netlify’s build tool also means that we can revert to an ealier verison of our website if something is broken, and uploading a new copy is as simple as deploying with Git or dragging a folder onto a web page.

The tools to generate, deploy and host a static site are collectively known as the JAM Stack. For us, this means Jekyll, Git, Netlify and a text editor.

Where to Start

Pick a static site generator. Factors you should consider are: the ease of installation, the ease of use and its extensibility. There is a great comparison here. Pay special attention to the template language used. Jekyll uses Liquid for example, that is just as powerful as Twig, Smarty and other well known template languages.If you choose Jekyll, you’ll need to install the RVM first and then simply:

gem install jekyll

At this point, you’re ready to create your website files. If you’re unsure where to start, start with the skeleton:

jekyll new project-name

and run the inbuilt web server:

jekyll serve

Deploying your Jekyll site to Netlify is easy: after running the last command and verifying that the website is working, simply drag the “_site” directory on to the Netlify website page, over the picture of your website.

Going Further

After building and deploying, you might wonder what other optimisation you can do. If SEO is a priority for you, you might like to keep an eye on your Google Pagespeed score. We started to explore Jekyll addonsto, for eaxmple, inline CSS.