1. Setting up Hugo & Hugo-Zones

18 Feb 2023

This is a quick-start tutorial for setting up Hugo-Zones. It’s not comprehensive; if you’re looking for more info please read the Hugo docs / other tutorials.

1. Install Hugo

2. Create a new site

Open a terminal at your folder of choice and run hugo new site <your site name>. Hugo creates all of the critical directories for the site.

3. Install hugo-zones and example content

Extract hugo-zones-starter.zip, then copy the following files to your site:

• Copy the hugo-zones theme to the themes folder.
• Copy the example hugo.toml to your site root.
• Copy the example content to the content folder.

Your site tree should now look like this:

your-site/
├── content/
│   ├── about/
│   ├── posts/
│   └── _index.md
├── themes/
│   └── hugo-zones/
│       ├── archetypes/
│       ├── layouts/
│       ├── static/
│       └── theme.toml
├── other-hugo-folders...
└── hugo.toml

That’s all we need to get the site running! I’ll explain more about these files in future posts.

4. Run Hugo’s web server

Hugo has a built in webserver that can run your site directly from your PC (neat!). It also auto-reloads when files change (super neat!).

To run the server, open a terminal at the root of your-site, then run hugo server

If everything went well, the terminal output should say “Web server is available”. Navigate to localhost:1313 and you should see the home page of your site!