If you’re old enough to remember a time before selfie sticks and Pokemon Go, you might remember that static websites were once commonplace. You would write the HTML code by hand and upload it to your tiny quota on an expensive server. Then, the 2000s came and WordPress and other content management platforms took over. Today, however, static websites are making a comeback – and they deserve serious consideration.
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.
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.
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:
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.
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.