Hugo Blog Chinese Guide (Basic Tutorial)

1. Install Hugo

Download the file from Hugo Releases project home page, extract hugo.exethe files to C:\Windows\System32the directory.

2. Create a site

hugo new site mysite

The new site folder mysite is automatically generated under the current directory:

In executing the hugo new sitecommand you will get a directory that contains the following files.

.
├── archetypes/
├── config.toml
├── content/   # 储存网站的所有文章内容
├── data/
├── layouts/   # 全局样式，优先级高于主题下的 layouts 文件夹
├── static/    # 静态文件，优先级高于主题下的 static 文件夹
└── themes/    # 主题目录

3. New pages and articles

Create a new about page:

hugo new about.md

about.md is automatically generated to content / about.md, the content is as follows:

---
title: "About"
date: 2020-04-07T22:05:28+08:00
draft: true
---

Create the first post and put it in the post directory:

hugo new post/myfirst.md

myfirst.md is automatically generated to content / post / myfirst.md, the content is as follows:

---
title: "Myfirst"
date: 2020-04-07T22:05:28+08:00
draft: true
---

Draft: true means a draft file, you need to modify the value to false before the official release, or directly delete the entire parameter of the draft, otherwise the article will not be generated during the official release.

4. Install the theme

Go to the Hugo theme list or download a theme from Github and unzip it to the theme directory:

Use the theme through the command line: hugo -t theme directory name
Through configuration in config.toml: theme = "theme directory name"

5. Compile output (build Hugo website)

Hugo site at the root folder, execute hugothe command to build.

hugo

Static HTML files compiled output, the default will be saved to the publicdirectory.

6. Start real-time preview (local preview website effect)

Writing an article once is cumbersome to generate. You can start the website preview to monitor the page changes in real time and refresh the page.

hugo server -D

Parameters: The -Doutput includes draft articles marked as draft: true

The default address http://localhost:1313if 1313 port is occupied, the other empty port randomly.

Reference reading

Reset hugo Chinese help document: https://archive.is/nDLEl
Use Hugo to generate a static blog: https://archive.is/XV4vY
Use hugo to make a static website: https://archive.is/WnfLR
What if Hugo generates a large number of blank lines in a static webpage: https://archive.is/mwbv2