Using Hugo to Serve a Static Website

Initial Install

Installing on MacOS (with homebrew):

brew install hugo

Update/Upgrade Hugo on MacOS (homebrew)

brew upgrade hugo

Installing on Linux (Ubuntu flavors)

Using the snap package seems easy, since the version in apt is likely outdated, and there doesn't seem to be a trusted PPA:

snap install hugo --channel=extended

Verify Install Successful

hugo version
Hugo Static Site Generator v0.61.0/extended linux/amd64 BuildDate: 2012-12-11T13:56:49Z

Create Site

hugo new site the-best-static-website

Congratulations! Your new Hugo site is created in /Users/juan/websites/the-best-static-website.

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

1. Download a theme into the same-named folder.
  Choose a theme from, or
  create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
  with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit for quickstart guide and full documentation.

Enter the newly created project directory, and pull in a theme.

cd the-best-static-website
git init
git submodule add themes/ananke

Add a Post

hugo new posts/

Run the Development Site to Test Locally

hugo server -D

Example Post using TOML

categories = ["Development"]
project_url = ""
series = ["Websites are the Best"]
slug = "websites-r-best"
tags = ["Websites", "WWW"]
title = "Websites: The Definitive Guide"

Publish the Site

Hugo Command Reference

hugo new site .                      # create new site in current dir
hugo new post/             # create a new post
hugo server --watch [--buildDrafts]  # Run in server live-reload mode
hugo                                 # Generate a public directory using default theme
hugo --theme=my-theme                # ...or with a specific theme
hugo undraft post/         # Un-draft a post (sets draft = "false" in front matter)

Data Templates (Custom Data Sources)

The data folder is where you can store additional data for Hugo to use when generating your site.

Various Techniques

Check Environment

The .Hugo.Environment variable can be used to check if the current context is 'development' or 'production':

{{ ne .Hugo.Environment "development" }}

Retrieve Page/Params Data from another Page

Sometimes it's nice to be able to grab data from the front matter and/or params of a different page; do so with the .GetPage function. For example:

{{ with .Site.GetPage "/aboutus" }}

    {{/* front matter title of the '/aboutus' page */}}
    {{ .Title }}

    {{/* custom front matter params from the '/aboutus' page */}}
    {{ .Params.manifesto_copy }}

{{ end }}

Use a dict to Pass in Key/Value Pairs to Partials (and Elsewhere)

{ partial "testPartial" (dict "test" "testValue" dict "context" . "pages" $.Site.Pages) }}

Then you'll be able to access these variables in the partial as: .test, . (the parent context), and .pages.

Questions about Hugo

Does Hugo support tags/categories?

Yes, via taxonomies:

This gihub repo: has some great clarifying info on taxonomies as a supplement to the Hugo docs.


 Hugo  Static Sites