Scaffolding of a Hugo website

Choose a name for your project. It’s just a name of a directory and has no other significance. I have chosen ‘multilingua’ for a name.

In your terminal emulator, run

hugo new site multilingua

This will create multilingua directory and produce the output:

Congratulations! Your new Hugo site is created in /Users/tom/learn/hugo/multilingua.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

This more or less outlines our next steps. But first, lets explore. Change into the project directory. If you run tree command, you will see:

$ cd multilingua
$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes

We shall be primarily interested in the content/ directory — this is where your travel stories, cooking recipes, and other things unique to your site will be stored; config.toml file that holds the configuration of your project; and themes folder, where at least one “theme” that defines the appearance of your site will be stored. The rest can be safely ignored for the time being.

Hugo server

Open another terminal window or tab, and run there:

hugo server -D

You will see a few warnings, and near the bottom of the message you will see a line saying:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hugo is running now a web server on your computer. Let it run (don’t hit Ctrl+C yet). If you point your browser to http://localhost:1313 , congratulations – you will see exactly nothing. This is a good sign. Notice, it’s nothing, not an HTTP 404 ‘Not found’ error. Once you create a ’theme’ and some content of your website, all the changes can be previewed near-instantly.

As for -D command-line flag, it makes the server to display both the drafts and the completed pages. For our purposes now that’s exactly what we need.

A word of warning: in my experience, Hugo server sometimes doesn’t pick the changes in your project correctly, typically when you move sub-directories or introduce symlinks. Should you face some inexplicable behavior, just restart the server and check if the problem is still there.