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.
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;
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 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.
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.