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.
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.
-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.