使用Hugo快速建立静态网站

Hugo是一个开源的，用于快速生成静态站点的工具，同类型的工具还有jekyll和Hexo。利用Hugo我们可以用MarkDown的格式书写内容，然后一键生成静态站点，非常方便。

安装Hugo

Hugo的安装非常简单，因为整个工具只有一个可执行文件。我们只需要从Hugo Release根据自己的平台下载对应的二进制文件，放到自己喜欢的位置，同时设置好环境变量即可。

使用命令hugo version查看Hugo版本号。

如果出现类似如下这种信息说明安装成功了。

1

hugo v0.91.0-D1DC0E9A linux/amd64 BuildDate=2021-12-17T09:50:20Z VendorInfo=gohugoio

创建站点

使用hugo new site命令创建一个空的站点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$hugo new site ./path/to/site
Congratulations! Your new Hugo site is created in /root/learn-hugo/path/to/site.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

此时提示我们站点已经建立成功了，并且告知我们要运行这个站点需要的后续步骤。

安装主题

Hugo只提供了一个比较抽象的通过MarkDown文件生成页面基本信息的功能，它并没有定义每个页面是什么样式，这些页面通过何种方式组织起来，这些功能就是留给主题来实现的。在Hugo的主题列表中，我们可以看到各式各样的主题，通过使用主题，可以让同样是Hugo生成的网站看上去大相径庭。

以我是用的主题Even为例，点击进入主题页面后，点击Download按钮，跳转到Github页面。如果环境中安装了Git，可以直接使用Git命令克隆到网站的themes目录:

1
2
3
4
5
6


$git clone https://github.com/olOwOlo/hugo-theme-even themes/even
Cloning into 'themes/even'...
remote: Enumerating objects: 1689, done.
remote: Total 1689 (delta 0), reused 0 (delta 0), pack-reused 1689
Receiving objects: 100% (1689/1689), 1.74 MiB | 3.54 MiB/s, done.
Resolving deltas: 100% (984/984), done.

如果没有Git也可以通过手动下载主题源码，然后解压并复制到themes目录，这样做需要注意路径问题，themes下是一个主题名字的目录，然后里面直接是主题的子目录和源码，中间不能再有其他目录。完成后是这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


$tree -L 3
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── even
        ├── archetypes
        ├── assets
        ├── CHANGELOG.md
        ├── exampleSite
        ├── i18n
        ├── images
        ├── layouts
        ├── LICENSE.md
        ├── Makefile
        ├── netlify.toml
        ├── README.md
        ├── README-zh.md
        ├── resources
        ├── static
        └── theme.toml

15 directories, 9 files

配置主题

不同的主题样式、功能、组织页面的方式各不相同，因此主题一般都会附带一个配置文件config.toml。这个文件和我们创建网站时根目录生成的文件其实是同一个，目前我们先直接用Even主题的配置文件覆盖我们根目录的配置文件，这个文件位于path/to/site/themes/even/exampleSite目录下。

目录里面除了config.toml文件，还提供了一些基本的页面，我们同样把这些内容拷贝到站点根目录。

此时打开网站根目录的config.toml文件可以看到里面有一行是theme = "even"，再次检查确保themes目录下主题对应的目录和这个名字是一样的。

运行网站

在网站根目录使用hugo server命令即可运行该网站。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


$ hugo server
Start building sites …
hugo v0.91.0-D1DC0E9A linux/amd64 BuildDate=2021-12-17T09:50:20Z VendorInfo=gohugoio
WARN 2021/12/19 17:27:16 The google_news internal template will be removed in a future release. Please remove calls to this template. See https://github.com/gohugoio/hugo/issues/9172 for additional information.

                   | EN
-------------------+-----
  Pages            | 60
  Paginator pages  |  1
  Non-page files   |  0
  Static files     | 38
  Processed images |  0
  Aliases          | 22
  Sitemaps         |  1
  Cleaned          |  0

Built in 229 ms
Watching for changes in /home/ddm/path/to/site/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/ddm/path/to/site/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

在浏览器输入http://localhost:1313/或者http://127.0.0.1:1313/即可看到网站主页效果。

添加文章

在网站根目录使用hugo new file-path/file-name.md命令创建一篇文章，这里的file-path是相对于站点content目录的相对路径。file-name经常会被用来当作URL的一部分，所以不要有空格。

1
2


$ hugo new post/hello-world.md
Content "/home/ddm/path/to/site/content/post/hello-world.md" created

通过拷贝出来的content目录可以看到，网站的文章是被放在content目录下的post目录里面，所以这里需要把文章也创建在post目录下。

构建网站

目前为止我们的网站还是在hugo的托管下运行，这种方式适用于日常写作预览，调试网站，但是这并不是网站最终形式。我们既不能把这样的网站交给Nginx托管，也不能交给Github，所以还需要最终生成html、css、javascript这些文件才行。

在网站根目录使用hugo命令即可完成构建，生成的结果会放在网站根目录的public目录下。

文章目录