VSCode Tasks for Hugo Content Creation

Life’s short. Lets get rid of some bullshit shall we? 🐺

I told ya we’d come back to this…

in our last post¹, we got your vscode tasks file set up.

Now, Lets enhance it with the ability to create a new post for you, based on the archetypes²

I’ve created an archetype for my blogposts:

hugo blog post archetype file

{{ $DAYT := replaceRE "((([0-9]{4})-([0-9]{2})-([0-9]{2})))-(.*)" "$1" .Name -}}
{{ $YYY  := replaceRE "((([0-9]{4})-([0-9]{2})-([0-9]{2})))-(.*)" "$3" .Name -}}
{{ $MMM  := replaceRE "((([0-9]{4})-([0-9]{2})-([0-9]{2})))-(.*)" "$4" .Name -}}
{{ $DAY  := replaceRE "((([0-9]{4})-([0-9]{2})-([0-9]{2})))-(.*)" "$5" .Name -}}
{{ $TYTL := replaceRE "((([0-9]{4})-([0-9]{2})-([0-9]{2})))-(.*)" "$6" .Name -}}
---
categories: ['']
date: {{ $DAYT }}
publishDate: {{ $DAYT }}
draft: true

type: 'posts'
series: [posts]
title: '{{ replace $TYTL "-" " " | title }}'
slug: '{{ $TYTL| lower}}'
description: '{{ replace $TYTL "-" " " | title }}'
summary: '{{ replace $TYTL "-" " " | title }}'
tags: ['{{$YYY}}']
weight: {{$DAY}}
pattern_name: "topography"
patternPath: "svg/patterns"
patternFillOpacity: 0.1
patternStrokeOpacity: 0.2
patternStrokeWidth: 1
patternStopOpacity: 0.1
patternDarkFillColor: green-600
patternDarkStopColor: primary-600
patternDarkStrokeColor: primary-600
patternLightFillColor: green-700
patternLightStopColor: neutral-100
patternLightStrokeColor: green-500
---

{{\< lead >}}
Stuff I think is interesting, cool, or otherwise worth sharing™️.
{{\< /lead >}}

This uses hugo’s templating to generate the slug, sets the date and the weight, and adds an initial tag of the year.

I’ve saved this in {project_root}/archetypes/blog.md

I’ve also created a BRK variant in {project_root}/archetypes/brk/blog.md.

The new task we’ll add here will use the archetype set to generate a new skeleton post for us in both en and brk languages.

Editing `tasks.json` #

You should have your tasks.json file in {project_root}/.vscode/tasks.json

we’ll add a new element to the "tasks": [] array, and a few new options in the "inputs": [] array.

There’s a few assumptions in the way I generate my blog posts outside of vscode,

namely that title will be a single string with hyphens for spaces…

An example of how I'd create a blog post from bash:

title=hugo-tips; 
F=blog; 
PFX="`date +%Y/%B/%Y-%m-%d-`${title}" ;
hugo new ${PFX}.md --kind ${F} &&hugo new ${PFX}.brk.md --kind brk/${F}

adding inputs to .vscode/tasks.json

  "inputs": {
    ...
    {
      "id": "newPostTitle",
      "description": "Enter the title of the new post",
    	"type": "promptString"
    },
    {
      "id": "archetype",
      "description": "Select the archetype to use",
      "options": ["blog","default"],
      "default": "blog",
    	"type": "pickString"
    },
    ...
  }

So, to model this as a vscode task…

We’ll add the following two items to the
"inputs": []
array in your tasks file.

This creates two new input variables….
newPostTitle and archetype

With the new input elements added, we’re ready to add the actual task element.

In my case, this looks something like this:

Add a task to .vscode/tasks.json

{
...
"tasks": [
  {
      "label": "New Hugo Post",
      "type": "shell",
      "command": "title=\"${input:newPostTitle}\"; _A=\"${input:archetype}\"; PFX=\"`date +%Y/%B/%Y-%m-%d-`${title// /-}\" &&hugo new ${PFX}.md --kind ${_A} &&hugo new ${PFX}.brk.md --kind brk/${_A} ; exit 0",
      "problemMatcher": [],
      "detail": "Create a new post from an archetype",
      "isBackground": true,
      "presentation": {
        "close": true,
        "showReuseMessage": false,
        "panel": "shared",
        "reveal": "silent",
        "focus": false,
        "clear": true,
        "revealProblems": "onProblem",
      }
  },
  ...
],
"inputs": [...]
}

Yeah… pretty simple huh?

Now it’s as simple as pressing
⌘+⬆+B and firing off the new make a blogpost task.

Pretty sweet, right? This was totally inspired by seeing Alfero Chingono’s Post on Hugo vscode tasks³ which reminded me to get off my ass and write this up.

Thanks Alfero!!

❤️🐺W

Editing tasks.json #

Editing `tasks.json` #