Using Hugo (a static site generator) on a Daily Basis

Summary

A bunch of tools, heavily inspired by Christian Mohn’s My Hugo and Visual Studio Code Workflow, to streamline blogging via Hugo.

Visual Studio Extensions

Markdown Linting

David Anson’s vscode-markdownlist helps keep your Markdown tidy and it plugs into the Auto Fix... command to quickly cleanup files.

Paste Image

I agree with Mr. Mohn, Paste Image is a great Markdown image insertion extension. I use the default /static folder to store an /images sub-folder, with relative links in my Markdown.

1
2
3

# my Hugo image and post structure
/whiskeyandcode/content/posts
/whiskeyandcode/static/images

I define my paste settings in a VSCode workspace instead of User since these often change depending on the site.

1
2
3
4
5
6
7

{
    "pasteImage.path": "${projectRoot}\\static\\images\\",
    "pasteImage.basePath": "${projectRoot}/static/images",
    "pasteImage.showFilePathConfirmInputBox": false,          # set to true for "debugging"
    "pasteImage.prefix": "/images/",
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_"
}

Better TOML Front Matter Formatting

I prefer toml for it’s concise, single-line array format. To get better toml front matter highlighting install Better TOML.