1. 前言
Hexo 是静态博客,访客是没有办法评论的,如果访客想要和博主交流的话就会比较麻烦。所以添加一个自己的评论系统就会方便很多,夜梦这里推荐使用 twikoo,部署方法多,官方给出的文档也很详细。
之前夜梦写过一篇使用docker部署Twikoo评论系统(Twikoo的部署与使用),需要用到自己的服务器。但既然都用免费的HEXO了,再买服务器就有些浪费了,所以这篇文章主要介绍一下免费的方案——使用Vercel部署Twikoo系统。
官方文档:Vercel部署 | Twikoo 文档
2. 省流版过程
- 申请 MongoDB Atlas 账号,获取 MongoDB 连接字符串
- 申请 Vercel 账号
- 点击以将 Twikoo 一键部署到 Vercel
- 进入 Settings – Environment Variables,添加环境变量
MONGODB_URI
,值为前面记录的数据库连接字符串 - 进入 Settings – Deployment Protection,设置 Vercel Authentication 为 Disabled,并 Save
- 进入 Deployments , 然后在任意一项后面点击更多(三个点) , 然后点击 Redeploy , 最后点击下面的 Redeploy
- 进入 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示
- Vercel Domains(包含
https://
前缀,例如https://xxx.vercel.app
)即为您的环境 id
3. 详细部署过程
3.1 申请 MongoDB Atlas 账号
MongoDB Atlas 是 MongoDB Inc 提供的 MongoDB 数据库托管服务。免费账户可以永久使用 500 MiB 的数据库,足够存储 Twikoo 评论使用。
以下步骤针对新用户,在MongoDB AtLas注册完账号以后,创建免费 MongoDB 数据库。
位置夜梦就选了AWS的HK。
然后创建即可。接下来我们创建数据库用户,点击create database user.
创建完用户以后,就可以close了。接下来在 Network Access 页面点击 Add IP Address 添加网络白名单。因为 Vercel 的出口地址不固定,所以我们这里 Access List Entry 输入 0.0.0.0/0
(允许所有 IP 地址的连接)。
接下来我们在 Database 页面点击 Connect,连接方式选择 Drivers。
将连接字符串中的 <username>:<password>
修改为刚刚创建的数据库 用户名:密码
。到这里,你得到了:
mongodb+srv://yemengstar:你的数据库密码@cluster0.zzsmj.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0
连接字符串包含了连接到 MongoDB 数据库的所有信息,一旦泄露会导致评论被任何人添加、修改、删除,并有可能获取你的 SMTP、图床 token 等信息。请妥善记录这一字符串,之后需要填入到 Twikoo 的部署平台里。
3.2 在vercel中部署twikoo
点击后面的链接将 Twikoo 一键部署到 Vercel:New Project – Vercel
等待vervel部署好(要等待一会儿)。
接下来进入 Settings – Environment Variables,添加环境变量 MONGODB_URI
,值为前面记录的数据库连接字符串,即:
mongodb+srv://yemengstar:你的数据库密码@cluster0.zzsmj.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0
添加完毕点击save,然后进入 Settings – Deployment Protection,设置 Vercel Authentication 为 Disabled,并 Save。
进入 Deployments , 然后在任意一项后面点击更多(三个点) , 然后点击 Redeploy , 最后点击下面的 Redeploy。等待重新部署完毕。
进入项目的 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示。
Vercel Domains(包含 https://
前缀,例如 https://xxx.vercel.app
)即为您的环境 id(envId
)。
4. 接入Hexo
将在Vercel上部署的Twikoo接入Hexo可以看夜梦的这篇文章:HEXO系列教程 | 在Butterfly主题中使用评论系统twikoo