Colin Wilson

17 May 2017, 3:35 AM

Hugo + GitHub + Netlify; a match made in heaven

This blog is powered by Hugo and deployed & hosted via Netlify. Having tried a number of blogging platforms over the years I was looking for a new process that offered a more streamlined and efficient workflow so I could focus on creating content not management.

Why Hugo?

Hugo offers a fast static site generator (SSG) with a built-in webserver. Upon detecting changes in your content Hugo automatically regenerates your site and refreshes your browser, this makes for a very slick development cycle (especially when using a second monitor to display your site).

Hugo claims to be fast;

Extremely fast build times (~1 ms per page)

And this is no exaggeration. With a modest spec laptop (4GB RAM, 1.2GHz Dual Core CPU, SSD drive) I averaged build times of ~1.4 ms per page when rendering this site.

Available as a single, cross-platform compatible binary file. Installation is as simple as downloading and running the binary.

Once installed getting to grips with using Hugo isn’t too hard.

$ hugo new site .
Congratulations! Your new Hugo site is created in C:\Users\colinwilson\my_projects\colinwilson.uk.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Creating a new site using Hugo the command ‘new’.

Netlify

Netlify is great. They offer a CDN, Continuous Deployment and HTTPS all under one roof. Combined with Hugo and Git, deploying a site becomes a simple and joyful process.

Signup for a Netlify account, connect your new account to your GitHub (or Bitbucket/GitLab) account and select your Hugo site repository. Then configure and deploy your site.

Netlify/Hugo configuration.

With Netlify authenticated and connected to your GitHub account the workflow for publishing content to your site becomes a very streamlined, fuss-free process:

Now every time you push changes to your GitHub repo, your site will be automatically updated.

I’ve only touched on the basics in this post. There’s a whole bunch of additional options and features that make Hugo/GitHub/Netlify a great combination. I recommend checking out both Hugo’s and Netlify’s documentation for more info.

Copyright © Colin Wilson 2018