Say Web Solutions

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 https://themes.gohugo.io/, 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 https://gohugo.io/ 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 https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Add a Post

hugo new posts/my-first-post.md

Run the Development Site to Test Locally

hugo server -D

Example Post using TOML

+++
categories = ["Development"]
project_url = "https://github.com/gohugoio/hugo"
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/welcome.md             # 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/welcome.md         # 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.
Hugo Documentation

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: https://gohugo.io/content-management/taxonomies/.

This gihub repo: https://github.com/guayom/hugo-taxonomies has some great clarifying info on taxonomies as a supplement to the Hugo docs.

Using Hugo to Serve a Static Website