Obsidian 发布方案

1 背景

闲的没事想整一下博客。最开始尝试了 vuepress，后来又尝试了 obsidian digital garden，最后选择了使用 hugo。

为什么最终没有使用 vuepress？

尝试 vuepress 是因为想要通过在修改前人主题基础上学习下前端知识，转变为一个全栈开发者，但发现遇到了一堆问题。最开始找了一个看着功能挺全的主题，为了改成自己喜欢的组件样式，vue 官方文档 + gpt 辅助 + QQ 群询问，最终成功修改了一部分的组件格式，但耗费了很长的时间，而且期间并没有丰富自己的前端知识。再加上这个主题不适配 obsidian 的文档属性格式，最终放弃这种方案。

为什么最终没有使用 digital garden？

最开始尝试 digital garden 是因为它是 Obsidian 的插件，这样就避免了出现文档属性格式不适配的问题。另外支持 Obsidian 双链、知识图谱等功能，让页面、知识之间的联系更密切。本想着基于此，也试着多尝试 Obsidian 双链功能，但发现刻意的双链并没有让自己在浏览笔记的时候变得更舒服。当然，这也可能与自己笔记的出发点不一样，或许双链更适合那种纯写文章、方便进行思维发散的人。而这个插件的缺点嘛，一来相当于自己配置所有的样式（默认主题的样式都不喜欢），二来每个页面都是单纯的文档，不含带其他博客工具那种文档聚合的功能。当然，也可以自己进行文档的聚合，用 dataview 就可以实现。但是 dataview 不支持分页功能，文档多了后，那真的是一长串文档名，看着不舒服。最终放弃这种方案。

为什么选择了 hugo？

当前有挺多基于 obsidian+hugo 的博客，主题都挺好看的，自定义修改也很容易，所以入坑了。就这么简单。

2 Obsidian Git

Obsidian Git 插件在没有折腾博客之前就用了，主要就是为了保存数据、避免文件丢失。具体可以查看 Obsidian 同步&保存方案。

3 Hugo

Hugo 系统上手很容易，首先去根据  快速入门文档  进行初步了解和安装 hugo。

3.1 创建 hugo 项目

hugo new site hugo-site
cd hugi-site

3.2 创建第一篇博客

hugo new posts/first_post.md

hugo 默认的文件中，配置了 draft:true 属性，将 true 改为 false 来保证在页面上能看到文章。

3.3 配置 hugo 主题

配置 hugo 主题有两种方式，一种是直接 clone 主题源代码过来，一种是 git submodule 来配置 hugo 主题。

clone 源代码的方式：

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

git submodule 的方式：

git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt

两种的区别在于，前者的渲染方式在 clone 后就不会变了，除非自己手动更新。而后者在发布到 pages 时，可能每次都会拉取最新的渲染方式。好处是，可能主题开发者修了 bug，渲染效果变好；坏处是，可能主题开发者引入了 bug，博客渲染失败，哈哈哈。

3.4 本地查看博客页面

hugo serve

通过命令启动网站后，访问  http://localhost:1313 就可以看到渲染效果。

3.5 构建网站

hugo

上述命令会生成一个 public 文件，内部包含了个人网站的所有内容，包括静态页面、样式和其他静态资源。之后就是找个服务器存放这些页面就可以了。

4 Cloudflare 构建

看到木木老师的 cloudflare 教程 ，感觉配置简单。再加上 github pages 有时访问卡顿，cloudflare 自带的 DDOS 防御能力，就上了 cloudflare 的船。

左侧边栏选择 “Workers 和 Pages”，在主页面选择 “创建应用程序”，选择 “Pages”，就可以连接 Github 或者 Gitlab 仓库了。

选择自己的账户和个人网站对应的存储库，如下所示：

配置项目名称、github 分支。选择 hugo 进行构建，同时配置环境变量，设置 hugo 的版本。hugo 版本号使用当前最新的就可以，查看方式为终端输入 hugo version 查看。

之后，cloudflare 就会进行构建和部署，然后访问对应的网站就可以看到了。

cloudflare 还会在 github 仓库有新的 commit 后自动触发构建和部署过程。

就是这么简单，可以和 github workflow 说拜拜。

最后补充一下 cloudflare 的 free plan 内容：

• 每月 500 次构建操作（相当于平均每天 commit 数小于 16）
• 一个 pages 项目最多绑定 100 个自定义域名（一般不会用这么多）
• 网页最多包含 20,000 文件。
• 单个 pages 项目不超过 25MB。

其他 cloudflare free plan 场景可以参考：Cloudflare 免费计划详解 :: Rectcircle Blog

5 绑定自己的域名

首先，需要将网站添加到 Cloudflare 中。

左侧边栏选择“网站”，主页面选择“添加站点”，在域名处填写自己的域名。

后面选择 “Free” 计划，点击 “继续”，更新名称服务器。在域名注册的网站，用页面中的两个名称服务器替换当前其他名称服务器。

然后等待一段时间，直到 cloudflare 发送一封邮件告知它检测到该网站的名称服务器已经更换完成。这个时间最长不超过 24 小时，自己当时等了不到 1 小时。

最后，回到 “Pages” 的部署页面，选择 “自定义域”，进行自定义域的设置。