把Obsidian笔记变成博客

写博客最烦的不是写——是写完之后的发布流程。打开后台、粘贴 Markdown、调格式、配封面图、处理图片链接……一套下来，写作的热情早磨没了。

后来我把这个问题彻底干掉了。现在的流程一句话就能说完：在 Obsidian 里写笔记，Git push 一下，博客自动更新。

这篇文章记录这套方案的搭建过程。

核心思路#

传统博客工作流的瓶颈不在「写」，在「发布」—— 作者要同时管内容生产和内容分发两件事。

OCD 方案（Obsidian + Claude Code → Sync）把这两件事解耦了：

你只管写：在 Obsidian 里正常记笔记
系统负责发：Git push 之后，Cloudflare 自动构建部署

不需要登录博客后台，不需要复制粘贴，不需要手动处理图片。笔记写好的那一刻，它就已经是博客文章了。

项目地址： https://github.com/dqtx760/ocdsync

和传统方案对比：

	传统方案	OCD 方案
编辑器	博客后台 / 本地 MD 编辑器	Obsidian
发布	手动登录、粘贴、配图	`git push`
维护	后台 + 文章两套系统	笔记即文章，一套就够了
图片	手动上传图床	本地 `assets/` 随 Git 提交，或继续用图床

技术选型#

选这五个组件不是因为它们「最好」，而是各取所长，组合起来刚好覆盖全流程：

组件	为什么选它
Obsidian	本地 Markdown 编辑器里体验最好的一个，插件生态成熟
VitePress	比 VuePress 更快，原生支持 Obsidian 的 `[[双链]]` 语法
GitHub	免费，Git 推送触发自动部署，不需要额外 CI 配置
Cloudflare Pages	免费额度够用，国内访问速度比 Vercel 快，自带 CDN
Markdown	笔记和博客共享同一套源文件，零转换成本

核心选型判断是 Cloudflare Pages vs Vercel。Vercel 的免费额度对个人博客也够用，但 Cloudflare Pages 在国内的访问延迟更低。如果你的读者主要在海外，Vercel 也没问题。

目录结构#

笔记按主题分目录，VitePress 自动把它们映射成博客页面：

笔记/
├── Claude code/           → /claude-code/
├── Codex/                 → /codex/
├── Obsidian/              → /obsidian/
├── github/                → /github/
└── Wiki/                  → /wiki/

每个文件夹就是一个导航分类，新增笔记直接往对应目录里丢 Markdown 文件就行。

搭建（三步）#

第一步：推送到 GitHub#

仓库初始化，一条龙过去：

git init
git add .
git commit -m "init"
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

第二步：连接 Cloudflare Pages#

打开 Cloudflare Dashboard → Workers 和 Pages → Pages → 连接到 Git，选择刚才的仓库。

构建设置这里有个坑：

配置项	正确填法	注意
框架预设	None	不要选自动检测，会识别错
构建命令	`pnpm run build`
输出目录	`.vitepress/dist`	不是 `dist`，少了前缀构建会失败

第三步：加环境变量#

在 Pages 设置 → 环境变量里加一条：

变量名	值
`NODE_VERSION`	`22`

不加这个 Cloudflare 默认用旧版 Node.js，VitePress 构建会报兼容性错误。

搞定。以后每次 git push，Cloudflare 自动拉取、构建、部署。

日常使用经验#

Frontmatter：文章身份证#

每篇笔记头部必须有的字段：

---
title: 文章标题       # 页面标题和导航栏显示
time: 2026-06-07     # 发布日期
tags:                # 可选，分类和搜索用
  - claude
  - AI工具
---

title 和 time 是必填，缺了 VitePress 会报错。

文件命名#

几条实践出来的规则：

用数字前缀控制排序：01-安装.md、02-配置.md
别在文件名里用 &、！、、 这些特殊字符——URL 编码后很难看
中英文文件名都可以，不需要刻意翻译

图片#

两种方式都行：

图床引用：![描述](https://图床URL)，干净，推荐
本地文件：放 assets/ 目录，随 Git 提交，好处是离线也能看到

我平时用图床（Gitee + PicGo），不用管图片的 Git 管理。

双向链接#

Obsidian 的 [[Wiki链接]] 在 VitePress 里会被解析成可点击链接，这个功能意外地好用——笔记之间的关联关系在博客上自动保留了。唯一要注意的是链接目标页面必须存在，否则控制台会有警告。

本地预览#

写笔记时跑个开发服务器，边写边看效果：

pnpm dev

浏览器打开 http://localhost:5173，所见即所得。

总结#

这套方案我用了有一阵了，最大的感受是：发布摩擦力降到零之后，更新频率自然就上去了。 以前一个月写一篇都嫌麻烦，现在想写就写，push 完就完事。

适合谁：

已经在用 Obsidian 记笔记的人——零额外成本，笔记自动变博客
想搭个人博客但不想折腾后台系统的人——整个方案一个下午就能跑起来
对国内访问速度有要求的人——Cloudflare Pages 的表现还行

不适合谁：

需要复杂博客功能（评论系统、全文搜索、多作者）的人——VitePress 偏轻量，这些不是它的长处
笔记里大量使用 Obsidian 专属插件语法的人——部分语法在 VitePress 里不兼容

如果你已经在用 Obsidian，给这套方案一个下午的时间试试，大概率回不去了。

以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧！想第一时间收到推送，可以给我个星标⭐️～

谢谢你看我的文章，我们，下次再见。 >/ 作者：大强同学 >/ 更多干货，请访问：dqtx.cc

发现新文章