Posting with Hugo


Creating new posts and managing content with Hugo took a little thought/experimentation to get the flow I wanted. Firstly, I needed to get rid of the default TOML rubbish and secondly I needed to get my head around a sensible way of managing basic data.

Creating and Editing Pages

Pages are created with the hugo new command:

hugo new articles/tech/

This creates a new file on that path with a base template in place. Files contain Front Matter which is the meta data that defines how the page works, then the content is either assumed from the file extension i.e. .md is markdown, or from the front matter configuration.

I’m editing my articles in VSCode, using the Markdown format and a split pane with a Markdown preview. In the VSCode terminal, I have the development hugo server running with live reloading (hugo server -D) with my local site open in Chrome. So every time I hit ctrl-s I get a preview for real in the browser. Pretty nice and also techie. So I’m happy 😃!

Changes are made, committed to git and pushed up to BitBucket.

Archetypes and Front Matter

Templates are created from Archetypes. This is a way of setting a default standard for what’s in a new page when you create one. These exist in the theme or in the base Hugo install.

The Goa theme I started with has a horrible (to me) base TOML default archetype:

draft = false 
comments = false 
slug = "" 
tags = []
categories = []

showpagemeta = true
showcomments = true

So I added a new Archetype to my base hugo to work with in the archetypes folder in the base of my site (personal-site\archetypes) I set up a This will now be used every time I create a new page.

    "draft": true,  
    "title": "{{ replace .Name "-" " " | title }}",
    "description": "SUMMARY.",
    "date": "{{ .Date }}",
    "tags": [],
    "categories": []

All pages are now JSON configuration, the title defaults to the slug I used when creating the page and the date defaults to the date and time I ran the command. Brilliant:

hugo new articles/tech/

Shared Settings

There are a whole bunch of options you can configure in the Front Matter that I’d like on some defaults for all articles, which may not be the Hugo defaults e.g. turning the integrated comments off. And I want to be able to change my mind later and not have to script a bulk update to all my JSON.

Fortunately, at any folder level you can add a file which can have a cascade block for front matter options to apply to all children. So in my articles\ I have set up my options:

    "title": "Articles",
    "cascade": {
        "comments": false,
        "showpagemeta": true,
        "showcomments": false

Great! I’ve also tweaked the theme I’m using to allow me to put an intro into any list page by putting some content in the and to use the title from the file.

Publishing Cycle

So there we go, with a little work on my archetypes and I can now add a new page with a single Hugo command that gives me a good start for the page. Write it, preview it in the browser. git commit as I go, and when I’m ready, turn it from "draft": "true" to "draft": "false", push changes to git, build the site with hugo --minify and then upload the public folder to my web-host.

Nice. The site is screamingly fast and pleasingly “techie” to work on.