Deploying a modern, secure static site, for free with Hugo and Netlify
The previous iteration of tomjwatson.com was put together in 2014 and was starting to really show its age any time I needed to update anything. It was a basic node server that rendered Swig template files and used Poet to power the blog. Both of these packages are no longer maintained.
The toolchain was a mess of Grunt and Bower which, to say the least, are not exactly cutting edge any more. The fact that a web application can become quite so outdated in only four years is testament to the relentless pace of frontend development.
The site was also previously hosted on a Hobby instance on Heroku, which was costing me $7 per month for what was effectively a static site.
- Ultra fast - everything is served from a CDN
- More secure
- Easier to reason about and maintain
- Works offline as a progressive web app
Enter Hugo and Victor Hugo
In the end I decided to use Hugo - the blazing fast static site generator written in Go - given its popularity and fit with the features I was looking for. Hugo works by taking a directory of content/templates and compiling them into a full HTML website, ready for static hosting.
Hugo lets you define the content of your site using markdown files, and store any data needed as yaml files. For example, all of my blog posts are stored as markdown and entries for each of my projects are stored as yaml files. Templates can then be defined that render your content however you like. Victor Hugo then allows me to write whatever JS/CSS is needed for the templates and bundles everything up into the output Hugo build. If you choose to use an in-built Hugo theme, you will not need to define any template files, CSS or JS. If you are a beginner or short on time, I highly recommend using one. You can check out the available themes here.
Here’s what the final structure of my project looks like:
|--site // Everything in here will be built with Hugo | |--content // Pages and collections | |--data // YAML data files | |--layouts // This is where all templates go | | |--partials // Partial templates such as header/footer | | |--index.html // The index page | |--static // Files in here ends up in the public folder |--src // Files that will pass through the asset pipeline | |--css // CSS compiled with PostCSS and bundled into /css | |--js // Will be compiled to /app.js with babel
Developing the site is as easy as running
npm start and heading to http://localhost:3000. Any changes I make to the code are instantly refreshed in the browser. Production builds can be created with
npm run build and are output to
Deploying with Netlify
Given Hugo simply outputs a static site, we have many options for hosting and most of them free. You could easily host on GitHub Pages or even S3, however I decided to go with Netlify as it is both free and the easiest option. Configuartion is as simple as authorizing Netlify for access to your repo on GitHub and configuring some minimal deploy settings.
Netlify will watch for any changes to your
master branch on GitHub and kick off a new deploy any time anything changes. This means that all that is needed to deploy the latest version of the site is a simple
git push origin master.
All that’s left to do is to update my DNS to point to my instance on Netlify et voilà - tomjwatson.com is updated to a modern, lightweight and secure website, all for free.
You can find the full source code at https://github.com/tom-james-watson/tomjwatson.com.