写在前面

在部署完博客后发现NotionNext，部署同样非常方便，有兴趣的读者可以参考下面链接：

Vercel部署NotionNext | NotionNext帮助手册

GitHub - tangly1024/NotionNext: 使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站

0.运行环境

1.安装Hugo

Installation | Hugo

注意这里要安装extended版本。

推荐 Windows 用户使用 winget 进行安装，

Winget is Microsoft’s official free and open-source package manager for Windows.

To install the extended edition of Hugo: winget install Hugo.Hugo.Extended

下载完成后，输入: hugo version 以检查是否安装成功，若出现版本信息则表示安装成功。

2.创建 GitHub Pages 仓库

2.1 命名GitHub Pages仓库，格式为<username.github.io>,其中<username>是自己的 GitHub 的用户名。

2.2 ✔勾选Public,设置为公开仓库。

2.3 ✔勾选添加README文件。

3.使用Hugo新建站点

命令行输入hugo new site <sitename>

后续命令行指令默认在<sitename>根目录下运行

创建完成后，根目录包含以下文件

.
├── archetypes: default.md #生成博客文章的模版
├── assets # 存放被 Hugo Pipes 处理的文件
├── content # 存放markdown文件作为博客内容
├── data # 存放 Hugo 处理的数据
├── layouts # 存放布局文件
├── static # 存放静态文件 图片 CSS JS文件
├── themes: 存放不同的主题
└── hugo.toml: 博客配置文件支持 JSON YAML TOML 三种格式配置文件

4.选择Hugo主题

为了实现快速搭建节省时间，也推荐直接下载修改后的模板。

blog-hugo-theme-LoveIt

sulv-hugo-papermod

另，从社区中选择主题

Complete List | Hugo Themes

推荐主题：

Stack | Hugo Themes

Paper | Hugo Themes

GitHub - adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.

以主题Paper为例，GitHub对应仓库中README文件中有安装说明，将主题文件git clone到<sitename>/themes文件夹中，并根据提示修改config.toml。

5.新建博客文章

使用hugo new posts/<postname>.md命令以使用archetypes/default.md模板文件在<sitename>/content/posts目录下新建<postname>.md。

关于模板文件以及相关front matter配置，请参考官方文档Front matter | Hugo

6.将博客部署到GitHub

在编辑完成后，使用hugo命令进行构建。

Hugo将构建后的网站内容保存在博客根目录下的public文件夹中，接下来使用Git工具将public文件夹的内容提交到<username.github.io>仓库。

也可以选择部署到云服务器上，具体参考Sulv的教程hugo博客部署到腾讯云轻量级服务器 | Sulv’s Blog

笔者选择使用 Github Pages 发布静态博客

优点：

  • 仅需一个 GitHub 账号和简单配置即可将静态博客发布到 GitHub Pages；
  • 没有维护的时间成本, 可以将精力更多的放到博客内容本身上去；
  • 无需备案；
  • 无需 SSL 证书；

缺点：

  • 访问速度较慢
  • 访问速度较慢
  • 访问速度较慢

7.常用操作

常用命令：

# 新建文章
hugo new posts/hello_world.md 
# 文件位置为content/posts/hello_world.md

# 构建Hugo网站 
hugo
# 本地预览 http://localhost:1313/ -D后缀表示应用草稿
hugo server -D
# 使用这个命令覆盖生成新的public文件夹
hugo -F --cleanDestinationDir

输入hugo的生成方式只会往public文件夹里添加内容，但是不会删除外部已经不存在而public里面还存在的文件。

在博客中添加本地图片：

将图片放到static文件夹下，以static为相对路径进行引用，如![](pic_name.png)。

推荐使用文件夹对图片进行统一管理，图片放到static/imgs文件夹下，引用格式为![](/imgs/pic_name.png)。

markdown调整图片位置和大小，嵌入HTML代码：

<!-- 固定宽高 width=200 height=100 -->
<div align=left>
<img src=https://img-blog.csdnimg.cn/20200822014538211.png width=60% /> 
</div>

8.细节优化

Features · adityatelange/hugo-PaperMod Wiki · GitHub

8.1 自定义博客域名

替换<username>.github.io

选择在阿里云注册域名，使用cloudflare进行代理访问。

在Github Pages对应仓库--Settings--Pages--Custom domain中绑定自己购买的域名。

8.2 引入twikoo评论系统

Twikoo | 一个简洁、安全、免费的静态网站评论系统

Twikoo Vercel 部署教程_哔哩哔哩_bilibili

选择部署在Vercel平台，发现国内无法访问

8.2.1 （可选）添加自定义表情包

Twikoo 添加自定义表情包 | 云晓晨CatchYun 给twikoo添加自定义表情包 | 前尘小筑

Twikoo配置表情包

表情包资源：

表情速查

GitHub - 2X-ercha/Twikoo-Magic: Twikoo自定义表情列表

cdn/src/emojis at master · Irithys/cdn · GitHub

利用 GitHub 标签与仓库镜像添加自定义表情

创建自己的表情预设 | Waline

jsDelivr - A free, fast, and reliable CDN for JS and open source

8.2.2 （可选）配置邮件通知提醒

配置邮箱通知提醒后，每当游客被博主或其他人回复时，他们就会收到邮箱提示。

在Twikoo设置的“邮件通知”选项下填入邮箱信息。以Gmail邮箱为例，以下为必填项：

SENDER_EMAIL: Gmail邮箱地址

SMTP_SERVICE: Gmail

SMTP_USER: Gmail邮箱地址

SMTP_PASS: Gmail应用专用密码

注意SMTP_PASS这里不是填写自己的邮箱密码，而是应用专用密码(App password)。Google现在做了调整，必须要先开启邮箱的手机两步验证才能使用App password。入口比较隐蔽，我建议开启两步验证之后直接在设置里搜索关键词App password或应用密码。具体教程可参考官方问答 。

进入App password界面后，点Select app - Other，取个名字后就能得到16位的应用专用密码了。

Twikoo的邮箱设置保存后，可以点击设置最下方的“邮件通知测试”并输入测试邮箱的地址，能收到邮件的话就成功了。

8.3 关于博客的图标

iconfont-阿里巴巴矢量图标库

Emoji表情1

Emoji表情2

8.4 修改字体

修改代码字体为JetBrains Mono，博客字体为霞鹭文楷。

8.4.1 方法一：使用CDN

在 PaperMod 博客中设置自定义字体 | Aimer’s Blog

修改全局字体：

在 Google Fonts 中查询开源字体，以 JetBrains Mono 为例，Google Fonts 会生成 HTML 和 css ，将 HTML 插入到 layouts/partials/extend_head.html 中，将 CSS 插入到 assets/css/extended/blank.css：

body {
  font-family: "LXGWWenKai", sans-serif;
}

修改代码字体，将 CSS 插入到 assets/css/extended/code.css：

.post-content pre,code {
  font-family: 'JetBrains Mono', monospace;
}

如果使用霞鹭文楷字体，请参考GitHub - chawyehsu/lxgw-wenkai-webfont: webfont package for the LXGW WenKai typeface

8.4.2 方法二：使用相对路径引用

和添加本地图片方式类似，将字体文件放到static/fonts文件夹下，在assets/css/extended/font.css中加入：

@font-face {
    font-family: "LXGWWenKai";
    src: url("/fonts/LXGWWenKai-Regular.ttf") format("truetype");
}

然后在对应的assets/css/extended/blank.css中用font-family属性指定使用哪种字体。

8.5 个人博客增加打赏功能

Hugo - 个人博客添加打赏功能

使用了七牛云和掘金的静态资源 cdn.staticfile.org

8.6 jsDelivr更换国内CDN

jsDeliVR 的 CDN 国内访问失效，与解决方案 | 懒猫

9.遇到的问题

9.1 解决国内无法访问Vercel

国内访问不了Vercel上绑定的域名?

vercel部署添加域名国内加速

解决 Vercel 部署网站在国内被墙 | Zoey’s Blog

9.2 修改js/css文件后本地预览没有更新

  • 浏览器强制刷新，Mac：Command + Shift + R，Windows：Ctrl + Shift + R。

  • 关闭hugo server，再重新开启，再刷新网站。

9.3 cdn.jsdelivr.net在国内无法访问

cdn.jsdelivr.net 可能在国内受到污染，可以将 cdn.jsdelivr.net 换成 gcore.jsdelivr.net，或代理cdn.jsdelivr.net使用。

9.4 css中@font-face引入字体文件不生效

查看控制台发现控制台警告Failed to decode downloaded font: http://localhost:1313/fonts/LXGWWenKai-Regular.ttf，可能是truetype字体有浏览器兼容问题。

9.5 发现Github Pages国内访问速度过慢

改用vercel平台进行部署，使用cloudflare进行代理访问。

Deploying GitHub Projects with Vercel

使用 Vercel 部署博客 - Krazyu风宇

提升部署在cloudflare、vercel或netlify的网站在中国国内的访问速度和稳定性 - 邢平cn’s blog

GitHub - xingpingcn/enhanced-FaaS-in-China: 提升部署在cloudflare、vercel或netlify的网页在中国的访问速度和稳定性

9.6 七牛云CDN抽风国内无法访问

又尝试了BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务，同样无法访问。

更换了博客CDN，使用cdnjs.loli.net。

Reference

[1] hugo博客搭建 | PaperMod主题 | Sulv’s Blog

[2] 如何用 GitHub Pages + Hugo 搭建个人博客 · 小绵尾巴

[3] Github Pages + Hugo 搭建个人博客 - 渣渣的夏天

[4] Hugo + PaperMod搭建技术博客 | Kunyang’s Blog

[5] Hugo+PaperMod 双语博客搭建 Home-Info+Profile Mode - YUNYI BLOG