Hugo Setup Notes: From Zero to One

Hugo Installation

Official Documentation Tutorial

The official website provides detailed installation tutorials for different systems: https://gohugo.io/installation/

Brew

If you are a Mac user, you can use the brew command to install it.

brew install hugo

Note: This installation method may not install the latest version of hugo. If you want to use the latest version of hugo, please install it in another way.

Configuration File Format

As a beginner, which configuration file format to choose—yaml, toml, or json—became my first question.

TOML

1. Case-sensitive
2. Files can only contain UTF-8 encoded Unicode characters
3. Not sensitive to indentation

YAML

1. The file starts with ' - ', marking the beginning of the document
2. Key-value pairs are separated by colons
3. Lists start with hyphens
4. Uses indentation with one or more spaces to describe nested collections

JSON

1. Data is stored in name/value pairs
2. Records are separated by commas. Trailing commas without following properties are not allowed
3. Property names and strings are wrapped in double quotation marks
4. Single quotation marks are not allowed

String Differences

Strings are supported in any format, but JSON does not support multiline strings and also does not support comments.

# TOML
key = "String Value"
multiline = """\
       The quick brown \
       fox jumps over \
       the lazy dog.\
       """

# YAML
key : String Value
multilinePreservedLinebreaks:
|
  L1 - The quick brown
  L2 - fox jumps over
  L3 - the lazy dog.
multilineReplaceLinebreaksWithWhitespace:
>
  This sentence ist just too long to keep it
  on the same line.

// JSON
{
  "key": "String Value"
}

Because of the relatively troublesome comment syntax of JSON and the strict indentation requirements of YAML, I ultimately chose TOML as the configuration file format. I can also indent freely, making it easier for me to read.

Scattered Knowledge Points

1. This symbol := is an assignment operator in the Python language (mainly called the walrus operator). The walrus operator compresses our code to make it shorter.

var a; //定义
a = 1; //赋值

2. layout/baseof.html is the foundation of all pages
3. The layout/partials folder can contain partial sections such as header, footer, etc.
4. Steps to add a new page:
5. You need to add a .md file in content
6. Add a page with the same name in layouts/_default
7. Code for activating the active state of the menu:
8. According to the method in the official website's instructions, the active state cannot be added successfully, so I looked for another way to determine active

{{ range .Site.Menus.main }}
      {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
      {{- $page_url:= $currentPage.Permalink | absLangURL }}
        <li>
            <a {{- if eq $menu_item_url $page_url }} class="active" {{- end }} href="{{ .URL }}">
                {{ .Pre }}
                <span>{{ .Name }}</span>
            </a>
        </li>
      {{ end }}

6. A small knowledge point about the position function in css!

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0px;
  left: 0px;
}

7. Shortcode can simplify code and write some methods. It is similar to a function. For specific writing methods, refer to: Hugo-basic

References

• JSON vs. YAML vs. TOML
• In-depth Comparison of TOML, JSON, and YAML