零氪快速建博客

type

status

date

slug

summary

我发现有越来越多的人喜欢我实现的这套网站方案，我借此机会来正式写一篇教程，来教你如何克隆我的个人博客，部署成你自己的版本。1.8万次点击15分钟阅读

已经2023了，大家在建自己的博客的时候我猜依然还是存在选择困难症，我其实也一样，不太喜欢很多现有的模板或者方案，所以我就利用了 TailwindUI 提供的模板作为自己的脚手架和基底，快速搭建了现在你正看到的个人博客网站。

我发现有越来越多的人喜欢我实现的这套网站方案，也经常有人遇到部署难题，所以我就借此机会来正式写一篇教程，来教你如何克隆我的个人博客，部署成你自己的版本。

其他方案

开头就介绍其他方案可能有点反人类，但其实现在市面上有好多不同的博客建站方案，选择很多，你不一定非要用我的 😊，在这里我先推荐一些我个人比较看好的完整博客方案：

xLog（偏向零编程或有前端基础的人，可自定义度高，区块链博客）

Hashnode（偏向零编程基础的人，也不涉及编程，编辑体验良好，自带 Newsletter）

Nextra（偏向有前端基础的人，Next.js，Shu Ding 作品，Markdown 支持等，一流的，不用多说了）

Astro（Content 优先的建站方式，挺优雅的，感谢 @egoist 提醒）

Hexo（老牌了，偏微开发基础的人，Node.js, Markdown）

Honorable mentions：

Cusdis（免费给你现有的 Hexo、React、Vue、Svelte 网站加评论系统，Randy 出品的 Disqus 开源替代品）

Umami（给网站加统计，开源免费的 Google Analytics/Vercel Analytics 替代品）

我没有接受以上任何形式的赞助，咱就是发自内心的推荐。

功能一览

本站包括以下可完全免费部署的功能：

主页（/）

博客（/blog，附带评论系统）

项目列表（/projects）

留言墙（/guestbook）

后台 CMS（/studio，发布管理文章，编辑项目列表等）

Admin 后台（/admin，查看评论数据，发送 Newsletter 等）

以下是网站必需的第三方服务：

Vercel（部署服务平台，可白嫖）

Sanity（后台 CMS，可白嫖）

PlanetScale（MySQL 数据库，用来承载评论系统、Newsletter 系统与留言墙，可白嫖）

Resend（Email 发送服务，可白嫖）

Upstash（Redis 服务，涉及文章阅读量，文章表情回复和网站访问量，可白嫖）

以下是可选的第三方服务：

urlbox （用来生成链接预览快照图，$9/月）

项目克隆与本地配置

好，接下来我们正片开始。

首先将我的 GitHub repo 通过 fork 的形式，克隆到你自己的 GitHub 账号里。

然后将此 repo 通过 git clone 的形式拷贝到你的电脑本地文件夹中。

这个时候，确保你本地已经安装了 pnpm。

首先我们需要 cd 到你克隆好的本地目录下运行命令行：


1pnpm i

来安装依赖 node_modules 依赖库。

Sanity 内容管理

安装完成以后我们需要先配置一下我们的 Sanity 来做我们的后台 CMS（内容管理系统）。

前往 sanity.io/manage 登录

回到命令行，运行 npm create sanity@latest -- --template clean --create-project "Cali Demo" --dataset production，记得把「Cali Demo」替换成你的项目名称

按 Ctrl + C 退出命令即可

回到 Sanity Dashboard 刷新一下页面，如果你看到了：

就说明成功创建了我们的 Sanity project 🎉

点进去查看 project 详情，我们需要复制 Project ID，如下图所示：

在本地项目目录下运行：


1cp .env.example .env

下面我们打开编辑器，开始编辑我们的 .env 环境变量文件。

将 Sanity CMS 区域变量填入你自己真实的数值：

.env


1NEXT_PUBLIC_SANITY_DATASET="production"
2NEXT_PUBLIC_SANITY_PROJECT_ID="你的 project ID"

Clerk 用户鉴权

为了实现网站的用户登录功能，我们需要使用 Clerk 的帮助。

我们只需：

前往 clerk.com

点击右上角 Sign up 注册

在 Dashboard 页面点击 Add application

填入你的项目名字，选择你想打开的鉴权机制（邮箱，Google，GitHub 等）

就完成了 Clerk 的应用注册，非常简单！

然后我们只需点击拷贝按钮，复制一下这个环境变量，如图：

回到我们本地项目的 .env 文件，替换掉 Clerk 区域的两行即可 🎉。

PlanetScale 数据库

为了实现网站的评论、留言和 Newsletter 等功能，我们需要 PlanetScale 的数据库帮助。

步骤如下：

前往 PlanetScale 官网

点击右上角 Sign in 或 Get started

根据后台步骤提示创建一个 database

选择 Hobby（白嫖版）

输入数据库名称

选择 region 的时候需要注意，你现在选择的区域要在等会配置 Vercel 的时候选择对应的 region，个人推荐「新加坡」

示例：

点击底下的 Create database 就创建完成 🎉

这个时候，我们需要获取数据库的信息才能让项目正确连接：

点击 connect to your database 以后会让你创建一个 password，直接点创建即可。

在 Connect with 的下拉菜单中选择「@planetscale/database」

拷贝 .env 到我们本地项目的环境变量即可。

但我们还需要一个变量是 DATABASE_URL ，我们需要在下拉菜单再次选择成 Prisma 即可获取到一个 URL，同样复制粘贴到项目内的 .env 中。

注意：我们需要把 DATABASE_URL 最后的 ?sslaccept=strict 删除掉，替换成 ?ssl={"rejectUnauthorized":true}

现在你的 .env 应该看起来跟我的差不多了：

示例 .env 文件

为了部署我们的数据库，我们需要在命令行中运行：


1pnpm db:push

看到 Changes applied 就说明成功了 👍。

回到 PlanetScale 里面查看你的 main branch，图示：

数据库就大功告成啦 🎉

Resend 邮件发送

为了发送邮件，我们需要借助 Resend 的力量。

以下情况会发送邮件：

当有人订阅 Newsletter 时，我们发送订阅确认的邮件

当有人回复他人评论时，我们发送邮件给被回复者

当有人在留言墙留言时，我们发送邮件给SITE_NOTIFICATION_EMAIL_TO

所以我们需要配置一下 SITE_NOTIFICATION_EMAIL_TO 为你想接收新留言提醒的邮箱地址，在 .env 里：

.env


1SITE_NOTIFICATION_EMAIL_TO="[email protected]"

我们接下来前往 Resend 后台创建获取我们的 API key 吧：

前往 Resend 官网

点击 Add an API Key

就这么简单，我们复制一下 API key 到 .env 中去替代 RESEND_API_KEY 即可。

Upstash 访问统计& API 限流

为了给网站添加总访问量和文章的浏览量，我们需要注册一个 Upstash 账号。

步骤：

前往 Upstash 官网

点击 Create database

填入名称，Type 选 Global，Primary region 选「PlanetScale 选择的区域」，依然推荐新加坡

找到 REST API 区域

如图：

复制这两个值，然后我们需要回到 .env 中填入：

.env


1UPSTASH_REDIS_REST_TOKEN="****"
2UPSTASH_REDIS_REST_URL="https://***.upstash.io"

链接预览快照图

如果你也想有链接预览快照图的话，可以前往 urlbox.io 注册账号，并填入你的 API URL 到环境变量 LINK_PREVIEW_API_BASE_URL 中

因为是一个必须收费的服务，这里不推荐所有人使用，不过如果你愿意花钱的话也没问题。

⚠️ 注意：如果你不需要这个链接快照图功能的话，请编辑项目中的components/links/PeekabooLink.tsx 第15行，改成 false，才能确保下一步部署的正常。

Vercel 部署

最后一步至关重要，我们需要前往 Vercel 进行部署我们的项目，步骤：

前往 Vercel 官网

在 Dashboard 里选择 Add new project

从 GitHub 导入你 fork 后的仓库

如下图所示

我们展开 Environment variables 区域，并回到我们本地的 .env 文件中，复制全部内容（除了最后的 Vercel 的两个变量），回到网页中，点击输入框，按粘贴。

⚠️ 如果你遇到了部署问题（比如 Error: Invalid environment variables，请检查上一步「链接快照图」中的步骤，是不是没有更改代码）

然后我们在 Vercel 项目的标签中选择 Storage，并创建一个 Edge Config 实体，如图：

这么做的目的是我们可以将一些站点配置存储在 Edge Config 中，从而达到跟仓库的代码解耦脱离出来。

然后我们可以填入以下 json 到我们刚创建好的 Edge Config Store 中：

Edge Config Store


1{
2  "redirects": [
3    {
4      "source": "/twitter",
5      "destination": "https://twitter.com/thecalicastle",
6      "permanent": true
7    },
8    {
9      "source": "/github",
10      "destination": "https://github.com/CaliCastle",
11      "permanent": true
12    },
13    {
14      "source": "/bilibili",
15      "destination": "https://space.bilibili.com/8350251",
16      "permanent": true
17    }
18  ],
19  "blocked_ips": []
20}