Getting Started with Hugo with VSCode + WSL

Prerequisite

Before we are able to install and develop out website with Hugo, below are what I assume we have already set up & running:

1. You have a Windows 10 computer with WSL running. In my case I am using Ubuntu from Windows Store.
2. You are familiar with Visual Studio Code (VSCode).

Installing Hugo

Open a Ubuntu terminal and run this command:

1

sudo yum install hugo

This will install hugo and a bunch other required dependencies depending on your systems Once Hugo has been installed, you are now be able to verify by typing hugo version from the terminal.

Visual Studio Code

The beauty of using VSCode as your text editor is, you can run remotely access your WSL installation on your PC as well as directly running a terminal from VSCode. This really help my workflow.

Once you launch your VSCode, it will detect that you have a WSL running and prompt you with recommendation to install the extension: Remote - WSL.

Install the extension.

Once the extension has been installed, you will able to connect to your WSL and open up a terminal from inside the VSCode. You can open the terminal from Terminal > New Terminal.

From the terminal windows, to create a new hugo site:

1

hugo new site <yoursitename>

Bare in mind that, hugo will create <yoursitename> directory from where the command was launch. In my case, I created my site directory notekaki.com under www directory inside my home\username\

Directory structure:

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

/home
    /username
        /www
            /notekaki.com
                /archetypes
                /content
                /data
                /layouts
                /resources
                /static
                /themes
                config.toml

You can open the <yoursitename> directory from VSCode and start developing with Hugo!