How to speed up your Hugo blog post creation workflow

I learned a way to save lots of time when creating new blog posts in Hugo. Here’s my current workflow.

Why I wrote this tutorial

I love Hugo way more than Wordpress, but sometimes the process for creating a new post can be a bit fiddly if you haven’t worked out how to streamline it.

A couple of years ago, I discovered a great new way to create blog posts in my Hugo sites, which I’ll share here.

But first, let’s take a look at my old workflow, just to see how many steps were involved.

My old workflow for creating a new Hugo post

This is what I used to do to create a new Hugo blog post:

1. Open Finder and navigate to the folder containing my Hugo files.

2. Find a previous post from my Hugo site in Finder, duplicate it using Finder’s context menu, rename it to something appropriate.

3. Open this new file in the Text Wrangler text editor, and delete almost all the content, leaving only the YAML front matter field names.

4. Fill out the YAML front matter fields. When I get to the date front matter field, of course I don’t know the date, so I have to look it up.

5. Finally, I could start writing my post. Or maybe I’d check out Hacker News instead after all that work.

Overall, it was quite fiddly, involving switching between two Mac apps (Finder and a text editor) and manually typing in that day’s date into the YAML front matter.

Then one day, a developer at work named Douglas told me about a free code editor that would end up dramatically improving my workflow, not only in Hugo, but in other coding tasks too.

Enter VS Code

The free code editor Douglas recommended was VS Code, from Microsoft, and it’s dramatically improved my Hugo experience.

Before I show you the new-and-improved way I create blog posts in Hugo, let me quickly tell you about the concept of “workspaces” in VS Code. It’s relevant to this tutorial.

My current workflow for creating a new Hugo post

OK, so how has VS Code changed my Hugo blog post creation workflow? Here’s my process now:

1. Open VS Code. If necessary, switch to the workspace for the relevant Hugo site.

2. In any workspace, VS Code shows me a folder tree (similar to Finder) on the left-hand side of my screen. I use this folder tree to create a new Hugo blog post by right-clicking on the /content/ folder, and clicking New File from the context menu. I then give this new file a name, e.g. my-new-post.md.

3. The new blog post opens automatically, still in VS Code. It’s completely blank, but I can insert my custom YAML front matter—with the date already filled out!—with a couple of clicks (I’ll show you how below).

4. Now I can write my post. No need to take a break and read Hacker News, I’m raring to go!

I’ll show you how to replicate this workflow for yourself. But first, we’ll need to know about a VS Code feature called “User Snippets”.

How to create a VS Code User Snippet for Hugo blog post YAML

Here are the steps:

1. Create a new User Snippet

Create a new User Snippet by clicking on Code > Preferences > Configure User Snippets.

2. Choose the type of Snippet you want: global or local

You can now choose whether you want this new snippet to be global (i.e. across all your workspaces) or scoped to the current workspace only.

If you have multiple Hugo blogs with the same YAML front matter fields, then global scope might make sense.

However, if you only have one Hugo blog, or your YAML front matter fields vary across your blogs, then choose the local scope.

The global option is called New Global Snippets file..., while the workspace-scoped option is called New Snippets file for 'moonbooth'... (obviously it won’t say moonbooth, it will say the name of your workspace).

3. Name your User Snippet

You can name your user snippet whatever you want. Let’s call ours yaml-front-matter.

4. Copy and paste the User Snippet below, changing where necessary

{
	"New Blog Post": {
		"prefix": ["blog-post"],
		"body": ["---\ntitle:\ndate: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND+11:00\nseoTitle:\ndescription:\nauthors: [\"YOUR NAME HERE\"]\n---"],
		"description": "New blog post for MoonBooth."
	}
}

That will give you the following output:

---
title:
date: 2020-03-06 18:23:32+11:00
seoTitle:
description:
authors: ["YOUR NAME HERE"]
---

You’ll obviously need to change the parts that don’t apply to you. Where it says YOUR NAME HERE, put your name (or that of your content person).

Do note that I’ve hardcoded in the timezone (+11:00) for Sydney, Australia (where I live), but you’ll probably need to change that, unless you live in my neck of the woods too, in which case, hello!

And of course, if you’re not using the YAML front matter fields I use, you’ll need to edit that too. seoTitle and authors are custom YAML front matter fields I’ve added, whereas title, description and date ship with Hugo.

5. Create a new Hugo blog post

In the folder tree on the right of the VS Code interface, right-click on the Hugo /content/ folder, and clicking New File from the context menu. Give the file a name. Remember to include the Markdown extension, e.g. my-new-post.md.

6. Summon your new User Snippet in your new blog post

Hit the Mac’s control key (^) and the space bar at the same time.

You’ll then see a small overlay with your User Snippet.

Hit return, and it’s inserted into your blog post. Boom!