Now that I can run the site locally, I needed a quick way to run the hugo command for creating new blog posts. After quick search on the internet, I found the article Tasks in Visual Studio Code very helpful. In short, I had to define the build task this way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Build",
			"type": "shell",
			"command": "hugo --source ./src",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		}
	]
}

This task executes the hugo command which generates your website to the public/ directory by default and makes it ready to be deployed to your web server. The --source argument ensures the correct folder is built. In addition, setting "kind": "build" and "isDefault": true ensures that this task is executed with the Ctrl+Shift+B keyboard shortcut.

Next, I added another task to run the site locally:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Build",
			"type": "shell",
			"command": "hugo --source ./src",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		},
		{
			"label": "Serve",
			"type": "shell",
			"command": "hugo server -D --source ./src",
			"group": {
				"kind": "build"
			},
			"isBackground": true,
			"problemMatcher": []
		}
	]
}

This task executes the hugo server command. The -D flag ensures that we can preview content in draft mode, and again, the --source argument ensures the correct folder is served. It’s important to note that the Serve does not have "isDefault": true since we do not want the two tasks to conflict when using the Ctrl+Shift+B keyboard shortcut.

So far I’m pretty pleased with my experience with the Hugo static site generator.