使用Hugo搭建个人网站

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 3.1k 阅读时长 ≈ 3 分钟

By Long Luo

Hugo vs. Hexo

目前我的个人网站使用的是: Hexo + Next Theme ，这也是目前很多个人网站的配置。

Hugo 官网号称是最快的网站框架，构建速度快，因为我的文章数比较多，以后考虑切换成 Hugo，今天花了点时间来学习了下。

以下是学习过程：

Hugo使用指南

下载Hugo

因为是Windows 10系统，先去下载：https://github.com/gohugoio/hugo/releases

选择Windows版本，下载之后解压，解压可以得到 hugo.exe ，将 hugo.exe所在文件路径添加到Windows的Path变量中:

1
2
E:\Website>hugo version
hugo v0.82.0-9D960784+extended windows/amd64 BuildDate=2021-03-21T17:28:04Z VendorInfo=gohugoio

创建站点项目

以我为例， 假设要创建站点存放在 F:\Hugo\Website\ 目录中，在命令行中切换到该目录下执行：

1
2
E:\Website>hugo new site mywebsite
Congratulations! Your new Hugo site is created in E:\Website\mywebsite.

出现上述信息，创建出了mywebsite站点项目，其文件列表如下：

1
2
3
4
5
6
7
8
9
10
2021/03/28  15:52    <DIR>          .
2021/03/28  15:52    <DIR>          ..
2021/03/28  15:51    <DIR>          archetypes
2021/03/28  16:09               103 config.toml
2021/03/28  16:12    <DIR>          content
2021/03/28  15:51    <DIR>          data
2021/03/28  15:51    <DIR>          layouts
2021/03/28  15:52    <DIR>          resources
2021/03/28  15:51    <DIR>          static
2021/03/28  16:08    <DIR>          themes

添加主题

有了文件之后，还无法构建网站，因为hugo默认是没有主题文件的。这里选取一个简洁的主题

1
git clone https://github.com/yihui/hugo-prose.git themes/prose

当前项目目录内打开 config.toml 配置文件，在最后添加一行 theme = "prose" ，即将这个网站设置为 prose 主题。

运行站点

在站点项目内执行命令 hugo server -D：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
E:\Website\mywebsite>hugo server -D
Start building sites …

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  4
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Built in 30 ms
Watching for changes in E:\Website\mywebsite\{archetypes,content,data,layouts,static,themes}
Watching for config changes in E:\Website\mywebsite\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/

如果顺利打开之后，出现了Hugo网站界面，那说明安装好了！

不过这个时候还是没有内容的，因为我们还没有添加内容:-)

Hugo常用命令

Hugo 使用方法:

1
2
3
4
hugo
hugo [flags]
hugo [command]
hugo [command] [flags]
  1. 查看版本
1
hugo version
  1. 查看版本和环境详细信息
1
hugo env
  1. 创建新站点
1
2
hugo new site [path] [flags]
hugo new site "My Website"

用来新建一个网站，可以使用一个地址来指定目录生成的位置。

  1. 创建文章
1
2
hugo new [path] [flags]
hugo new 2021/test.md

在content/文件夹可以看到，此时多了一个markdown格式的文件index.md，打开文件可以看到时间和文件名等信息已经自动加到文件开头，包括创建时间，页面名，是否为草稿等。

  1. 编译生成静态文件
1
hugo

Hugo 将编译所有文件并输出到public目录。

  1. 编译生成静态文件并启动web服务
1
hugo server [flags]

用来在本地启动一个Web服务器，常用的命令是hugo server可以用默认的配置来启动。

如果想指定配置文件，可以使用hugo server –config [config]文件，如果有一些修改未更新的话，可以在后面加上–disableFastRender就可以强制生成新的站点了。

  1. 常用参数介绍
1
2
3
4
5
6
7
8
9
10
11
--bind="127.0.0.1"    服务监听IP地址；
-p, --port=1313       服务监听端口；
-w, --watch[=true]      监听站点目录，发现文件变更自动编译；
-D, --buildDrafts     包括被标记为draft的文章；
-E, --buildExpired    包括已过期的文章；
-F, --buildFuture     包括将在未来发布的文章；
-b, --baseURL="www.datals.com"  服务监听域名；
--log[=false]:           开启日志；
--logFile="/var/log/hugo.log":          log输出路径；
-t, --theme=""          指定主题；
-v, --verbose[=false]: 输出详细信息

常用使用参数组合:

1
2
3
4
5
6
7
8
9
hugo server -t hyde --buildDrafts --baseURL=http://www.datals.com  --bind=0.0.0.0 --port=80 -w

说明：
	-t hyde        使用hyde主题，如果使用-t 选择了主题会将当前默认的主题覆盖；
	--buildDrafts参数将生成被标记为草稿的页面，是否发布：hugo 会忽略所有通过 draft: true 标记为草稿的文件。必须改为 draft: false 才会编译进 HTML 文件。
	--baseURL=http://www.datals.com   站点监听域名
	--bind=0.0.0.0   监听全部网段
	--port=80        服务监听端口
	-w               如果修改了网站内的信息，会直接显示在浏览器的页面上，不需要重新运行hugo server，方便我们进行修改。

小结

从 hugo 初体验来看，Hugo 确实很快。不过由于目前缺乏时间，无法一一去美化。以后有时间精力之后，再折腾！