Now that we have our tools installed and working, we can start our project.
- Open your Terminal app, (or Command Line app on Windows).
hugo new site my-blogand a new folder called
my-blogwill be generated, in your home folder, with a few files inside.
- 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!
# go "inside" your project folder cd my-blog # start the dev server hugo serve