1324 字
7 分钟
告别臃肿!Shirone 博客双仓分离架构与 Vercel 自动化部署保姆级指南

如果你使用过 Hexo、Hugo 或 Astro 的各种主题,一定会面临一个痛点:主题更新与个人内容的冲突。

单仓模式下,每次官方主题发布新功能,你执行 git pull 时,满屏的冲突会让你崩溃,因为你的文章和主题的默认代码混在同一个目录里。而 npm 包模式虽然省心,但如果想修改一下页面的 CSS 布局,就会无从下手。

双仓分离(源码模式 + 独立内容仓) 完美解决了这个问题:

  1. 主题仓:存放所有的前端源码、组件和样式,随时可以跟随官方更新。
  2. 内容仓(建议设为私有):只存放你的文章、相册和配置。即便代码开源,私密草稿也不会泄露。

🛠️ 第一步:搭建本地主题源码环境#

确保你的电脑上安装了 Node.js (>= 22.12) 和 pnpm,并全局启用了 Git。

打开终端,找一个你喜欢的目录(比如 D:\Code),执行:

Terminal window
# 1. 克隆 Shirone 主题源码
git clone https://github.com/LyraVoid/Shirone.git my-blog
cd my-blog
# 2. 安装依赖
pnpm install

此时,不要急着运行 pnpm dev,因为我们需要先配置好内容分离架构。


📦 第二步:建立私有的“内容仓库”#

这是整个流程中最容易踩坑的地方。

1. 准备空白私有仓库#

不要直接在 GitHub 上点 Fork(因为 GitHub 为了安全,不允许把 Fork 来的仓库直接改成 Private)。

正确做法:

  1. 在本地找另一个文件夹,克隆官方内容模板:
Terminal window
git clone https://github.com/LyraVoid/Shirone-Content.git my-content
cd my-content
rm -rf .git
  1. 去 GitHub 新建一个完全空白的仓库(比如叫 my-shirone-content),务必勾选 Private。

  2. 把本地内容推送到你的私有仓库:

Terminal window
git init
git add .
git commit -m "init my private content repo"
git branch -M main
git 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/
.env

4. 测试本地预览#

在终端执行同步命令,把文章从私仓拉取过来:

Terminal window
pnpm content:sync
pnpm 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 为:

Terminal window
pnpm content:sync && pnpm build

配置完成后,点击 Redeploy。如果一切顺利,你的博客就上线了!


✍️ 日常写作与更新流程#

完成上述所有步骤后,你的日常维护将变得极其简单:

  1. 打开你的 my-content 文件夹。
  2. 在 content/posts/ 下新建 Markdown 文件,开始写文章。
  3. 写完后,执行 git add . -> git commit -m "更新文章" -> git push。
  4. 去 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。

折腾的尽头是稳定。双仓分离虽然搭建时稍微麻烦了一点,但它赋予了你极大的自由度——你可以随意修改主题源码,同时安全地保护你的文字。祝你的博客越写越好!

告别臃肿!Shirone 博客双仓分离架构与 Vercel 自动化部署保姆级指南
https://shirone.mysqil.com/posts/shirone-博客搭建/
作者
残梦断忆
发布于
2026-10-24
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取