Setup

Now that we have our tools installed and working, we can start our project.

Generate Project

1. Open your Terminal app, (or Command Line app on Windows).
2. Type: hugo new site my-blog and a new folder called my-blog will be generated, in your home folder, with a few files inside.
3. Open VSCode and open that new folder there to view the contents.

See below for a full Terminal example, but you can also use the Finder or Explorer to find the generated folder and open by clicking the VSCode icon.

# generated my-blog folder
hugo new site my-blog

# opens the my-blog folder in VSCode
code my-blog

Once inside VSCode, you should see the following folders and files in the sidebar explorer:

my-blog
├── archetypes
|   └── default.md
├── content
├── data
├── layouts
├── static
├── themes
└── config.toml

Don’t worry what all these folders are for, we will go over all of it throughout the course.

Start Development Server

Now we will start our development server. A dev server is a local server that runs on your computer strictly for the purpose of development. It hosts your program on a port and you can access that site in a web browser.

Open your terminal inside your project and run hugo serve. This will start a local server on port 1313 and you can access that site by going to localhost:1313 in your web browser. You should see a blank white page since we haven’t added anything yet.

This server will automatically restart every time you make a change to your code and your web browser will reload too!

Full commands:

# go "inside" your project folder
cd my-blog

# start the dev server
hugo serve