Cloudflare on 快乐宅家

实战教程: 个人博客问题修正 pt.1

Sun, 01 May 2022 18:37:23 +0800

在完整经历了下面三个部分的系列教程后, 任何人应该已可访问你的静态博客:

pt.1 - 创建本地博客网站项目
- 使用 Hugo 构建静态博客.
pt.2 - 同步静态博客至 QNAP NAS
- 使用 Qsync 从本地将静态博客同步至 QNAP NAS 上专属虚拟主机目录下.
pt.3 - 同步静态博客至 Backblaze B2 和 Cloudflare
- 使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速.

一切看上去都很完美, 不论是 Hugo 构建, Qsync 同步还是 HBS 3 (Hybrid Backup Sync 3) 同步.

但在深入查看了同步至 Backblaze B2 的静态博客文件后, 却发现其中存在着不需要的隐藏文件, 比如 .bzEmpty, 或者某些深层次的错乱目录结构. 虽然这并不影响对静态博客的访问, 但同步这些文件却要消耗事务次数以及更多的时间.

另外, 由于每当 Hugo 构建时, 都会更改图片等文件的修改时间, 这导致 Qsync 和 HBS 3 (Hybrid Backup Sync 3) 均认为相应的文件被更新, 从而触发上传/同步. 这同样会消耗事务次数以及更多的时间.

以上这些问题暂时没法解决, 那么就只好从其他角度考虑解决方案了.

这里暂时搁置 Qsync 同步的问题, 毕竟 QNAP NAS 通常部署在 LAN, 因此即便多些同步时间还是可忍受的, 而 HBS 3 (Hybrid Backup Sync 3) 却可使用 rclone 来代替, 唯一的缺点是暂时不能在 QNAP NAS 上运行 rclone.

注意:

为行文方便, 本教程以 blog.zhaijia.fun 作为示例的静态博客域名和 Repo 名.

请勿照抄, 务必将其替换为你自己的域名!

安装 Kapitainsky rclone browser

Kapitainsky rclone browser 是一个跨平台, 带 UI 的 rclone 应用, 支持主流的桌面系统:

MacOS
GNU/Linux
BSD family
Windows

这里以 MacOS 为例, 演示该应用的安装和使用.

1

brew install kapitainsky-rclone-browser --cask

使用 Kapitainsky rclone browser

配置

首次启动 Kapitainsky rclone browser (应用名为 Rclone Browser), 可能会提示无法确认 rclone 的版本, 并弹出设置窗口.

rclone location: /usr/local/bin/rclone

rclone.conf location: 填写一个你方便记忆的路径, 比如: ~/rclone.conf, 这个文件无需创建, 可直接使用后面的示例文件.

点击 “OK”.

此时可点击 “Config…” 创建 rclone.conf, 这是一个冗长的过程, 其中可以设置很多选项. 不过大部分选项其实只使用默认值即可, 因此可直接使用下面的 rclone.conf, 保存到前面设置窗口里的 rclone.conf location 即可:

1
2
3
4
5
6


[B2-blog-zhaijia-fun]
type = b2
account = <Backblaze B2 中已创建的 keyID>
key = <Backblaze B2 中已创建的 applicationKey>
hard_delete = true
download_url = https://blog.zhaijia.fun

第一行是配置名称, 随意.

account, key 请按说明填写.

hard_delete = true, 删除远程存储库文件时, 真正删除而不是转为隐藏文件.

点击 “Refresh”, 即可显示出上面的配置.

创建同步任务

选中该配置, 点击 “Open”, 会在一个新的标签页中打开它.

等待一会儿, 直到远程存储库加载完毕, 选中它, 点击工具栏上的 “Upload”.

Source: 选择本地 Hugo 构建静态网站的默认发布目录 public, 末尾必须要添加一个 “/”.

Destination: 远程存储库名, 必须以 “/” 结尾.

Mode: 勾选 “Sync”.

勾选 “Compare” (该项默认为选中), 右侧下拉, 选择 “Size & checksum”.

Task description: 同步 blog.zhaijia.fun

点击 “Save task”.

运行同步任务

模拟运行

点击 “Dry Run”, 只是模拟并未真正运行.

查看日志, 可看到类似:

1

2022/05/01 13:10:53 NOTICE: p/tutorial-how-to-build-a-personal-blog-part-3/.bzEmpty: Skipped delete as --dry-run is set (size 0)

意为将从远程存储库删除该文件, 但实际上略过了, 因为现在是模拟运行 (–dry-run).

最后可看到类似:

1

2022/05/01 13:10:53 INFO : There was nothing to transfer

意为当前并无可同步的目录/文件.

这是因为 rclone 通过文件大小与校验和 (Size & checksum) 的检查发现两方的目录/文件是相同的, 即使两方的修改时间不同. 这种检查方式相比 Qsync 和 HBS 3 (Hybrid Backup Sync 3) 更加精确, 高效.

正式运行

点击 “Run”, 真正执行同步.

查看日志, 即可浏览同步详情.

实战教程: 搭建个人博客 pt.3

Thu, 21 Apr 2022 10:24:11 +0800

本系列教程为你展示搭建个人博客的技巧, 分为三个部分:

pt.1 - 创建本地博客网站项目

使用 Hugo 构建静态博客.

pt.2 - 同步静态博客至 QNAP NAS

使用 Qsync 从本地将静态博客同步至 QNAP NAS 上专属虚拟主机目录下.

pt.3 - 同步静态博客至 Backblaze B2 和 Cloudflare (本文)

使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速.

在经历了第二部分的实战教程: 搭建个人博客 pt.2 - 同步静态博客至 QNAP NAS后, 你的静态博客应该已可用于测试且相当于多了一个备份. 但这并非最终目的, 因为它还未公开发布.

要想公开发布一个博客网站, 就必须准备一个类似 QNAP NAS 的部署环境, 不同之处在于它必须是对任何人都可访问的.

通常可以使用服务器或虚拟主机空间作为部署环境, 但为了节省成本 (毕竟只是搭建个人博客), 这里选择将静态博客部署至 Backblaze B2 和 Cloudflare.

非常幸运的是可以使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速.

Backblaze B2 云存储简介

Backblaze B2 云存储是一个类似 Amazon S3 的对象存储服务, 但价格却低很多:


存储空间 ($/GB/月)	0.021 GB/月	0.005 GB/月	76%+ 降低成本
下载 ($/GB)	0.05 GB/月	0.01 GB/月	成本降低 80% 以上

此外, 它还提供免费额度:

存储
- 前 10GB 的存储空间是免费的.
- 超过 10GB, 收取 $ 0.005 /GB/月的费用, 大约是其他领先的云对象存储 (比如 S3) 成本的四分之一.
- 存储成本按小时计算, 没有最低保留要求, 按月计费.
下载流量
- 每天下载的前 1GB 流量是免费的.
- 超过 1GB, 收取 $ 0.01 /GB,
- 但是通过 CDN 和计算合作伙伴 (Cloudflare 就是其中之一) 下载是免费的.
事务
- 每个下载操作都算作一个 B 类事务.
- 每天前 2,500 个 B 类事务是免费的.
- 超过 2,500 个 B 类事务, 按 $ 0.004/10,000 个事务的费率收费.
没有 “惊喜” 账单
- 如果你已经注册了 Backblaze B2, 你可能已经注意到你不必提供信用卡号. 你的 10GB 免费存储空间永不过期, 你也不会意外产生任何费用.

由于 Backblaze B2 和 Cloudflare 的合作伙伴关系, 二者之间的流量无需客户付费. 再加上 Cloudflare 本身的 CDN 功能会大大减少回源 (事务) 次数, 因此只需通过 Cloudflare 访问部署于 Backblaze B2 的静态博客, 就近乎于全免费, 这也是选择 Backblaze B2 的重要原因之一.

设置 Backblaze B2

注册 B2 账号

点击此处进行注册, 这里 Region 选择 “US-West”.

绑定手机号

登录后, 提示要给手机发验证码, 目前支持中国大陆的手机号, 接收时可能会有比较大的延迟, 比如延迟 1~2 小时, 但也可能立即收到.

验证码的有效期是 24 小时, 如遇延迟, 请等待.

创建存储库 (Bucket)

绑定了手机号再次登录后, 默认进入 “Buckets” 页, 也可点击此处进入该页.

现在创建一个存储库 (Bucket), 点击 “Create a Bucket”:

Bucket Unique Name: blog-zhaijia-fun, 不能包含 “.”, 即不能与域名同名, 最少6个字符, 且需在 Backblaze B2 全站范围内唯一.

Files in Bucket are: 选择 “public”, 表示对所有人都是可访问的.

其他选项保持默认值即可.

获取存储库的域名

随意上传一张示例图片, 例如: smiley.png

并查看其信息:

记下其中的域名 (图中红线所示的部分), 即: f000.backblazeb2.com, 你的可能和示例不同, 请以你自己的为准.

创建 App Key

为使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 首先要创建一个 App Key.

进入 “App Keys” 页, 也可点击此处进入该页.

Name of Key: NAS-HBS

Allow access to Bucket(s): 允许访问的存储库 (Bucket), 只选中 blog-zhaijia-fun

其他选项保持默认值即可.

点击 “Copy to Clipboard”, 会将 applicationKey 的值拷贝至剪贴板.

该值只在此处显示一次, 以后将无法查到.

强烈建议你将 applicationKey 和相对应的 keyID 保存至安全的地方, 它们是执行同步所需的关键参数, 千万不要泄露!

设置 Cloudflare 加速

你必须要有一个 Cloudflare 账号, 如果没有, 点击此处注册.

你必须要有一个域名并按照 Cloudflare 的指引将其导入 Cloudflare.

注意:

为行文方便, 本教程以 blog.zhaijia.fun 作为示例的静态博客域名和 Repo 名.

请勿照抄, 务必将其替换为你自己的域名!

设置 SSL/TLS

切换到 “SSL/TLS” 项.

点击右侧的 “Full (strict)",确保它被选中:

设置 DNS

切换到 “DNS” 项.

添加一个类型为 “CNAME” 的解析项目:

这里将域名 (子) blog.zhaijia.fun 作为前面找到的 f000.backblazeb2.com 的别名 (CNAME).

也就是说访问 blog.zhaijia.fun 就相当于访问 f000.backblazeb2.com.

请确保最右侧的开关是打开的 (图中红线所示的部分), 并点击 “Save” 保存.

此 CNAME 的 DNS 解析可能需要一定的时间才能生效, 请耐心等待.

此时, 拷贝示例图片的 Friendly URL, 并将其中的域名替换为 blog.zhaijia.fun, 可得:

https://blog.zhaijia.fun/file/blog-zhaijia-fun/smiley.png.

如果一切正常, 在浏览器中访问新的图片 URL, 你将看到这张图片.

设置 Transform Rules

切换到 “Rules” -> “Transform Rules” 项.

缩减 URL

点击 “Create transform rule” -> “Rewrite URL”:

Rule name: fix url path 1

然后点击 “Edit expression”, 并在下方输入框中输入:

1

not starts_with(http.request.uri.path, "/file/blog-zhaijia-fun") and not ends_with(http.request.uri.path, "/")

该文本中的 blog-zhaijia-fun 为存储库 (Bucket) 名称

点击 “Path” 下方的 “Rewrite to…” -> “Dynamic”, 并在右侧的输入框中输入:

1

concat("/file/blog-zhaijia-fun", http.request.uri.path)

最后点击 “Deploy”.

现在删除示例图片 URL 中的 “/file/blog-zhaijia-fun”, 可得:

https://blog.zhaijia.fun/smiley.png

如果一切正常, 在浏览器中访问新的图片 URL, 你将看到这张图片.

至此, 该 URL 将被用作示例图片的最终 URL .

自动搜索索引文件

Backblaze B2 提供的云存储服务并不像 Web 服务器那样在收到一个以 “/” 结尾的 URL 时会自动搜索索引文件, 比如: index.html, 而是返回 HTTP 404 (Not Found) 错误. 不过只需创建特定的 Transform Rule 就可模拟自动搜索索引文件.

类似前面的创建过程, 再次创建一个 “Rewrite URL” 规则:

Rule name: fix url path 2

然后点击 “Edit expression”, 并在下方输入框中输入:

1

not starts_with(http.request.uri.path, "/file/blog-zhaijia-fun") and ends_with(http.request.uri.path, "/")

该文本中的 blog-zhaijia-fun 为存储库 (Bucket) 名称

点击 “Path” 下方的 “Rewrite to…” -> “Dynamic”, 并在右侧的输入框中输入:

1

concat("/file/blog-zhaijia-fun", http.request.uri.path, "index.html")

最后点击 “Deploy”.

从响应中删除 Backblaze B2 HTTP 标头

通常, 下面的 Backblaze B2 HTTP 标头将被包含在响应中:

x-bz-file-name
x-bz-file-id
x-bz-content-sha1
x-bz-upload-timestamp
x-bz-info-src_last_modified_millis

删除它们, 除了可以防止某些信息的泄露之外, 还能减少网络传输的字节数.

点击 “Create transform rule” -> “Modify Response Header”:

Rule name: remove b2 headers

然后点击 “Edit expression”, 并在下方输入框中输入: true

点击 “Select item…” -> “Remove”, 并在右边的输入框中输入某个 Backblaze B2 HTTP 标头.

可通过点击 “Set new header”, 添加另一个待删除的 Backblaze B2 HTTP 标头.

重复这个过程, 直至上面的 5 个 Backblaze B2 HTTP 标头都被添加:

最后点击 “Deploy”.

通过 ETag HTTP 标头优化缓存效率

编辑刚才创建的规则 “remove b2 headers”, 点击 “Set new header”, 选择 “Set dynamic”, 在下方的两个输入框中分别输入:

左边:

1

ETag

右边:

1
2
3


concat(http.response.headers["x-bz-content-sha1"][0],
http.response.headers["x-bz-info-src_last_modified_millis"][0],
http.response.headers["x-bz-file-id"][0])

这表示使用所访问资源的 sha1, src_last_modified_millis 和 file-id 构造 ETag HTTP 标头.

最后, 点击 “Save” 保存.

创建 HBS 3 同步任务

点击 “同步” -> “立即同步” -> “单向同步作业”:

名称: B2 blog-zhaijia-fun

keyID: Backblaze B2 中已创建的 keyID

应用程序密钥: Backblaze B2 中已创建的 applicationKey

作业名称: 同步 blog.zhaijia.fun

描述: 从 QNAP NAS 将静态博客同步至 Backblaze B2

操作: 镜像, 意为同步后, QNAP NAS 和 Backblaze B2 两方的目录/文件是相同的, 而 Backblaze B2 方存储的其他数据将被删除.

点击左侧 “添加配对文件夹” 右边的 “+”, 选择 QNAP NAS 上的目录: Web/blog.zhaijia.fun

点击右侧 “添加配对文件夹” 右边的 “+”, 选择 Backblaze B2 上的目录: /

保持默认选项 “没有计划”, 意为手工运行该同步任务.

点击 “下一步”, 查看任务摘要, 并 “创建”:

至此, 同步任务创建完毕.

任何时候, 只要点击图中的 “立即同步” 即可将静态博客从 QNAP NAS 同步至 Backblaze B2.

浏览静态博客

现在从浏览器中访问 https://blog.zhaijia.fun, 看看成果吧!

实战教程: 搭建个人博客 pt.2

Wed, 20 Apr 2022 09:32:15 +0800

本系列教程为你展示搭建个人博客的技巧, 分为三个部分:

pt.1 - 创建本地博客网站项目

使用 Hugo 构建静态博客.

pt.2 - 同步静态博客至 QNAP NAS (本文)

使用 Qsync 从本地将静态博客同步至 QNAP NAS 上专属虚拟主机目录下.

pt.3 - 同步静态博客至 Backblaze B2 和 Cloudflare

使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速.

在经历了第一部分的实战教程: 搭建个人博客 pt.1 - 创建本地博客网站项目后, 你的静态博客应该已经在本地构建完毕了.

虽然在启动本地博客网站 (Hugo 调试环境) 时可通过浏览器调试博客文章, 但这仅限于你自己. 如果你希望别人 (尤其是团队中的其他人) 也能帮忙测试这个静态博客, 你需要将它部署到一个提供有限访问权限的环境中, 且需要一个提供 Web 服务的软件, 例如: Apache Web Server, Nginx 或 Caddy 等.

综合下面这几个理由, 这里选择将静态博客部署至 QNAP NAS:

QNAP NAS 通常部署在 LAN, 非常适合用作提供有限访问权限的测试环境.
QNAP NAS 内置了 Apache Web Server, 且易于使用.
QNAP NAS 易于连接至 Backblaze B2, 可以很方便地将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速 (即本系列教程的第三部分).
部署于 QNAP NAS 上的静态博客, 也相当于多了一个备份.

注意:

为行文方便, 本教程以 blog.zhaijia.fun 作为示例的静态博客域名和 Repo 名.

请勿照抄, 务必将其替换为你自己的域名!

创建共享文件夹

为避免繁琐且容易失误的手工上传方式, 这里使用 Qsync 将静态博客从本地同步至 QNAP NAS, 这需要先在 QNAP NAS 上创建一个用于同步的共享文件夹.

打开 “File Station”, 点击左侧目录树中 “Web” 的上级, 比如 “DataVol1” 右边的三个竖点, 然后点击 “创建共享文件夹”:

文件夹名称: blog.zhaijia.fun

点选 “手动输入路径”, 并在其下的输入框中输入: /Web/blog.zhaijia.fun

为共享文件夹启用同步

必须启用 Qsync Central 才能同步文件. 此应用程序默认启用, 必须保持启用状态以进行文件同步.

必须启用对共享文件夹的同步访问, 以在文件夹和设备之间同步文件. 共享文件夹默认没有同步访问权限.

打开 Qsync Central, 然后转到 “共享文件夹”.
在右边的列表中找到行 “blog.zhaijia.fun”, 点击其 “允许” 列的按钮, 启用同步访问权限.

启用虚拟主机

为方便管理, 这里在 QNAP NAS 内置的 Web 服务器 (即 Apache Web Server) 上为静态博客创建专属虚拟主机.

进入 “应用程序” -> “Web 服务器” -> “虚拟主机”, 勾选 “启用虚拟主机”, 最后点击 “应用”:

创建专属虚拟主机

点击 “创建虚拟主机”:

主机名称: test.blog.zhaijia.fun

根目录: /Web/blog.zhaijia.fun (该目录必须位于 Web 文件夹下)

端口号: 该端口号与 Web 服务器所使用的端口号相同, 通常为 80.

请注意这里是将主机名称 test.blog.zhaijia.fun 的虚拟主机映射到目录 blog.zhaijia.fun, 意为该虚拟主机用于测试目的.

安装 Qsync 客户端

根据 QNAP 官网的描述:

Qsync 让您方便地在 QNAP NAS 及绑定设备间进行文件同步, 适用于PC主机, 笔记本电脑与移动设备. 您可在所有设备上存取实时数据, 并轻松分享给工作团队或家庭成员.

点击下载 Qsync (Windows® 及 macOS®、Android™ 及 iOS®), 并安装.

使用 Qsync 客户端

打开 Qsync 客户端, 连接并登录.

该过程只需执行一次, 之后可通过点击 Qsync 客户端的系统托盘图标打开主界面.

打开主界面

新增配对文件夹

在 QNAP NAS 上查看同步结果

浏览测试环境的静态博客

为了能够正常浏览测试环境的静态博客 (即虚拟主机网站), 请先添加测试域名 test.blog.zhaijia.fun 的 DNS 解析记录. 可以使用 SwitchHosts, 或者直接修改本地的 hosts 文件, 例如:

Linux/MacOS: /etc/hosts

Windows: C:\WINDOWS\system32\drivers\etc\hosts

在其中添加行:

<QNAP NAS IP 地址> test.blog.zhaijia.fun

使用浏览器访问: http://test.blog.zhaijia.fun 以浏览/测试静态博客.

至此, 每当在本地新增/删除/修改博客并执行 Hugo 构建之后, 你的静态博客将会被立即同步至 QNAP NAS 上专属虚拟主机目录下.

如果想暂停此同步:

实战教程: 搭建个人博客 pt.1

Mon, 18 Apr 2022 09:49:47 +0800

本系列教程为你展示搭建个人博客的技巧, 分为三个部分:

pt.1 - 创建本地博客网站项目 (本文)

使用 Hugo 构建静态博客.

pt.2 - 同步静态博客至 QNAP NAS

使用 Qsync 从本地将静态博客同步至 QNAP NAS 上专属虚拟主机目录下.

pt.3 - 同步静态博客至 Backblaze B2 和 Cloudflare

使用 HBS 3 (Hybrid Backup Sync 3) 从 QNAP NAS 将静态博客同步至 Backblaze B2, 并设置 Cloudflare 加速.

创建 Github 远程 Repo

本教程使用 Github 同步/备份所创建的博客网站项目, 因此需要先创建它对应的 Github 远程 Repo.

注意:

为行文方便, 本教程以 blog.zhaijia.fun 作为示例的静态博客域名和 Repo 名.

请勿照抄, 务必将其替换为你自己的域名!

你必须要有一个 Github 账号, 如果没有, 点击此处免费注册.

这里将此 Repo 的类型设置为 “Private” (私有的), 意为其中存放的目录/文件只对你自己可见.

如果将来需要部署至某些要求 Repo 必须是 “Public” 的静态网站托管服务, 比如 Netlify, 请修改为 “Public”.

安装 Hugo

进入此处查看并下载最新版本的 Hugo.

如果你的本地系统是 macOS, 可按照下面的简洁方式快速安装 Hugo:

1
2
3
4
5
6
7
8
9


#### 安装
brew install hugo

#### 查看版本
hugo version

例如:

hugo v0.97.3+extended darwin/amd64 BuildDate=unknown

注意: 必须是扩展版本的 Hugo, 即: extended

创建博客网站项目

1
2
3
4
5
6
7
8


#### 在某个指定的目录下执行:
hugo new site blog.zhaijia.fun

#### 进入对应的博客网站项目目录
cd blog.zhaijia.fun

#### git 初始化
git init

安装主题

请查看此处或自行搜索你喜欢的主题, 然后按照相关的说明文档安装并配置.

安装 Stack 主题

这里选择安装 Stack 主题:

1
2
3
4
5
6
7
8
9


#### 以子模块的方式安装
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

#### 使用样例配置作为开始, 以后可在此基础上再次按需修改
cp themes/hugo-theme-stack/exampleSite/config.yaml .
cp -R themes/hugo-theme-stack/exampleSite/content .

#### 删除默认的配置文件 config.toml, 因为已经有了 config.yaml
rm config.toml

基本配置

网站配置 config.yaml

忽略某些目录/文件

这里创建 .gitignore, 在其中放入不需要同步至 Github 的目录/文件, 例如:

 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


#### .gitignore

#### lock for building
/.hugo_build.lock

#### public 是 Hugo 构建静态网站的默认发布目录.
/public/

#### Hugo 资源目录
/resources/

#### 图片, 视频, 音频等体积较大的文件, 仅限目录 /content/post/**
/content/post/**/*.jpg
/content/post/**/*.jpeg
/content/post/**/*.png
/content/post/**/*.gif
/content/post/**/*.webp

/content/post/**/*.mp4
/content/post/**/*.mov

/content/post/**/*.mp3
/content/post/**/*.m4a

#### 任意的 .DS_Store (macOS)
**/.DS_Store

此示例意为在同步至 Github 时, 将 Hugo 构建静态网站的默认发布目录 public, Hugo 资源目录, 文章所引用的图片, 视频, 音频等体积较大的文件和任意的 macOS 保存目录自定义属性的隐藏文件 .DS_Store 排除在外.

启动本地博客网站 (Hugo 调试环境)

1

hugo server -D --disableFastRender --noHTTPCache

如果一切正常, 去浏览器查看本地博客网站: http://localhost:1313/.

-D 意为也对标记为草稿的文章生成页面.

由于本主题使用了 Hugo 中的 .Scratch 来实现一些特性, 非常建议你为 hugo server 命令添加 –disableFastRender 参数来实时预览你正在编辑的文章页面.

--noHTTPCache 意为阻止服务器端的缓存, 总是向浏览器发送内容而不是提示内容已最新 (HTTP 304). 按下 Ctrl + C 退出 Hugo 调试环境.

如果需要带域名启动, 只需添加参数 –baseURL, 例如:

1

hugo server -D --disableFastRender --noHTTPCache --baseURL http://blog.zhaijia.fun

将会提示: Web Server is available at http://blog.zhaijia.fun:1313/ (bind address 127.0.0.1)

此时需将域名 blog.zhaijia.fun 本地解析到 127.0.0.1 才能在浏览器中正常访问上面的地址.

首次同步至 Github 远程 Repo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


#### 配置连接 Github 时的账户信息 ####
#### 配置默认账户,即多个 Repo 共享的 Github 账户
git config --global user.email "your-email"
git config --global user.name "your-user-name"

#### 配置仅用于连接当前 Repo 的 Github 账户
git config user.email "your-email"
git config user.name "your-user-name"

#### 添加当前目录下的所有目录/文件
git add .

#### 提交并进行注释
git commit -m "首次提交"

#### 切换至主分支 (main)
git branch -M main

#### 链接到远程 Repo
git remote add origin https://github.com/your-user-name/blog.zhaijia.fun.git

#### 同步本地的目录/文件至 Github
git push -u origin main

配置连接 Github 时的账户信息, 有两种情况:

你只有一个 Github 账户, 则使用带 –global 的版本.

你有多个 Github 账户, 则使用不带 –global 的版本.

请替换 your-email 为你自己的 Github 账户邮箱.

请替换 your-user-name 为你自己的 Github 账户用户名.

提示输入密码时, 请输入你的 personal access token 而非 github 账户密码, 此规定已于 2021-8-13 启用, 详见: https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/

请查看此处来生成一个 personal access token.

至此, 你的博客网站项目已经创建完毕并可随时同步至 Github (通过 git 命令).

进阶配置

网站配置 config.yaml

网站域名 baseurl

例如: baseurl: “https://blog.zhaijia.fun”

网站名称

title: 快乐宅家

首页显示的文章数 paginate

设置为简体中文

languageCode: zh-cn
DefaultContentLanguage: zh-cn
hasCJKLanguage: true
注释掉 languages 以取消多语言设置

网站图标 params.favicon

请把 favicon.ico 放在网站根目录的 static 文件夹下, 这里填写 /favicon.ico .

左侧边栏 params.sidebar

emoji

头像底部的 Emoji, 留空不显示.

网站介绍 subtitle

subtitle: 非常用心地随便写

头像 avatar

enabled: true 显示头像.
local: true 使用本地头像文件.
src:
- 本地头像: 请把图片放在网站根目录的 assets/img 文件夹下. 例如 assets/img/avatar.png, 并填入 img/avatar.png
- 外部头像: 头像文件网址.

文章 params.article

协议 license

显示在页面底部

enabled: 是否在所有文章底部显示协议信息. 可以在文章的 Front Matter 插入 license: false 来单独关闭.
default: 默认文章协议. 可以在文章的 Front Matter 插入 license: “My custom licence” 来单独关闭.

评论系统 params.comments

是否启用评论 enabled

enabled: false

服务提供商 provider

disqus
disqusjs
utterances
remark42
vssue
waline
twikoo
cactus
giscus
gitalk
cusdis

小部件 params.widgets

主页 homepage

普通页

颜色模式 params.colorScheme

是否显示切换按钮 toggle

默认模式 default

可选项:

auto 自动
light 亮色
dark 暗色

identifier: Id
name: 名称
url: URL
weight: 权重
params:
icon: 图标
newTab: 是否在新 tab 中打开

主题自带的 SVG 图标来自 Tabler Icons, 存放在 assets/icons 目录下.

你可以在网站根目录下新建同名文件夹, 并下载更多的图标.

主题使用了 params.icon 字段来指定菜单项的图标. params.icon: “archives” 会输出 assets/icons/archives.svg 图标.

融合的菜单

左侧边栏此时有5个菜单项:

主页: 非可自定义项, 自动添加且无法删除, 并按当前语言 (zh-cn) 本地化.
关于: 融合自 content/page/about/
Archives: 融合自 content/page/archives/
Search: 融合自 content/page/search/
Links: 融合自 content/page/links/

后 4 个菜单项都是融合而来的, 且 “关于” 菜单项已按当前语言 (zh-cn) 本地化.

查看目录 content/page/about/ 可以发现其中有两个文件: index.md 和 index.zh-cn.md, 分别对应本地化语言 en (默认语言) 和 zh-cn. 它们都含有 menu Front Matter, 这使得它们出现在左侧边栏的菜单列表中. 此时只需删除该 menu Front Matter 即可移除对应的菜单项.

如果只需要单一语言菜单项, 比如 zh-cn, 则可只保留 index.md 并对其进行本地化.

最好在 index.md 中设置英文的 slug Front Matter, 比如 slug: “about”, 否则将生成类似 http://localhost:1313/关于/ 的 url.

给分类 / 标签添加图片和简介

创建分类子目录: content/categories/分类名.

创建标签子目录: content/tags/标签名.

然后在该子目录下新建文件 _index.md, 内容如下:

1
2
3
4
5


---
title: "分类名"
description: "简介 Blablabla"
image: "nichijou.jpg"
---

description: 这里是简介.

image: 这里是图片, 和 _index.md 放在同一目录下.

有关 Stack 主题的更多配置, 请参考此处.

修改原型

使用以下的 Markdown 代码替换 Hugo 生成的默认原型文件 archetypes/default.md 的内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: "{{ replace .Name "-" " " | title }}"
description: ""
date: {{ .Date }}
slug: ""
draft: true
image: ""
tags: []
categories: []
---


<!--more-->

该 default.md 默认设置了下列的 Front Matter 字段:

title: 标题, 即将文件名中的 “-” 替换为 " " 后的字符串.

description: 副标题.

date: 创建时间.

slug: 自定义 url, 若为 "" (默认值), 则使用文件名作为 url.

draft: 是否为草稿, 默认为是.

image: 特色图片 (头图), 若为 "" (默认值), 则表示无图.

tags: 标签数组, 默认为空数组.

categories: 分类数组, 默认为空数组.

: 其上一行 (默认为空行) 作为手工摘要, 但 Stack 主题目前并不在各种列表中显示它.

Hugo 将为创建的新文章自动添加上述的 Front Matter 字段.

创建一篇文章

创建示例

以下的命令必须在博客网站项目的根目录下执行!

1
2
3
4
5


hugo new post/`date "+%Y/%m"`/my-page-bundle-post/index.md

可得到:

Content "/path_to/blog.zhaijia.fun/content/post/2022/02/my-page-bundle-post/index.md" created

这将在 Hugo 的内容目录 /path_to/blog.zhaijia.fun/content 下创建新的 Page Bundle my-page-bundle-post (入口为 index.md), 它的原型是 post, 最终存放于按年份和月份区分的子目录 2022/02 下.

新的文章 (index.md) 创建完毕后, 只需一个 Markdown 编辑器就可开始写作.

Page Bundle 是一种内容组织的方式, 它分为:

Leaf Bundle

Branch Bundle

这里使用第一种, 即 Leaf Bundle, 表现为:

一个自定义名称的子目录 (此处为 my-page-bundle-post).

一个入口 Markdown 文件 (即 index.md).

一个或多个资源文件 (即图片等文件, 这些文件应该被 Markdown 文件引用).

关于 Page Bundle 的更多信息, 请参考此处.

查看该入口文件 (index.md):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: "My Page Bundle Post"
description: ""
date: 2022-02-24T18:49:02+08:00
slug: ""
draft: true
image: ""
tags: []
categories: []
---


<!--more-->

可以看到 Hugo 为其自动添加并初始化了来自默认原型文件 archetypes/default.md 的 Front Matter 字段.

同步至 Github 远程 Repo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


#### 查看所有更新的目录/文件 (包括增删改)
git status

例如:

Untracked files:
 (use "git add <file>..." to include in what will be committed)
 content/

#### 添加更新项
git add content/

#### 提交并进行注释
git commit -m "添加了新文章"

#### 同步至 Github
git push

至此,你的博客网站项目的更新已经同步至 Github (通过 git 命令).

构建静态博客

1
2
3
4


#### 清空 public 目录
rm -fr public/*

hugo --gc --minify

该命令构建静态博客, 并存放在默认的发布目录 public 中.

Cloudflare on 快乐宅家

实战教程: 个人博客问题修正 pt.1

安装 Kapitainsky rclone browser

使用 Kapitainsky rclone browser

配置

创建同步任务

运行同步任务

模拟运行

正式运行

实战教程: 搭建个人博客 pt.3

Backblaze B2 云存储简介

设置 Backblaze B2

注册 B2 账号

绑定手机号

创建存储库 (Bucket)

获取存储库的域名

创建 App Key

设置 Cloudflare 加速

设置 SSL/TLS

设置 DNS

设置 Transform Rules

缩减 URL

自动搜索索引文件

从响应中删除 Backblaze B2 HTTP 标头

通过 ETag HTTP 标头优化缓存效率

创建 HBS 3 同步任务

浏览静态博客

实战教程: 搭建个人博客 pt.2

创建共享文件夹

为共享文件夹启用同步

启用虚拟主机

创建专属虚拟主机

安装 Qsync 客户端

使用 Qsync 客户端

打开主界面

新增配对文件夹

在 QNAP NAS 上查看同步结果

浏览测试环境的静态博客

实战教程: 搭建个人博客 pt.1

创建 Github 远程 Repo

安装 Hugo

创建博客网站项目

安装主题

安装 Stack 主题

基本配置

网站配置 config.yaml

忽略某些目录/文件

启动本地博客网站 (Hugo 调试环境)

首次同步至 Github 远程 Repo

进阶配置

网站配置 config.yaml

网站域名 baseurl

网站名称

首页显示的文章数 paginate

设置为简体中文

网站图标 params.favicon

左侧边栏 params.sidebar

emoji

网站介绍 subtitle

头像 avatar

文章 params.article

协议 license

评论系统 params.comments

是否启用评论 enabled

服务提供商 provider

小部件 params.widgets

主页 homepage

普通页

颜色模式 params.colorScheme

是否显示切换按钮 toggle

默认模式 default

自定义菜单 menu

融合的菜单

给分类 / 标签添加图片和简介

修改原型

创建一篇文章

创建示例

同步至 Github 远程 Repo

构建静态博客