Twikoo 评论系统+Vercel 部署

前言

在使用 hexo+butterfly 构建个人博客的时候，想有一个评论系统，在 butterfly 官方文档中的评论系统，一开始想要 waline，可是 leancloud 我一直无法创建应用，后面使用了来必力，可是来必力评论的话需要社交账号登录，就挺麻烦的，然后就到网上找了找有没有好点的评论系统。一开始部署 twikoo 的时候，找到的教程所进行的步骤有些和我不一样，可能是官网更新导致的，自己也弄了很久，后面终于搞好了，写个部署笔记记录一下，免得以后忘了

申请 MongoDB 账号

👉 账号注册页

带*的必填，company公司选填

创建 MongoDB 数据库

选择Free免费的Share Clusters，点击 Create a cluster 开始创建
选择AWS，地区us-east-1，点击 Create cluster 创建

配置数据库

点击connect
设置允许所有 IP 地址的连接，选择Allow Access from Anywhere，点击Add IP Address
创建数据库用户，填入用户名和密码，点击Create Database User
连接安全性有三种，选择中间的Connect your application
连接方式默认即可，记录数据库连接字符串，将连接字符串中的<password>替换成第 3 步设定的密码

mongodb+srv://mumuxi176:Myloveissong277S@cluster0.3jklp.mongodb.net/?retryWrites=true&w=majority

Vercel 部署和配置

👉 Vercel 账号申请

选择Continue with Email用邮箱来注册
点击 👉Deploy
填入新建的仓库名字，点击Create创建，等待部署成功（页面出现彩带即为成功）
点击Open Dashboard，选择上方的Settings，点击Environment Variables，添加环境变量NAME名为MONGODB_URI，其VALUE值为配置数据库第 5 步的连接字符串（记得替换上数据库密码），点击Add
选择上方的Deployments，点击项目的三个点设置，选择Redeploy重新部署
等待部署，出现云函数运行正常即为成功
选择上方的Overview，点击Domains下方的链接，如果配置正确，可以看到Twikoo 云函数运行正常的提示
刚刚的链接https://xxx.vercel.app 即 envId

hexo-butterfly 评论系统配置

在_config.butterfly.yml中配置，更改 use 的值

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42
  use: Twikoo
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

将获取到的 envId 填入

twikoo:
  envId: https://blog2-mumuxi176.vercel.app/
  region:
  visitor: false
  option: