视由 › HUGO 建站教程

Hugo 是由Go语言实现的 静态网站生成器，简单、易用、高效、易扩展、快速部署。

相关站点
Hugo官网 Hugo主题 Hugo中文 Hugo仓库

本站即为 Hugo 博客框架搭建，使用了 Hugo-Book 主题。

第1步安装Hugo框架

首先根据自己的系统参照下述方法进行安装。

macOS 🔥

macOS操作系统下直接使用 Homebrew 安装，在终端中输入如下代码：

brew install hugo

注意执行此操作前请确保macOS安装有 Homebrew。

在终端输入如下命令安装 Homebrew。

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

国内用户如果下载缓慢或安装失败，可使用国内加速源下载。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

Windows

在 Hugo Releases 下载最新发布对应操作系统的ZIP，将所有内容提取到C:\Hugo\bin目录中，包含可执行文件hugo.exe、LICENSE和README.md。然后将Hugo添加到Windows的PATH设置中。

右键单击开始按钮
单击系统
单击左侧的高级系统设置
单击底部的环境变量...按钮
在用户变量部分中找到以PATH开头的行（PATH全部大写）
双击PATH
单击新建…按钮
键入C:\Hugo\bin，完成输入后按Enter
在每个窗口中单击确定退出

Linux

Linux操作系统下直接使用Homebrew安装，在终端中输入如下代码:

brew install hugo

注意执行此操作前请确保linux安装有 Homebrew 。

在终端输入如下命令安装 Homebrew。

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

国内用户如果下载缓慢或安装失败，可使用国内加速源下载。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

OpenBSD

OpenBSD通过pkg_add添加Hugo的软件包：

doas pkg_add hugo

源码安装

在 Hugo Releases下载对应操作系统的Hugo安装文件，执行安装。

注意执行源码安装前请确保安装有 Git、 Mercurial、 Go。

设置好GOPATH环境变量，获取源码(源码会下载到GOPATH/src目录)并编译。

export GOPATH=$HOME/go
go get -v github.com/spf13/hugo

安装完Hugo后，在终端中输入如下代码验证安装。

hugo version

第2步生成网站

在终端中输入如下代码生成网页。

hugo new site test

提示

代码中test是所创建的网站文件夹名称，由用户自定义，以下网站名均由test代指。

第3步网站配置(套用主题)

进入网站根目录

cd test

安装Git（用于下载主题及安装）

git init

在主题商店中选择自己喜欢的主题，查看其Github仓库地址，使用如下代码克隆主题至本地。

Hugo 主题商店地址
Hugo 官方主题商店 Hugo 中文主题商店

git clone https://github.com/XXXXX/XXXX themes/XXXX

提示代码中网址为主题Github仓库地址，XXXX为主题文件夹名称。

编辑网站根目录中config.toml文件，添加代码theme = "XXXX"以确认所使用的主题。config.toml文件默认格式如下：

baseURL = "https://example.org/"
languageCode = "en-us"
title = "test"
theme = "XXXX"

第4步添加页面

添加新页面，页面内容采用 Markdown 格式。

hugo new posts/my-first-post.md

页面默认格式如下：

---
title: "My First Post"
date: 2019-10-20T00:00:00+01:00
draft: true
---

提示

代码中my-first-post为Markdown页面文件名，title: "My First Post"所写内容才是网站显示的标题，页面格式根据主题不同略有不同，详见主题描述。

第5步运行网站

完成上述操作后，可在终端中输入如下代码运行网站。

hugo server -D

提示

浏览器访问 http://localhost:1313 预览效果。你可在预览的同时对网站进行编辑，网页将会实时展示修改后的效果，如果出现刷新问题可通过Ctrl+R进行强制刷新。

第6步生成静态网页

在终端中输入如下代码生成静态网页。

hugo

提示

以上命令并不会生成草稿页面，需要生成的页面请去掉页面头部的draft: true。

默认情况下生成的文件会输出到test/public/目录下，你可将改文件夹部署到服务器以实现远程访问，也可使用本文第7步所说的方法。

第7步部署 Github Pages

注意

本文所使用的Github Pages并非部署网页的唯一提供商，你也可以使用Coding和Gitee等。

执行此操作前请确保拥有Github账号，并创建一个以XXX.github.io命名的空仓库，其中XXX为你的Github用户名。在终端中输入如下代码生成最终页面。

hugo --theme=XXXX --baseUrl="http://XXX.github.io/"

在终端中输入下列代码将最终页面部署到 Github Pages。

cd public
git init
git remote add origin https://github.com/XXX/XXX.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master

浏览器输入http://XXX.github.io实现远程访问。

主题样式代码模板

注意

本页面展示效果为 Hugo-Book 主题，由 Alex Shpak 开发，配置请详见主题仓库README。

按钮（Buttons）

Buttons are styled links that can lead to local page or external link.

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}

预览

Get Home Contribute

分列（Columns）

Columns help organize shorter pieces of content horizontally for readability.

{{< columns >}} <!-- begin columns block -->
# Left Content
Lorem markdownum insigne...

<---> <!-- magic sparator, between columns -->

# Mid Content
Lorem markdownum insigne...

<---> <!-- magic sparator, between columns -->

# Right Content
Lorem markdownum insigne...
{{< /columns >}}

预览

Left Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.

Mid Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Right Content

隐藏内容（Expand）

Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.

预览1

{{< expand >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}

Expand ↕

Markdown content

Lorem markdownum insigne…

预览2

{{< expand "Custom Label" "..." >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}

Custom Label ...

Markdown content

高亮显示（Hints）

Hint shortcode can be used as hint/alerts/notification block.
There are 3 colors to choose: info, warning and danger.

{{< hint [info|warning|danger] >}}
**Markdown content**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}

预览

Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

数学公式（KaTeX）

KaTeX shortcode let you render math typesetting in markdown document. See KaTeX

预览

{{< katex [class="text-center"] >}}
x = \begin{cases}
   a &\text{if } b \\
   c &\text{if } d
\end{cases}
{{< /katex >}}

x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}

示意图（Mermaid Chart）

Mermaid is library for generating svg charts and diagrams from text.

预览

{{< mermaid [class="text-center"]>}}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
{{< /mermaid >}}

sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

标签（Tabs）

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

预览

MacOS

This is tab MacOS content.

Linux

This is tab Linux content.

Windows

This is tab Windows content.

常见问题操作方法

替换安装或降级 Hugo 框架

本文介绍部分操作仅限于 macOS 系统环境

替换方法

打开页面 github.com/gohugoio/hugo/releases ，下载 hugo 框架安装文件。比如说你需要安装 Hugo v.0.56.0 版本，那么翻到对应版本号下的 Assets 列表，下载其中对应操作系统的 hugo_0.56.0_macOS-64bit.tar.gz 安装包。
默认下载到 Download 文件夹，解压。会得到三个文件 hugo 、LICENSE.md、 README.md。
使用访达 Go 功能输入并进入如下路径：
```
/usr/local/bin/hugo
```
如果设备未安装过 hugo 框架，则进入 /usr/local/路径，并在 local 文件夹中新建 bin 文件夹，在 bin 文件夹中新建 hugo 文件夹。
将解压获得的 hugo 文件移入新建 hugo 文件夹中，如果安装过则替换原有文件即可覆盖安装。

降级方法

从 Homebrew 官方仓库找到所需要 hugo 版本对应的链接。链接形如：https://github.com/Homebrew/homebrew-core/raw/cf67d08dd1a6201be82ac93feeabe2fe834f50ab/Formula/hugo.rb

假如你要降级到 hugo v.057.0 ，通过查找得到相应地址，然后打开终端，输入如下代码：

brew unlink hugo

brew install https://github.com/Homebrew/homebrew-core/raw/cf67d08dd1a6201be82ac93feeabe2fe834f50ab/Formula/hugo.rb

卸载 Hugo 框架

本文介绍部分操作仅限于 macOS 系统环境

打开终端并输入如下命令即可卸载 hugo 框架。
```
brew uninstall hugo --force
```

第1步 安装Hugo框架

第2步 生成网站

第3步 网站配置(套用主题)

第4步 添加页面

第5步 运行网站

第6步 生成静态网页

第7步 部署 Github Pages

主题样式代码模板

按钮（Buttons）

分列（Columns）

Left Content

Mid Content

Right Content

隐藏内容（Expand）

Markdown content

Markdown content

高亮显示（Hints）

数学公式（KaTeX）

示意图（Mermaid Chart）

标签（Tabs）

MacOS

Linux

Windows

常见问题操作方法

替换安装或降级 Hugo 框架

替换方法

降级方法

卸载 Hugo 框架

第1步安装Hugo框架

第2步生成网站

第3步网站配置(套用主题)

第4步添加页面

第5步运行网站

第6步生成静态网页

第7步部署 Github Pages