头像

白日梦与诗

林深时见鹿，海蓝深见鲸
本博客搭建指南Obsidian+Quartz+Cloudflare 的封面图

本博客搭建指南Obsidian+Quartz+Cloudflare

14分钟阅读

关联主题:: 博客（2025.08.25）
同级:: 2025-08-14_星期四、今日份博客折腾_2025.08.13
下一级::

博客效果

Vercel部属： https://blog.brmys.top/
Cloudflare部属： https://blog.brmys.cn/ （优先🔥）

起初是刷telegram的时候在少数派频道看到一篇文章，Markdown × 静态博客：图片智能压缩与高效写作发布流 - 少数派，作者使用的是博客很简洁、美观，博客框架是Hugo，主题是hugo-book。

于是我想，可否将我的Obsidian也作为一个博客，使用这个方案？
我现有的博客方案是：Obsidian借助插件「Share to notionnext」发布到Notion，简单编辑后实现博客上线。

但是这个方案并不完美，存在很多缺陷：

  • Obsidian的callout样式无法在Notion呈现；
  • Notionnext的样式有点太花里胡哨了，我想换个风格
  • …

但是昨天 2025-08-13_星期三折腾一晚上也没弄出个结果，今天继续搜索Obsidian博客相关的教程，找到了一个新的方案。

新博客方案

使用Obsidian+Quartz+cloudflare Pages

原作者的教程：美观好用：Obsidian+Quartz+Cloudflare Pages快速博客发布指南 - 毛可多来

这个方案目前看起来很Nice：

  • 可以完美的展示Obsidian自带的双链包括关系图谱；
  • 极简且美观；
  • 可自定义迭代（开源）；

想着，万一有一天，我因为种种原因，需要重建这个博客，但是原作者的教程又失效了怎么办？我肯定会悔恨当初没有好好整理教程。所以我现在就来系统的整理一下这个博客的搭建过程，方便我自己，也方便有需要的小伙伴。

辅助工具

我姑且也算是这方面的小白，在搭建过程中遇到问题，我主要是借助「cursor」和「Dia浏览器」辅助我完成了大部分操作。其中「cursor」还帮助我在原项目基础上进行了升级优化。

使用本方案自备🪜。

克隆仓库与初始化

# 克隆Quartz远程仓库
git clone https://github.com/jackyzha0/quartz.git
 
# 进入目录
cd quartz

我的操作系统是Macos，如果你是windows用户，其实操作基本一致。

image.png
克隆完成以后，安装依赖。
这里请先参考 NPM修改镜像源 中的方法配置，免除国内网络环境可能导致的问题。

# 安装相关依赖
npm i

这一步我一开始执行的时候是有遇到问题的，然后在Dia浏览器和AI进行对话一步步解决了。

image.png

接下来进入quartz初始化步骤。

1、选择初始文档，此处我选择从空目录开始。使用上下键选择选项，回车确认。

npx quartz create

image.png

2、对于文档中链接的处理方式，直接选择默认的最短路径即可。若后续发现链接处理有误，还可以在Quartz根目录的quartz.config.ts文件中修改。

image.png

3、当最后呈现图中的提示时，代表我们的初始化操作已完成。

image.png

内容编辑

所有的博客内容存放路径为：quartz/content
你可以在里面创建文件夹，文件夹会以菜单的方式在网站左侧呈现。
content里默认有一个「index.md」文件，这个是网站的首页展示内容，你可以在里面尽情编辑。

由于是配合Obsidian使用，相比你对Obsidian的属性已经很熟悉了。

在不安装额外插件的情况下，Quartz原生支持的前缀字段包括以下这些：

  • title：页面的标题。如果没有提供，Quartz将使用文件名作为标题。
  • description：用于给搜索引擎爬虫提供的页面概要。
  • permalink：一个自定义的页面 URL，即使文件路径发生变化，该 URL 也会保持不变。
  • aliases：此笔记的其他名称。这是一个字符串列表。
  • tags：此笔记的标签。
  • draft：控制是否发布该笔记。这是在Quartz中使页面私有化的一种方法。
  • date：表示笔记发布日期的字符串。通常使用YYYY-MM-DD格式。

可以配合Obsidian的Template使用。

image.png

Tip

我的这个属性略显复杂，是因为我同时会将内容推送到Notionnext

本地构建Quartz

在quartz文件夹运行终端

cd quartz
npx quartz build --serve
 
# 若要指定运行的端口，可以使用--port
npx quartz build --serve --port 1234

image.png

然后电脑浏览器访问访问 http://localhost:8080 就可以看到网站的全貌了！
你可以往content文件夹里实时添加几个md文件，可能更直观。

Cursor优化升级

我借助cursor做了一些优化，这个后面有机会再展开分享吧…

备份一下自己开发的版本（仅自己查看）

链接：quartz.zip
路径：Nas|300-实用软件_【001-软件安装包】

主要优化有：

  1. 支持封面图，字段为coverurl。为了保持和Notionnext一致；
  2. 左侧菜单栏默认标题均显示为一行；
  3. 添加评论功能，目前只支持giscus，官方版本目前只有一种评论插件，但是应该可以添加其他评论组件的，这个以后再说；
  4. 底部版权标识略改动。
  5. 左上角标题旁边增加圆形头像和底部文字。

配置Quartz

打开quartz根目录文件夹，找到quartz.config.ts即可开始编辑。

  • pageTitle：站点名称。

  • pageTitleSuffix：浏览器标题后缀。例如设置为 - 毛可多来，那么所有浏览器页面标题的末尾就会跟一段这个。

  • locale：指定站点语言。会影响Quartz界面的语言，根据内容面向对象设置，例如中文就可以设置为zh-CN。

  • baseUrl：指定站点根路径。例如我部署博客的根目录为blog.xulihang.work，那么此处就应填入这一串字符；若后期建在github.io等服务上，那么此处还应包含子路径，例如maokeduolai.github.io/quartz。

    此处不应填入任何协议，例如 https://等

    • Quartz尝试尽可能使用相对路径，但为保险起见，指定站点根路径依然是一个好的选择。

  • defaultDateType：页面发布日期的来源。可选依据文件的创建时间、修改时间或发布时间，对应created、modified、published三种。

  • ignorePatterns：按通配符忽略content文件夹中的文件。使用数组指定，例如：["private", "templates", ".obsidian"]。

余下的各项配置可以不进行调整，保留缺省项即可。

同步Github

1、创建一个新仓库
https://github.com/new

image.png

2、创建一个token
Github右上角头像-设置-左下角开发者设置-个人访问令牌（选择经典）

image.png

image.png

生成的令牌记得自己保存后，因为只显示一次的！

3、通过Quartz文件夹进入终端

cd quartz

这里面有个坑，我先提一下。
先查看一下quartz文件夹的隐藏文件，mac电脑的快捷键是「cmd+shift+.」我建议直接删掉文件「.gitignore」。原因是一开始我发现同步到Github的文件缺少了public文件，然后和AI对话发现是因为「.gitignore」里添加了public，折腾了很久才解决这个问题，所以干脆把这个文件删了得了。

# 把 origin 指向新的 blog-memo 仓库
git remote set-url origin xxx

然后依次执行如下命令：

git remote add origin xxxx
git branch -M main
git push -u origin main

这时候可能会让你验证你的Github用户名和Token

问题解决

本地的「.gitignore」文件删除了，但是同步到Github后，Github根目录居然还有「.gitignore」文件，而且本地的public文件没有同步过去…

  1. 在你的项目目录下，终端输入：
git rm .gitignore
git commit -m "删除 .gitignore 文件"
git push

刷新 GitHub 仓库页面，‎.gitignore 就会消失。

  1. 重新同步public文件夹到Github，终端输入：
git add public --force
git commit -m "添加 public 文件夹"
git push

同步Obsidian文件到Github

1、将quartz文件夹移动到Obsidian根目录
2、可以给它改为名字，如Obsidian Blog
3、Obsidian需要发布到博客的内容，移动到contents文件夹里
4、打开Obsidian Blog的终端

然后依次输入：

1、执行第一个命令添加远程仓库:

   git remote add origin <你的仓库URL>

2、将你的笔记文件添加到 Git 暂存区:

    git add .

3、创建一个初始提交：

   git commit -m "初始化"

4、将本地提交推送到远程仓库，并让git自动创建指定的远程分支:

   git push -u origin main

主要是2、3、4，我已经将这几个指令作为模板放入我的Hapigo里了

使用Obsidian Git插件

这个我折腾了很久，可能是我没有搞明白，或者遇到了啥bug没有成功过…所以这个方案等我再研究吧！

Github的项目部署到Cloudflare

1、访问Cloudflare Dashboard注册并登录自己的账号。

2、在左侧菜单列选择Compute(Workers)→Workers和Pages。
image.png

3、选择创建Pages并连接到Git。

image.png

image.png

4、构建命令输入npx quartz build ，输出目录为public

image.png

5、其余不需要做任何改动，点击保存并部署即可！！

6、需要的话，你可以在自定域里绑定域名，由于这部分挺简单的，我就不写了。

之后就是Obsidian编辑完的内容，移动到Contents文件夹，然后终端打开「Obsidian Blog」文件夹，运行命令：

git add .
git commit -m "添加新文章"
git push -u origin main

问题及解决

换行问题——

有个问题很奇怪，Obsidian里编辑的内容
比如24行1.公众号：白日梦与诗
25行2.微信：x1145158939
使用npx quartz build —serve后，http://localhost:8080/显示的内容，就变成了一行1.公众号：白日梦与诗 2.微信：x1145158939

这个问题如何解决。
我希望的结果是
1.公众号：白日梦与诗
2.微信：x1145158939

中间没有空行

而不是1.公众号：白日梦与诗 2.微信：x1145158939

cursor修改了「quartz.config.ts」文件，在第70行增加了

Plugin.HardLineBreaks(),

参考资料：

  1. 美观好用：Obsidian+Quartz+Cloudflare Pages快速博客发布指南 - 毛可多来
  2. 使用Git插件实现Obsidian同步 | 文雅的疯狂的学习笔记
  3. Welcome to Quartz 4
  4. 首页 | Home | 凉糕
  5. Obsidian如何使用Github实现同步_哔哩哔哩_bilibili
  6. Quartz与Enveloppe插件结合助力Obsidian搭建数字花园
  7. 0成本搭建基于github actions+obsidian+quartz的持续化集成博客最佳实践_哔哩哔哩_bilibili

更新日志：

关系图谱

1

反向链接