In creating this site, I wanted to use a framework or content management system (CMS) that is lightweight, easily maintainable and I could continue to add to over time. I’m very familiar with WordPress, the incredibly versatile CMS that is reported to power 30% of the web, however as a result of its one-size-fits-all nature I feel it’s become heavier and more clunky to use for simple sites. Despite searching far and wide for WordPress themes, I also couldn’t find one that quite embodied what I was trying to accomplish. Finally, self-hosted WordPress sites require a MySQL database so are typically hosted on virtual machines and I was keen to avoid the cost of yet another AWS EC2 instance and the need to run backups.
We had used a Static Site Generator (Gatsby) for the marketing website for Outcomes.com and I thought it was time to revisit what was out there. Static site generators have become increasingly popular in the last few years and in many ways they bring back the joy and simplicity of the early web when sites were just a collection of flat HTML files, CSS and images. The generator takes your customized templates and content, usually written in Markdown, and builds all the static files of your website which can then be hosted on a simple web server (eg. AWS S3, GitHub Pages or Netlify - more on that later) without the need for a database. While this lends itself to relatively simple sites, they can still be heavily customized and augmented with client-side scripting. I’ve since learned that Healthcare.gov and Obama’s Campaign website were both created with Jekyll, a popular static site generator.
I decided to go with Hugo, which claims to be the fastest static site generator out there (written in Go), although with number of pages on this site it is unlikely to matter. More importantly it seemed easy to configure and I found a theme I thought I could live with, Hyde.
It was very straight forward to get things up and running on my local machine (MacOS) and one of the advantages of many of these generators is that you can run a local web server that rebuilds your site instantly when any of the files are edited, meaning you can draft changes and see what they look like locally before you decide to publish to the web.
I decided to store the code for the site on GitHub and discovered an incredible deployment/hosting service called Netlify. Their free tier allows you to host multiple sites on their Content Delivery Network (CDN), with automated deployment from GitHub (any time you push new code to your site’s repository it automatically rebuilds the site and deploys it to the web). Better yet it includes free support for multiple domains with SSL certificates provided free by LetsEncrypt and allows you to preview builds on development branches before you push or merge to master.
With the combination of Hugo (static site generator), Hyde (theme), GitHub (code repository) and Netlify (deployment and hosting), I was up and running and without spending a penny!