Vscode Tasks for Hugo

Stuff I think is interesting, cool, or otherwise worth sharing™️.

I’ve previously shared the vscode code-snippets I added to make it easier to use our project; but you can find it them¹.

In another project I’d created some vscode tasks² to automagically run hugo whilst working on a site in vscode.

This is a neat quality-of-life enhancement if you’re working on a hugosite; and I wanted to outline how to recreate them in case it helps anyone. Also, seeing Alfero Chingono’s Post³ on Hugo vscode tasks reminded me of that to-do item.

I don’t wanna just put the files in place in the scaffold project⁴ and have them automagically work, as that makes it easy to forget how things ACTUALLY work.

but I digress… So… if you look at the VS Code Tasks docs², it’s fairly straight forward…

Zero to one #

Assumptions #

With the layout I’ve created for our hugo projects, there is a _local directory which contains config, scipts, and other useful things relevant to localdev.

Contained within _local/bin there are two wrapper scripts to run hugo:
- _local/bin/wpl-build-hugo⁵
  
  One-Shot build run with the given configuration.
- _localbin/wpl-serve-hugo⁶
  
  Build, and continue to serve the project with the given configuration.
Contained within _local/ there are a few configuration files for the above scripts which tell hugo what environment to build.
My sites use TailwindCSS⁷. I’ve defined a few run scripts in package.json⁸ to handle the CSS shuffling and the creation of updates site styling.

I’m going to assume that you’re following that pattern, or are going to adapt mine to your own needs and desires.

Your first task #

in the .vscode directory of a project create a new file by the name of tasks.json:

.vscode/tasks.json

{
"version": "2.0.0",
"tasks": [
{
"label": "Hugo: Serve Local Prod",
"problemMatcher": [],
"type": "process",
"group": "build",
"isBuildCommand": true,
"detail": "Evey: It's a SKWIRREL",
"isBackground": true,
"command": "\_local/bin/wpl-serve-hugo",
"args": ["_local/localProd"],
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}

A screenshot showing the dropdown menu of a buildtask in vscode — Sweet! We have our first task!

Getting a bit more… dynamic #

This will create two build tasks, and a wrapper task to spawn them off in parallel. Thus both keeping your JIT CSS updated, and launching hugo in either a mode, or a serve mode.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "MakeSiteGo",
      "problemMatcher": [],
      "type": "process",
      "group": "build",
      "isBuildCommand": true,
      "detail": "Evey: It's a SKWIRREL",
      "isBackground": true,
      "dependsOn": ["HugoRunner", "TailwindRunner"],
      "dependsOrder": "parallel"
    },
    {
      "label": "HugoRunner",
      "problemMatcher": [],
      "type": "process",
      "group": "build",
      "isBuildCommand": true,
      "detail": "Evey: It's a SKWIRREL",
      "isBackground": true,
      "command": "_local/bin/wpl-${input:hugoMode}-hugo",
      "args": ["_local/${input:hugoHost}${input:hugoEnv}"],
      "presentation": {
        "group": "Hugo",
        "focus": false,
        "clear": true,
        "reveal": "always",
        "panel": "shared"
      }
    },
    {
      "label": "TailwindRunner",
      "problemMatcher": [],
      "type": "process",
      "group": "build",
      "isBuildCommand": true,
      "detail": "SKWIRREL",
      "isBackground": true,
      "command": "npm",
      "args": ["run", "wpl_tw"],
      "presentation": {
        "group": "Hugo",
        "reveal": "always",
        "panel": "shared"
      }
    }
  ],
  "inputs": [
    {
      "id": "hugoMode",
      "type": "pickString",
      "description": "Hugo Run Mode",
      "options": ["build", "serve"],
      "default": "serve"
    },
    {
      "id": "hugoEnv",
      "type": "pickString",
      "description": "Hugo Environment",
      "options": ["Local", "Pages", "Prod"],
      "default": "Prod"
    },
    {
      "id": "hugoHost",
      "type": "pickString",
      "description": "Developer-specific Hugo Configuration.",
      "options": ["local", "yourHost", "anotherHost"],
      "default": "local"
    }
  ]
}

Getting more out of tasks #

There’s a lot more one can do with tasks, as the linked post demonstrates, but this is probably enough content for this post… I’ll write another on making posts with tasks later. Stay tuned!