Starting from scratch: Learn to build your own static website using Hugo

1. What is Hugo?

1.1. Introduction

Hugo is a static website generator written in Go language. It can help users quickly build high-performance static websites, especially blogs, documents, and personal websites. Compared with other static website generators, Hugo is characterized by fast speed, ease of use, and strong scalability. Hugo uses simple markup languages ​​such as Markdown and HTML to create content, and uses the Go language's template engine to customize themes and layouts. Hugo's advantages also include its cross-platform nature, low resource consumption, and ease of maintenance.

Hugo is one of the popular static website generators due to its fast compilation and generation speed.

Hugo official websiteHugo
Chinese website

Chinese website screenshot

1.2. Framework comparison

frame	static/dynamic	hosting	safety	Access speed	Online editing	Markdown
hugo	static	Simple	very safe	very fast	Can't	support
hexo	static	Simple	very safe	quick	Can't	support
wordpress	dynamic	complex	Requires frequent upgrades	quick	Can	Plug-in support

Programming languages, installation and usage

frame	programming language	seo support	plug-in	theme	Page generation speed	Installation and use
hugo	Go	friendly	not support	many	very fast	Simple
hexo	NodeJS	friendly	a lot of	Much	quick	slightly more complicated
wordpress	PHP	unfriendly	support	Much	not support	complex

2. Install Hugo

2.1. MAC environment

To install Hugo, you need to install Homebrew first. Homebrew is a package manager on MacOS and can be used to install other software.

• Step 1: Installing Homebrew can be completed by executing the following command in the terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

This command will automatically download Homebrew and install it on the system. During the installation process, you may be prompted to enter the administrator password, and you need to enter the password of the current system user. After the installation is completed, you can verify whether the installation is successful by entering the brew -v command in the terminal. If the installation is successful, the current Homebrew version information will be displayed.

• Step 2: Install Hugo. Execute the following command in the terminal to complete:

# 查看 Homebrew 的版本
brew --version

# 安装 Hugo
brew install hugo

# 查看 Hugo 的版本
hugo version

3. The first project

3.1. Create workspace

First create a new folder, for example: csdn_hugo to store the Hugo project during our learning process, and access this folder through the terminal. The example is as follows:

# 切换到工作空间
cd /Users/woniu/Documents/csdn_hugo

3.2. Create Hugo project

# 创建一个新的 Hugo 项目，项目名称：hugo_hello_world
hugo new site hugo_hello_world

3.3. Development tools

• Step 1: We use the VS Code editor as Hugo's development tool.

• Step 2: Select the hugo_hello_world project folder we just created through the terminal command, as shown below:

3.4. Local preview

# 启动本地项目
hugo server

# 浏览器输入 http://localhost:1313 访问地址

Because we are a new project, we will be prompted that there is no page, as shown in the figure below:

4. Install the theme

4.1. Hugo official theme

Hugo official theme

4.2. Download theme

We choose the theme we like from the official theme website and click to the details page to download. Here is a random example to download, as shown below:

Clicking the download button will jump to the GitHub website. Let’s continue clicking to download.

4.3. Install the theme

Copy the downloaded theme folder hugo-theme-stack-master to the themes folder of the hugo_hello_world project we created. The example directory is as follows:

# 例如我的项目工作空间路径如下
cd /Users/woniu/Documents/csdn_hugo

# 项目名称如下
hugo_hello_world

# 最终将下载主题复制的完整路径如下
cd /Users/woniu/Documents/csdn_hugo/hugo_hello_world/themes

VS Code project structure, as shown below

4.4. Configure the theme

We open config.toml in the VS Code editor. The content of the file is as follows:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Configure the theme we downloaded. The final complete code is as follows:

# 网站的基本地址
baseURL = 'http://example.org/'

# 指定站点的默认语言
languageCode = 'en-us'

# 网站的标题
title = 'CSDN 蜗牛 Hugo 教程网站'

# 网站所使用的主题
theme = "hugo-theme-stack-master"

4.5. Local preview

# 启动本地项目
hugo server

# 浏览器输入 http://localhost:1313 访问地址

The effect seems not to be ideal, as shown in the picture below:

5、WebStack-Hugo

5.1. Introduction

A static responsive URL navigation theme based on Hugo

5.1.1 Open source address

GitHub

Gitee

5.1.2 Demo address

Official website example

Bioinformatics Website Navigation

Soso Huazhou

5.1.3 Features

This is the Hugo version of the WebStack theme. You can use Github Pages or Coding to host and deploy directly without a server.

Let’s talk about the characteristics in general:

• The all-time favorite hugo deployment method is adopted, which is convenient and efficient.
• The main configuration information is integrated into config.toml, and various customized configurations can be completed with one click.
• All navigation information is integrated in the data/webstack.yml file to facilitate subsequent additions, deletions and changes.

5.2 Local installation

5.2.1. Create project

# 创建一个新的 Hugo 项目，项目名称：MyWebStack
hugo new site MyWebStack

And open this project through the VS Code editor

5.2.2. Download theme

Visit the GitHub open source address with your browser and click to download.

5.2.3. Install theme

Copy the downloaded theme file to the themes file of the MyWebStack project and rename it: WebStack-Hugo. The project structure is as shown below:

5.2.4. Configure the theme

After copying the contents of MyWebStack/themes/WebStack-Hugo/exampleSite/config.toml, replace all the contents of MyWebStack/config.toml. For specific operations, please refer to the figure below:

5.2.5. Copy data

Copy all files in the /themes/WebStack-Hugo/exampleSite/data folder to the MyWebStack/data folder, as shown in the following figure:

5.2.6. Local preview

# 启动本地项目
hugo server

# 浏览器输入 http://localhost:1313 访问地址

5.2.7. Project screenshots

• Legend 1

• Legend 2

• Legend 3

This tutorial ends here, friends can happily start their programming journey.