如果你使用过 Hexo、Hugo 或 Astro 的各种主题,一定会面临一个痛点:主题更新与个人内容的冲突。
单仓模式下,每次官方主题发布新功能,你执行 git pull 时,满屏的冲突会让你崩溃,因为你的文章和主题的默认代码混在同一个目录里。而 npm 包模式虽然省心,但如果想修改一下页面的 CSS 布局,就会无从下手。
双仓分离(源码模式 + 独立内容仓) 完美解决了这个问题:
- 主题仓:存放所有的前端源码、组件和样式,随时可以跟随官方更新。
- 内容仓(建议设为私有):只存放你的文章、相册和配置。即便代码开源,私密草稿也不会泄露。
🛠️ 第一步:搭建本地主题源码环境
确保你的电脑上安装了 Node.js (>= 22.12) 和 pnpm,并全局启用了 Git。
打开终端,找一个你喜欢的目录(比如 D:\Code),执行:
# 1. 克隆 Shirone 主题源码git clone https://github.com/LyraVoid/Shirone.git my-blogcd my-blog
# 2. 安装依赖pnpm install此时,不要急着运行 pnpm dev,因为我们需要先配置好内容分离架构。
📦 第二步:建立私有的“内容仓库”
这是整个流程中最容易踩坑的地方。
1. 准备空白私有仓库
不要直接在 GitHub 上点 Fork(因为 GitHub 为了安全,不允许把 Fork 来的仓库直接改成 Private)。
正确做法:
- 在本地找另一个文件夹,克隆官方内容模板:
git clone https://github.com/LyraVoid/Shirone-Content.git my-contentcd my-contentrm -rf .git-
去 GitHub 新建一个完全空白的仓库(比如叫
my-shirone-content),务必勾选 Private。 -
把本地内容推送到你的私有仓库:
git initgit add .git commit -m "init my private content repo"git branch -M maingit remote add origin <你的私有仓库地址>git push -u origin main🔗 第三步:将双仓在本地“缝合”起来
回到你的主题源码目录(D:\Code\my-blog),我们要建立两者的关联。
1. 创建连接配置文件
在根目录新建 shirone.content.json,必须使用 Shirone 官方要求的 Schema 结构:
{ "schemaVersion": 1, "source": { "type": "git", "url": "https://github.com/你的用户名/my-shirone-content.git", "ref": "main" }, "mounts": { "content": "src/content", "data": "src/data", "assets": "src/assets", "public": "public" }, "keep": [], "prune": true}2. 配置本地环境变量
在根目录新建 .env,填入你本地内容仓库的绝对路径(使用正斜杠 /):
CONTENT_DIR="D:/Code/my-content"3. 防止私有内容被误传(非常关键!)
打开根目录的 .gitignore,在末尾追加以下内容。因为 content:sync 会把文章同步到主题目录,如果不忽略,你的私有文章就会被推送到公开的主题仓:
src/content/src/data/.env4. 测试本地预览
在终端执行同步命令,把文章从私仓拉取过来:
pnpm content:syncpnpm dev打开 http://localhost:4321,如果能看到你的文章,说明本地架构已经彻底跑通了。
🚀 第四步:Vercel 部署与终极避坑
本地跑通后,我们把主题仓库推送到 GitHub,并在 Vercel 导入。
Vercel 默认的配置绝对会失败,而且它对 Git 认证字符串的解析有 Bug(很容易报 Invalid username or token)。请放弃在 URL 里拼接变量的想法,直接使用 Vercel 环境变量注入完整地址。
1. 生成细粒度 Token (Fine-grained PAT)
去 GitHub -> Settings -> Developer settings -> Fine-grained personal access tokens。 生成一个 Token:
- Repository access:只选你的私有内容仓
my-shirone-content。 - Permissions:找到
Contents,设置为 Read-only。 复制这个以github_pat_开头的 Token 保存好。
2. 修改 shirone.content.json 读取环境变量
在根目录把 shirone.content.json 的 url 字段改为一个自定义变量名(比如 CONTENT_REPO_URL):
{ "schemaVersion": 1, "source": { "type": "git", "url": "${CONTENT_REPO_URL}", "ref": "main" }, "mounts": { "content": "src/content", "data": "src/data", "assets": "src/assets", "public": "public" }, "keep": [], "prune": true}3. Vercel 后台配置
在 Vercel 项目 Settings -> Environment Variables 中,添加以下环境变量:
-
Key:
CONTENT_REPO_URL -
Value:
https://你的用户名:你的github_pat_Token@github.com/你的用户名/my-shirone-content.git(注意:这里直接填入完整的带 Token 的 URL,Vercel 环境变量是安全的,不会泄露。不要加任何空格) -
Key:
NODE_VERSION -
Value:
22
在 Settings -> Build & Development Settings 中,覆盖 Build Command 为:
pnpm content:sync && pnpm build配置完成后,点击 Redeploy。如果一切顺利,你的博客就上线了!
✍️ 日常写作与更新流程
完成上述所有步骤后,你的日常维护将变得极其简单:
- 打开你的
my-content文件夹。 - 在
content/posts/下新建 Markdown 文件,开始写文章。 - 写完后,执行
git add .->git commit -m "更新文章"->git push。 - 去 Vercel 后台点一下 Redeploy。
💡 踩坑排雷指南
- 报错提示
tags Expected type "array", received "string":检查你 Markdown 头部的 frontmatter,tags必须是数组,例如tags: ["博客", "指南"]。 - 本地预览时没有同步最新文章:每次切回主题仓终端,记得先运行一次
pnpm content:sync。 - Vercel 报
Invalid username or token:不要尝试在 URL 里写${GITHUB_TOKEN}让 Vercel 去解析,100%会失败。必须像上面第四步那样,在环境变量里填完整的带 Token 的 URL。
折腾的尽头是稳定。双仓分离虽然搭建时稍微麻烦了一点,但它赋予了你极大的自由度——你可以随意修改主题源码,同时安全地保护你的文字。祝你的博客越写越好!
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 7 天
部分内容可能已过时