Maintain Websites Using Hugo

This document assumes you have Hugo 0.52 or newer installed. Use the hugo version command to determine which version you have access to. Once the steps below have been followed to set up Hugo we will migrate an existing site so that it can be managed by it.

Set up Hugo

  • Create a directory structure for your new website: hugo new site <your directory's name>
  • Switch to YAML config files instead of the default TOML: mv config.toml config.yml
  • Edit the newly generated configuration file:

languageCode: "en-us"
title: "Your site's name"

mkdir -p assets/css
cp ~/path/to/your/style.css assets/css/

{{ $style := resources.Get "css/style.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

  • Remove any unneeded directories and create three new ones:

rm -rf archetypes data themes
mkdir -p layouts{_default,partials,shortcodes}

  • Start the Hugo server: hugo server

Migrate a Website to Hugo

We will make changes to the Social Justice Repair Kit site so that it can be managed using Hugo.

It would be ideal if the majority of user managed content is authored solely using markdown with a minimal amount of shortcodes. One way of accomplishing this is by splitting up markdown files in the content directory, including a type property in the front matter, and then referencing that type property in layout templates where most of the markup can live.

Further Exploration

So far the Inclusive Cities and Social Justice Repair Kit projects have used Hugo to maintain content and only a subset of its features have been tested. As we use it for other projects we will most likely need to spend time trying out the following features: