Lesson Overview


Run the Hugo CLI to generate and run a project locally.
2 minutes 286 words

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:

β”œβ”€β”€ 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
Share this page