---
title: "Hugo Setup Notes: From Zero to One"
description: "The Complete Process of Building a Hugo Blog from Scratch, Covering Installation and Configuration, Page Structure, and CSS Layout Tips"
canonical_url: https://ro.yikzero.com/en/blog/hugo-build-1
locale: en
date: 2022-03-23
---

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

```bash
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
# TOML
key = "String Value"
multiline = """\
       The quick brown \
       fox jumps over \
       the lazy dog.\
       """
```

```yaml
# 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
// 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.

```jsx
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](https://gohugo.io/templates/menu-templates/#readout), the `active` state cannot be added successfully, so I looked for another way to determine `active`

```jsx
{{ 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!

```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](https://www.letswrite.tw/hugo-basic/)

## References

- [JSON vs. YAML vs. TOML](https://martin-ueding.de/posts/json-vs-yaml-vs-toml/)
- [In-depth Comparison of TOML, JSON, and YAML](https://www.cnblogs.com/sunsky303/p/9208848.html)