Building a static website in Hugo

Recently I happen to have two serendipitous things happen to me. First I became very annoyed with WordPress while trying to make a change on my personal website. Second I happen to stumble across a Bryan Lunduke video about creating static websites using software called Hugo. The net result, as you may have surmised by now, is a complete migration of my website from WordPress to Hugo (…I mean what else are you going to do while in self isolation?).

This post isn’t meant so much to rehash the why of this choice or even the research that I did on other alternatives, like Jekyll, but if you’re interested in that you can read the post over on my site here. Instead I want to focus on what building a static website in Hugo looks like.

First thing you need to do is grab the Hugo application. There may be a version of this inside your distribution’s package manager but in my case it was quite out of date and incompatible with some of the newer themes. So I ended up grabbing the Snap package instead:

snap install hugo --channel=extended

Once I had that it was as simple as running the new site command to create the necessary directory of files.

hugo new site examplesite

As mentioned this creates a series of files and folders but the main one you need to know about for now is config.toml which is where most of your site-wide global configuration lives.

The next thing you want to probably do is install a theme, otherwise you won’t actually get very far. Hugo’s excellent Quick Start guide recommends grabbing the ananke theme via git using the (modified) commands seen below.

cd examplesite
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Once “installed” in the theme directory you’ll need to add it as a configuration value in that config.toml file I mentioned earlier. While we’re at it let’s set a few additional values.

baseURL = "http://example.site/"
languageCode = "en-us"
title = "My Example Website"
theme = "ananke"

And that’s really it. If you want to write a post for your website you can just throw a file in your content directory or use the handy built-in command to help you along:

hugo new posts/hello-world.md

As you can tell from the file extension this is a markdown file and so to write your post you would simply write some markdown content and hit save. The other thing Hugo does is that it adds some meta data to the top of the file which allows you to set things like the post title, published date, URL or even a thumbnail if the theme supports it.

title: Hello World!
author: Tyler B
type: post
draft: true
date: 2020-03-21T22:40:00+00:00
url: /hello-world
thumbnail: /images/hello-world.png

categories:
 Test Category
tags: 
 - Test Tag

This is my Hello World! post test post. Here is what a [link][1] looks like. Neat huh?

 [1]: /look-a-relative-link

Hugo even ships with a built in web server that lets you test your website locally. To use it simply run the command:

hugo server -D

The -D tells it to include posts marked as drafts. With the server running any changes you make, and save, will almost instantly be reflected. Once you’re happy with everything all you need to do is run the hugo command to generate your whole website.

hugo

By default all of your files will be placed into the public folder which you can then simply copy to your web server and you’re done. Need to make a backup of your website? Simply zip/tar.gz your files and you’re done. No database backups need here…

Obviously this was a very quick high-level overview of how easy it is to put together a website using Hugo and I’m glossing over a lot of the built in power it has so please read up on that if you’re so inclined.

To close out I just wanted to mention some of the improvements I found in my testing between my personal website running in WordPress vs Hugo. Since switching I saw a 44% decrease in page load time and a 70% decrease in data transfer. Pretty decent!