Hugo 搭建过程

wlcheng

2021-07-27 2021-07-27 约 2004 字预计阅读 4 分钟

记录基于Hugo静态博客建站工具和LoveIt主题（已换成衍生的DoIt）的个人博客过程，作为备忘。VS Code作为博客编辑、站点部署集成环境，站点维护仍然采用Github Pages。

LoveIt 换成 DoIt

由于 LoveIt 原作者已长期未维护，HEIGE-PCloud 基于 LoveIt 的新主题DoIt主题，并维持着更新。致敬∠(°ゝ°)。

DoIt 的安装配置同 LoveIt，因此此文档仍然可参考。

准备工作

安装 VS Code

安装 Git

官方下载地址：https://git-scm.com/downloads

打开下载的.exe安装包，一路Next即可。

安装完成后，在命令行窗口执行git --version命令，若能正确输出版本信息，则表示安装成功，如下图正确演示：

若遇到提示说命令不存在或找不到命令的，可尝试重新打开命令行窗口，或检查并添加git主程序路径（比如我的D:\Dev\Git\cmd）到系统环境变量中（添加方法参考后面Hugo安装过程）后，再打开命令行窗口执行上面的命令。

安装 Hugo

下载 Hugo

Hugo 包括基础版本和支持自定义样式scss的 extended版本。

为了提高可用性，应对未来可能的自定义需求，我决定安装 Hugo extended 版本。

从 Hugo Release下载适合版本的压缩包，我的是Windows_x64。解压缩到想要安装的目录。解压出来，只有简单的一个主程序。可见，相对于 Hexo 依赖于 Node.js 及一大堆 npm 包，Hugo 的确非常的简洁。

添加环境变量

将 Hugo 的主程序路径添加到系统环境变量中，这样在命令行终端中才能调用主程序执行一系列命令，之后我们就能直接在VS Code的终端中执行命令。我的安装路径为：

1
D:\Dev\hugo_0.86.0\

首先打开资源管理器/我的电脑，然后在左侧导航栏，右键点击 此电脑，在弹出菜单中，打开属性。

依次在弹出窗口中点击 高级系统设置。

Blog-by-Hugo-and-LoveIt_20210726152730_2021-07-26-15-27-32

在弹出窗口中点击环境变量。

Blog-by-Hugo-and-LoveIt_20210726152841_2021-07-26-15-28-42

双击 path 变量，点击添加，将 Hugo 主程序路径填入，点击确定以保存修改。

Blog-by-Hugo-and-LoveIt_20210726153824_2021-07-26-15-38-26

验证配置是否成功

VS Code 中 Ctrl+Shift+` ，打开终端，输入 hugo version，若能如下图所示，无错返回版本号，则环境配置成功。

Blog-by-Hugo-and-LoveIt_20210726154557_2021-07-26-15-45-58

建立本地站点

打开终端，进入想将站点源文件放置的路径，执行以下命令，其中站点名指定站点工程源文件夹的名字，按照自己的需求随便取即可，和实际的网站 url不是一个东西。执行命令后，会按指定的站点名创建站点文件夹，并在文件夹下自动初始化生成路径结构以及相关的站点文件。

1
2
3
// 其中，hugo.wlcheng.github.io 换成自己的站点文件夹名字即可
hugo new site hugo.wlcheng.github.io
cd hugo.wlcheng.github.io

输出结果如下截图：

Blog-by-Hugo-and-LoveIt_20210726160101_2021-07-26-16-01-03

生成的站点目录结构：

Blog-by-Hugo-and-LoveIt_20210726161024_2021-07-26-16-10-26

LoveIt 主题

在Hugo 的主题商城扫了一圈，最后选了 LoveIt这一款主题。从 LoveIt的官方网站上逛了一圈，观感很棒。真可谓官方介绍的“一款简洁、优雅且高效的Hugo博客主题”。

安装主题

LoveIt 主题的仓库地址是 https://github.com/dillonzq/LoveIt 。

补充：DoIt 主体仓库地址是 https://github.com/HEIGE-PCloud/DoIt 。

可以直接下载最新版主题压缩包，将其解压到站点目录下的 themes文件夹中。

也可以直接用 git 克隆到该目录下，在站点目录下执行以下命令：

1
git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt 

配置主题

替换站点配置文件 /config.toml 内容为：

 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
baseURL = "http://wlchengg.github.io/"
# [en, zh-cn, fr, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"
# 网站语言, 仅在这里 CN 大写
languageCode = "zh-CN"
# 是否包括中日韩文字
hasCJKLanguage = true
# 网站标题
title = "Wlcheng's Life"

# 更改使用 Hugo 构建网站时使用的默认主题
theme = "LoveIt"

[params]
  # LoveIt 主题版本
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
    pre = ""
    # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
    post = ""
    name = "文章"
    url = "/posts/"
    # 当你将鼠标悬停在此菜单链接上时, 将显示的标题
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "标签"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "分类"
    url = "/categories/"
    title = ""
    weight = 3

# Hugo 解析文档的配置
[markup]
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

创建文章

1
2
hugo new posts/first-blog.md // 这会在content文件夹下创建posts文件夹，
                             // 并在里面创建first-blog.md文件。

部署到 Github Pages

Github Pages 即为

创建空 Github 仓库

将仓库名取为：username.github.io

Github 的人性化

Github 提供两种 Pages：

(1) 用户主页：以`username.github.io`作为仓库名，直接通过`username.github.io`访问；

(2) 仓库主页：任意合法名称作为仓库名，通过'github.com

填上仓库名；选定 public 仓库；不需勾选初始化选项，后续将从我们的本地仓库直接 push 到线上仓库中。

关联本地站点到仓库

进入本地站点路径；

初始化 git 环境：

1
git init

安装主题：

自行到Hugo选择主题后，将主题仓库克隆到themes路径下。此处我用DoIt主题为例：

1
git submodule add github.com themes/DoIt

添加 .gitignore 文件到站点根目录下，写入以下内容：

Hugo 搭建过程

准备工作

安装 VS Code

安装 Git

安装 Hugo

下载 Hugo

添加环境变量

验证配置是否成功

建立本地站点

LoveIt 主题

安装主题

配置主题

创建文章

部署到 Github Pages

创建空 Github 仓库

关联本地站点到仓库

进阶 —— 通过 Github Actions 自动编译部署站点

参考