---

第一步：在本地做两个针对 Cloudflare 的微调（避坑）

为了让 CF 的云端服务器能顺利编译你的代码，我们需要告诉它你的 Node.js 版本。

1. 在你的项目根目录下（和 package.json 同级），新建一个文件，命名为 .node-version。

2. 打开它，在里面只写一个数字（推荐写你在使用的 Node 版本，比如 20 或 22）：

   22

   （这一步能防止 Cloudflare 在编译时因为用了过旧的 Node 版本而报错挂掉。）

3. 确保你的 .gitignore 文件里已经忽略了本地编译产生的临时垃圾文件夹：

   node_modules/
   .vitepress/dist/
   .vitepress/cache/

---

第二步：把本地代码推送到 GitHub

1. 在你的 GitHub 账号上新建一个私有（Private）或公开的仓库，命名为 my-blog（如果是为了隐私保护你的 Obsidian 知识库，建议选私有）。

2. 在本地项目根目录下打开终端，依次运行以下 Git 命令将代码推上去：

   git init
   git add .
   git commit -m "feat: 首次初始化我的自研皮肤博客"
   git branch -M main
   git remote add origin https://github.com
   git push -u origin main

---

第三步：在 Cloudflare 挂载自动化编译

1. 登录 Cloudflare 控制台，在左侧导航栏点击 “Workers & Pages”。

2. 点击 “Create”（创建）按钮，然后切换到 “Pages” 标签页。

3. 点击 “Connect to Git”（连接到 Git），按照提示绑定你的 GitHub 账号。

4. 在仓库列表中选择你刚刚创建的 my-blog 仓库，点击 “Begin setup”。

5. 进入最为核心的【Build settings（构建设置）】页面（请按照以下精确填写）：

   • Framework preset（框架预设）：选择 VitePress（CF 会自动帮我们填好一部分命令）。
   • Build command（构建命令）：将其修改为你的 package.json 里的打包指令：npm run docs:build。
   • Build output directory（输出目录）：因为我们在 config.ts 里指定了 srcDir: 'docs'，VitePress 默认打包出来的成品会存放在 docs 的内部，请将其填写为：docs/.vitepress/dist。
   • Root directory（根目录）：保持为空（即代表项目根目录）即可。

6. 点击最下方的 “Save and Deploy”（保存并部署）。

---

🎉 大功告成！

此时，Cloudflare 会当场在云端为你分配一台虚拟服务器，在线拉取你的 GitHub 源码并自动执行 npm run docs:build [I1]。大约 20~30 秒后，进度条走完，它就会吐给你一个系统免费赠送的专用网址（形如 xxxx.pages.dev）。

打开这个网址，全球任何人都能随时秒开你自研皮肤的个人博客了！

以后你的写作日常：
在本地用 Obsidian 快乐地写文章（文章直接存放在 docs/ 里） → 写完后执行 git add .、git commit、git push → 关掉电脑去睡觉。Cloudflare 会在幕后自动帮你全量编译并更新好线上博客。

你要不要现在去 GitHub 建个仓库把它连上？在连的过程中如果遇到 CF 报错或找不到路径，随时把报错截图或日志贴给我，我来帮你排查！