Hugo 是一个很强大的静态博客生成框架。

搭建网站

用 -f 参数选择生成 yaml 格式，两者其实只有细微区别， 但对我个人而言，我比较熟悉 yaml 的语法，使用起来更加顺手。

如果用命令 hugo new site blog 会在根目录下创建 blog 文件夹，如果现在根目录下创建需要加上 --force 参数，例如 hugo new site . --force。

1

hugo new site . -f yml --force

我使用的主题是 PaperMod，这是它的[Github主页](adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme. (github.com)。我推荐用 git 的 submodule 子模块方式进行安装。 　

步骤1️⃣ 先把主题fork 到自己的 Github Repo ，

1
2

git submodule add --depth=1 git@github.com:adityatelange/hugo-PaperMod.git .\themes\PaperMod
git submodule update --init --recursive

关于 depth = 1 参数有如下说明：

Add the --depth option to the add and update commands of “git submodule”, which is then passed on to the clone command. This is useful when the submodule(s) are huge and you’re not really interested in anything but the latest commit.

——How to make shallow git submodules?

这个概念在当我们使用 git clone 尝试从远程克隆仓库的时候可能遇到过。直接 git clone 会将远程仓库的全部内容克隆下来，但是有时我们只想获取最新的仓库内容，而并不需要获取其他分支和历史信息，此时我们可以执行选项 git clone --depth 1来只克隆最近一次提交的仓库。这样在仓库文件非常大的时候会非常有效。

更新主题：

1

git submodule update --remote --merge

运行这个命令会进行编译，在本地查看网站：

1

hugo server -D

对参数的说明：

-D, –buildDrafts include content marked as draft

‌‌‌‌　　记得将需要发布的文章的内容里draft: false标识的值改为true，因为默认是不会根据 draft 生成文章的，可以在 config.yml 中设置。然后运行下面命令

‌‌‌‌　　在本地预览没问题后，可以在终端输入：

1

hugo -F --cleanDestinationDir

在public文件夹下会生成输出文件。表示每次生成的 public 都是全新的，会覆盖原来的。

修改字体

‌‌‌‌　　首先找到喜欢的字体，我目前的文章字体为霞鹜文楷 ，一款很好看的开源中文字体。这是它的Github首页。

‌‌‌‌　　传统的网页字体存储方式是把字体下载下来放到 static 文件夹中调用，我们不一定要使用此种方式，而考虑使用CDN进行加速。

　

JSDelivr是一个面向开源软件项目的公共内容分发网络(CDN)，包括托管在GitHub、npm和WordPress.org上的软件包。JSDelivr由开发者Dmitriy Akulov创建。迄今为止，jsDelivr是仅次于cdnjs和谷歌托管库的，保存JavaScript代码的第三大最受欢迎的CDN。

　

‌‌‌‌　　我们可以在Google Fonts或JSDelivr中找到自己想要的字体，点击生成HTML和css。将HTML插入到themes/PaperMod/layouts/partials/extend_head.html中，将CSS插入到themes/PaperMod/assets/css/extended/blank.css，或者也可以像我一样，新建一个 font.css ，路径为 themes/PaperMod/assets/css/extended/fonts.css ，直接在 font-family 处调用即可。

　 extend_head.html 文件内容：

1
2
3
4
5
6
7

<!-- Noto Serif SC font -->

<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@4.5.12/chinese-simplified-500.min.css">

<!-- LXGW font -->

<link  rel="preload" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.min.css">

　 font.css 文件内容：

  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
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

@font-face {

    font-family: "Ysabeau";

    src: url("/fonts/YsabeauOffice_Medium.ttf") format("truetype");

}

@font-face {

    font-family: "LXGWBright";

    src: url("/fonts/LXGWBright_Medium.woff2") format('woff2');

    font-weight: 200;

    font-style: normal;

    font-display: auto;
}

@font-face {

    font-family: "JetBrains Mono";

    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),

      url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');

    font-weight: 200;

    font-style: normal;

    font-display: auto;
}
  

/* post字体，主要字体 */

body {

    font-family: "Ysabeau", "LXGWBright", sans-serif;

    font-size: 1.1rem;

    line-height: 1.2em;

    margin: 0;

}
  

/* 小代码块字体 */

.post-content code {

    /* default margin: auto 4px;

    padding: 4px 6px;

    font-size: 0.78em;

    line-height: 1.5;

    background: var(--code-bg);

    border-radius: 2px; */

    font-family: "Ysabeau", sans-serif;

    margin: 1px 5px;

    padding: 1px 5px;

    font-size: 1.1em !important;

    line-height: 1.1em;

    background: var(--code-bg);

    border-radius: 4px;

}
  

/* 大代码块字体 */

.post-content pre code {

    font-family: "JetBrains Mono", sans-serif;

    font-size: 0.9em !important;

    max-height: 40rem;

}

/* 数学公式字体 */

.katex-html {

    font-family: "LXGW WenKai", sans-serif;

    font-size: 0.9em !important;

    text-indent: 0;

    text-rendering: auto;

}
  

/* 目录字体 */

.toc {

    font-family: "Noto Serif SC", sans-serif;

    font-size: 1rem;

    line-height: 1.5em;

    margin: 0;

}
  

/* 顶部导航栏字体 */

.nav {

    font-family: "Noto Serif SC", sans-serif;

}

文件结构

  • content：用于放博客内容
  • data：不用管
  • layouts：自定义的HTML
  • public：项目导出文件
  • resources：自定义的CSS和JavaScript
  • static：存放的图片
  • themes：主题

进入themes/PaperMod则是PaperMod的相关代码，比较主要的目录有：

  • assets：PaperMod的CSS和JavaScript代码
  • layouts：PaperMod的HTML