使用Vercel部署Twikoo评论系统

一、前言

最近想给站点加上评论系统，准备使用Vercel+免费的Mongodb cloud的形式来部署Twikoo，这样又省了1笔钱简单快捷，这里就记录下Twikoo的搭建过程

Twikoo官方文档：Twikoo 文档

Anzhiyu主题文档：安知鱼主题官方文档

二、准备工作

  • 注册MongoDB
  • 注册Vercel
  • 给twikoo顺手点一个Star
  • 域名（解决Vercel部署之后被墙的问题）

三、步骤

3.1 MongoDB设置

登录MongoDB之后， 点击Create 创建 deployment

选择免费的M0数据库，服务提供商选择亚马逊云（AWS），地区选择 Singapore

创建数据库用户与密码，点击QuickStart，填入Username和Password后Create USer

设置ip白名单，点击Network Access，选择 ADD IP ADDRESS

如果是Vercel方式部署的Twikoo需要将MongoDB设置为全网可访问的状态，即添加0.0.0.0/0：

https://img.picgo.net/2024/08/22/imaged19136767592adfb.png

ps：具体原因参考：How can I allowlist IP addresses for a deployment?

返回Cluster，点击Connect

选择Drivers

记录下这串神秘代码连接操作符

3.2 Vercel部署Twikoo

点击下方的按钮，一键部署到Vercel

Deploy

配置环境变量，进入部署的twikoo项目之后，点击Settings -> Environment Variables,添加MONGODB_URI的KEY，Value为之前的连接操作符（注意，需要将其中的password替换成真实的密码）

重新部署Twikoo项目，选择Deployment，点击Redeploy

等待项目重新部署，进入Project界面，Twikoo成功部署之后应显示”Twikoo 云函数运行正常”

为Twikoo增加一个域名，具体可参考：解决Vercel域名被污染的问题

3.3 Anzhiyu主题配置

打开_config_anzhiyu.yml，找到twikoo，envId改为你的twikoo地址

Ps:（可选，不影响使用）由于anzhiyu自带的twikoo前端比较旧，所以需要修改twikoo的前端js，找到CDN -> twikoo

1
https://s4.zstatic.net/ajax/libs/twikoo/对应后端的版本号/twikoo.all.min.js

Ps：具体的页面开启评论系统参考anzhiyu官方文档

四、最后

加上评论系统之后，站点的功能也是更加完善了，后面考虑一下加一些更好玩的东西