2024-03-13：文章更新了内容，优化去掉了部分不必要的冗余步骤，并将PlanetScale 数据库被 Neon 代替（因为 PlanetScale 官方宣布不再提供免费版数据库）。
本教程提供手把手视频版：哔哩哔哩链接 YouTube 链接
已经2023了，大家在建自己的博客的时候我猜依然还是存在选择困难症，我其实也一样，不太喜欢很多现有的模板或者方案，所以我就利用了 TailwindUI 提供的模板作为自己的脚手架和基底，快速搭建了现在你正看到的个人博客网站。
我发现有越来越多的人喜欢我实现的这套网站方案，也经常有人遇到部署难题，所以我就借此机会来正式写一篇教程，来教你如何克隆我的个人博客，部署成你自己的版本。
开头就介绍其他方案可能有点反人类，但其实现在市面上有好多不同的博客建站方案，选择很多，你不一定非要用我的 😊，在这里我先推荐一些我个人比较看好的完整博客方案：
Honorable mentions：
我没有接受以上任何形式的赞助，咱就是发自内心的推荐。
本站包括以下可完全免费部署的功能：
/）/blog，附带评论系统）/projects）/guestbook）/studio，发布管理文章，编辑项目列表等）/admin，查看评论数据，发送 Newsletter 等）以下是网站必需的第三方服务：
以下是可选的第三方服务：
好，接下来我们正片开始。
首先将我的 GitHub repo 通过 fork 的形式，克隆到你自己的 GitHub 账号里。
然后将此 repo 通过 git clone 的形式拷贝到你的电脑本地文件夹中。
这个时候，确保你本地已经安装了 pnpm。
首先我们需要 cd 到你克隆好的本地目录下运行命令行：
来安装依赖 node_modules 依赖库。
安装完成以后我们需要先配置一下我们的 Sanity 来做我们的后台 CMS（内容管理系统）。
npm create sanity@latest -- --template clean --create-project "Cali Demo" --dataset production，记得把「Cali Demo」替换成你的项目名称回到 Sanity Dashboard 刷新一下页面，如果你看到了：
就说明成功创建了我们的 Sanity project 🎉
点进去查看 project 详情，我们需要复制 Project ID，如下图所示：
在本地项目目录下运行：
下面我们打开编辑器，开始编辑我们的 .env 环境变量文件。
将 Sanity CMS 区域变量填入你自己真实的数值：
为了实现网站的用户登录功能，我们需要使用 Clerk 的帮助。
我们只需：
就完成了 Clerk 的应用注册，非常简单！
然后我们只需点击拷贝按钮，复制一下这个环境变量，如图：
回到我们本地项目的 .env 文件，替换掉 Clerk 区域的两行即可 🎉。
为了实现网站的评论、留言和 Newsletter 等功能，我们需要 Neon 的数据库帮助。
步骤如下：
示例：
点击底下的 Create project 就创建完成 🎉
这个时候，我们需要获取数据库的信息才能让项目正确连接（确保勾上了 Pooled Connection）：
拷贝 DATABASE_URL 到我们本地项目的环境变量即可。
为了部署我们的数据库，我们需要在命令行中运行：
看到 Changes applied 就说明成功了 👍。
数据库就大功告成啦 🎉
为了发送邮件，我们需要借助 Resend 的力量。
以下情况会发送邮件：
SITE_NOTIFICATION_EMAIL_TO所以我们需要配置一下 SITE_NOTIFICATION_EMAIL_TO 为你想接收新留言提醒的邮箱地址，在 .env 里：
我们接下来前往 Resend 后台创建获取我们的 API key 吧：
就这么简单，我们复制一下 API key 到 .env 中去替代 RESEND_API_KEY 即可。
为了给网站添加总访问量和文章的浏览量，我们需要注册一个 Upstash 账号。
步骤：
如图：
复制这两个值，然后我们需要回到 .env 中填入：
最后一步至关重要，我们需要前往 Vercel 进行部署我们的项目，步骤：
如下图所示
我们展开 Environment variables 区域，并回到我们本地的 .env 文件中，复制全部内容（除了最后的 Vercel 的两个变量），回到网页中，点击输入框，按粘贴。
⚠️ 如果你遇到了部署问题（比如 Error: Invalid environment variables，请检查上一步「链接快照图」中的步骤，是不是没有更改代码）最后在设置左侧侧边栏的 Functions 配置，选择上述相同的 region，还是推荐新加坡。
为了发布管理文章，我们只需要访问 /studio 即可前往到我们项目内的 Sanity Studio
第一次访问的话，Sanity 会跳出提示：
我们点击 Continue 即可。
然后根据提示，点击 Add CORS origin。
用一开始登录 Sanity 的账号登录即可。
现在就应该可以看到我们的 Studio 页面了：
（见上图）我们只需点击 1，然后 2，即可发布一篇新文章。
编辑的顺序从上到下，给文章的名字（Title），url 的 slug（英文句子，连字符代替空格），填入类别，发布时间，一张文章图片，和文章描述。
Body 就是我们编辑的文章正文，在我们编辑完以后记得点击下面的 Reading time 可以一键生成阅读时间。
最后全部编辑完成以后就可以点右下角的 Publish 了。
文章发布就是这么简单 👏
其实管理文章跟上述发布的流程差不多，只不过在文章列表里选中你想编辑的文章，然后在右侧编辑以后再次点击 Publish 按钮即可。
记得前往 Sanity 后台的项目设置中，填入你的最终部署的域名，如图：
在 3 填入你的完整域名 URL，比如 https://cali.so，最后位置 4 记得打上勾即可。
为了访问到我们的后台 Admin 页面，我们首先需要回到 Clerk 的后台界面中：
（如果你还没有登录的话，在本地页面记得点击右上角登录一下，或者直接访问本地的 /admin 会重定向到登录页面）
选中我们自己登录的账号详情，我们需要滚动到下面的 Metadata 区域：
点击 Public 旁边的 Edit：
替换内部的 json 变成：
这样就可以标示这名用户可以进入我们的 admin 后台了，保存即可。
现在在本地项目访问 /admin 就可以看到正常的访问了：
要想发布新的 Newsletter 也可以在 admin 里操作，只需点击左侧的 Newsletters 然后点击 New 即可进入创建页面。
Body 输入 markdown 即可。
其实一开始我只是为了给自己的网站去写的每一个功能，用的每一个第三方服务。
写到这里，的确会感觉前置步骤也蛮多的，而且我也是没想到有这么多的人希望用我的仓库来做自己的个人网站，所以最后还是决定写一篇详细的教程手把手教一下如何部署成自己的。
如果还遇到什么问题，欢迎在本篇文章中定位评论或者发送邮件给我到 cali@zolplay.com
后续有时间的话我会加更多功能的，敬请期待！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。