如何复刻本网站，零氪快速建博客

原文来自 Cali Castle，本文在原文基础上进行了整理和补充。

---

其他方案推荐

如果你不想克隆这个项目，市面上还有不少优秀的建站方案：

• xLog：偏向零编程或有前端基础，区块链博客
• Hashnode：偏向零编程，自带 Newsletter
• Nextra：偏向有前端基础，基于 Next.js
• Astro：Content 优先，优雅
• Hexo：老牌，基于 Node.js 和 Markdown
• Honorable mentions: Cusdis（评论）, Umami（统计）, WordPress

---

功能一览

本站包含以下核心功能：

• 主页、博客（带评论）、项目列表、留言墙
• 后台 CMS（/studio）：用于发布和管理文章
• Admin 后台（/admin）：查看评论、发送 Newsletter

---

核心第三方服务（均可免费使用）

服务	用途
Vercel	部署服务平台
Sanity	后台 CMS（原版使用，本站已改用 Vault 本地 Markdown 引擎替代）
Neon	PostgreSQL 数据库（评论、Newsletter、留言墙）
Resend	邮件发送服务
Upstash	Redis 服务（阅读量、表情回复、访问统计）

---

第一步：克隆代码

1. Fork 作者的 GitHub 仓库到自己的账号
2. Git clone 到本地
3. 确保本地安装了 pnpm
4. 运行 pnpm install 安装依赖

---

第二步：Sanity 内容管理配置

1. 前往 sanity.io/manage 登录
2. 运行命令：

npm create sanity@latest -- --template clean --create-project "你的项目名" --dataset production

3. 退出命令，刷新 Dashboard 确认创建成功
4. 复制 Project ID
5. 编辑本地 .env 文件，填入 Sanity 相关变量

---

第三步：Clerk 用户鉴权配置

1. 前往 clerk.com 注册
2. 点击 Add application，填写项目名并选择鉴权方式（邮箱、Google 等）
3. 复制环境变量（API Key 等）
4. 回到本地 .env 文件，替换 Clerk 区域的变量

---

第四步：Neon (PostgreSQL) 数据库配置

1. 前往 Neon 官网 登录并创建数据库
2. 选择 Region（推荐新加坡，需与后续 Vercel Region 一致）
3. 获取 DATABASE_URL（确保勾选 Pooled Connection）并填入 .env
4. 运行命令部署数据库：

pnpm db:push

---

第五步：Resend 邮件发送配置

1. 前往 Resend 官网 注册
2. 创建 API Key
3. 复制 API Key 到 .env 中的 RESEND_API_KEY
4. 配置 SITE_NOTIFICATION_EMAIL_TO 为接收通知的邮箱

---

第六步：Upstash 访问统计 & API 限流配置

1. 前往 Upstash 官网 登录
2. 创建 Database（Type 选 Global，Region 选新加坡）
3. 找到 REST API 区域，复制 UPSTASH_REDIS_REST_URL 和 UPSTASH_REDIS_REST_TOKEN
4. 填入本地 .env 文件

---

Vercel 部署

1. 前往 Vercel 官网
2. Add new project，从 GitHub 导入 fork 的仓库
3. 在 Environment variables 区域，粘贴本地 .env 中的所有内容（除 Vercel 自带的变量外）
4. 在 Functions 设置中选择 Region（推荐新加坡）

---

发布和管理文章

⚠️ 注意：原版 cali.so 使用 Sanity Studio（/studio）管理文章，但本站已改造为 Vault 引擎，直接读取本地 Markdown 文件发布，无需 CMS。

本站的发布方式（Vault 引擎）

1. 在 vault/writing/ 目录下创建 Markdown 文件，命名规范：YYYYMMDD_文章标题.md
2. 添加 frontmatter 头部：

---
title: "文章标题"
publish_slug: "english-slug"          # 自定义 URL slug（建议英文 kebab-case）
publish_description: "一句话描述"
publish_cover: "cover.png"            # 封面图（文件名或 URL，可选）
publish_category: "AI"                # 主分类
created: "2026-03-19 10:00:00"        # 发布时间
tags: ["ai", "engineering"]           # 标签列表
mood: "happy"                         # 文章情绪：happy/sad/neutral（可选）
---

3. 编写 Markdown 正文（支持 GFM 语法、代码高亮、Mermaid 图表）
4. 推送到 GitHub，Vercel 自动部署后即发布
5. 本地开发时 Next.js 会自动热更新，无需重启

核心引擎：lib/vault.ts

• 基于 gray-matter 解析 frontmatter + reading-time 自动计算阅读时长
• slug 生成规则：优先使用 publish_slug → 否则取文件名去掉日期前缀
• 封面图：优先 publish_cover → 自动匹配 /covers/{slug}.png → 默认渐变色
• 文章按 created 倒序排列

原版方式（Sanity Studio）

如果你保留了原版的 Sanity 集成：

• 访问 /studio 进入 Sanity Studio
• 点击 Post → New Post，填写 Title, slug, category 等信息，最后点击 Publish
• 需在 Sanity 后台的项目设置中添加 CORS origin 和生产域名

---

后台 Admin 配置

1. 访问 Clerk 后台，找到登录用户的 Metadata
2. 编辑 Public Metadata 为：

{
  "role": "admin"
}

3. 保存后，访问 /admin 即可进入后台（查看评论、管理 Newsletter 等）

---

发布 Newsletter

• 在 /admin 后台的 Newsletters 栏目点击 New
• Body 输入 Markdown 格式内容即可创建

---

总结

虽然前置步骤较多，但所有第三方服务都提供免费额度，完全零成本就能搭建一个功能完善的个人博客。核心技术栈：

• 框架：Next.js + React
• 内容引擎：Vault（本地 Markdown 文件，替代 Sanity CMS）
• 数据库：Neon PostgreSQL（评论、Newsletter）
• 部署：Vercel
• 缓存：Upstash Redis（阅读量、Reactions）
• 邮件：Resend
• 鉴权：Clerk