Building a Personal Blog with Hugo (1)

Hugo is a static website generator written in Go. Its features are as follows:

  • Simple, easy to use, efficient, easy to extend, and quick to deploy.
  • Hugo can be hosted with GitHub Pages.

Steps

1. Install Hugo

Download the binary or archive for your platform from Hugo Releases. The installation methods are as follows.

  • General

    • Unpack and install the tar.gz archive:
      1
2
3

      tar -zxvf <your-platform>.tar.gz -C /usr/local/bin \
  && cd /usr/local/bin \
    && rm LICENSE README.md

  • Debian-based

    • Install the .deb file (recommended):

      1

      dpkg -i <your-platform>.deb

      Uninstalling is also easy; whether you need to keep the configuration files depends on your needs (it seems hugo doesn’t have a config file anyway XD).

      1
2
3

      dpkg -l # List installed packages and find hugo's package name.
dpkg -r package-name # Remove the package but keep the configuration files.
dpkg -P package-name # Remove the package and the configuration files.

    • Install via APT (not recommended by the official docs because the version is older):

      1

      apt install hugo

  • Other systems: Refer to the official Installation Docs

Run the following command; if version information is printed, the installation was successful.

1

hugo version

2. Generate the Site

1
2

hugo new site /path/to/site -f yml \
  && cd /path/to/site

3. Install a Theme

This demo uses Hugo PaperMod. The installation guide is here, and we’ll go with Method 1 :

  • Just run the command in the site’s root directory:
    1

    git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
  • To update the theme:
    1
2

    cd themes/PaperMod
git pull

4. Create a New Post

Create an about page:

1

hugo new about.md

about.md is automatically generated at content/about.md. Open about.md and take a look:

1
2
3
4
5
6
7

---
title: "About"
date: 2022-01-22T10:45:17Z
draft: true
---

# Body

The content is in Markdown format, and the content between the --- lines is in YAML format. Depending on your preference, you can switch to TOML format (using +++ delimiters) or JSON format. I personally recommend YAML.
Create your first post and put it in the post directory, so that aggregate pages can be generated later.

1

hugo new posts/first.md

You can now edit the content of first.md using Markdown syntax.

5. Run Hugo and Go Live

Run the following in the site’s root directory:

1

hugo server --buildDrafts

The command above is the default way to start. --buildDrafts controls whether draft posts are displayed. By default, only the local machine is allowed to access the server; if you want others to access it via IP, use the following command:

1

hugo server -b "http://ip:8080" -p 8080 --bind "0.0.0.0" --gc
  • -b http://ip:8080: because static resources default to localhost when other people access the site, this flag points to your own IP address and default port.
  • -p 8080: the default port is 1313; this specifies port 8080.
  • --bind "0.0.0.0": the default startup only allows access from the local machine, so you need to bind it so that all machines can access the site.

Official command documentation: Commands

References