使用Hugo搭建个人网站

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 确实很快。不过由于目前缺乏时间,无法一一去美化。以后有时间精力之后,再折腾!