Introduction to Hugo

To set up a site using Hugo, we will install it and build an arbitrary site (HelloWorld) as a trial, referring to the official site.

Quick start from Hugo installation to publishing articles.

This is the official tutorial of the original site. https://gohugo.io/getting-started/quick-start/

Hugo Installation Hands-on

Based on the official quick start, we will create a Hugo project named helloworld and publish an article with the theme ananke.

# Install on MacOS You need to install Homebrew
brew install hugo

# Create helloworld project
hugo new site helloworld
cd helloworld

# Reflect Theme ananke
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

# Generate posts
hugo new posts/my-first-post.md
echo 'theme = "first post !"' >> posts/my-first-post.md

# Start locally, including draft state
hugo -D server

By default, it starts locally on port 1313 below.

http://localhost:1313/

Introduction to customization

The basic configuration of the entire site, including the site name, language settings, multilingualization, and themes to be used, is done in config.toml.

• config.toml

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Hello World' # change the title name
theme = "ananke"

Build

The static site generated in ./public/ will be output. Very simple.

# Build including draft status 
hugo -D

./public/ on your hosting server, and you have a static site.

Theme Customization

To modify the display content and order of the themes, you will need to modify the template.

We will customize it based on the ananke theme used in the Quick Start.

Layout Mechanism and Customization Procedure

The layout mechanism is very easy to understand, so I will quote from this site.

How Hugo’s layout works

Minimum Required Templates Hugo generates pages by having the following four basic templates

• layouts/index.html (top page)
• layouts/_default/baseof.html (Base Template used for all pages)
• layouts/_default/list.html (Article list page by section or Taxonomy)
• layouts/_default/single.html (individual article pages)

For customization, copy the theme’s layouts to the project root and edit that one.

Template files under layouts in the project root will be used first, and if it is not there, the one in the theme will be applied.

# Copy ananke's layouts to the root
cp -r . /themes/ananke/layouts .

Customizing Styles

If you want to change fonts, text size, etc., use custom CSS.

Add custom_css to the config.toml parameter. And place the target css file under the /static directory, so that it will be loaded from the template.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Hello World' # rename title
theme = "ananke"

[params].
custom_css = ["css/custom.css"].

static/css/custom.css

h3 {
    font-size: 20px;
    color: #FF0000;
}

You can change the style like this.

in figuring out the structure of Hugo.

If you are not familiar with Hugo, it may be difficult to understand how css files, template files, variables, etc. are applied. I ended up using grep and file search a lot until I got used to it.

Also, each theme has its own parameters, so it is a good idea to read the documentation on the site where the theme is distributed.