部署Twikoo评论系统及其邮件推送(Vercel)

详细介绍了使用Vercel+MongoDB方案搭建Twikoo评论系统的过程，并实现邮件自动通知回复信息。

配置数据库

申请MongoDB账号

进入MongoDB注册一个账号。
申请账号.png

创建MongoDB数据库

申请完毕后进入以下界面，选择最右边的免费共享数据库。
选择数据库.png

进入创建页面后，其他选项及配置保持默认，区域选择推荐AWS / N. Virginia (us-east-1)
创建页面.png
区域选择完毕后，拉到页面底部点击Create进入下一步。

配置MongoDB数据库

ip设置为0.0.0.0/0即可：
配置ip.png

创建数据库用户，请记住这里的password，后面步骤需要使用到。
配置用户.png

回到Clusters页面，点击CONNECT
CONNECT1.png

选择第二项：Connect your applicalion进入
CONNECT2.png

进入以下页面，请记录你的数据库连接字符串，并将其中的<password>替换为你创建的数据库用户的密码。
这项数据库连接字符串将会在部署twikoo时使用到，请保存备用。
CONNECT3.png

部署到Vercel

申请账号

申请一个Vercel账号，如已有Vercel账号可跳过这步。

部署仓库

点击以下链接将Twikoo一键部署到Vercel：
https://vercel.com/import/project?template=https://github.com/imaegoo/twikoo/tree/main/src/server/vercel-min

注：如果导入后出现空白界面或部署失败等现象，极大可能是Twikoo的仓库地址更换了，本文未能及时更新，可以自行前往Twikoo文档中获取部署链接：
https://twikoo.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2

在REPOSITORY NAME处随意输入一个仓库名字即可。
创建仓库.png
点击Create进入下一步。
等待Import进度跑完后，点击Visit进入仓库。

新建环境变量

进入Settings - Environment Variables页面。
新建一个NAME为MONGODB_URI;VALUE为你在前面记录到的数据库连接字符串的环境变量。
Setting.png

再次部署

进入Deployments界面，点击右边的竖三点，点击Redeploy
redeploy.png

检验部署结果

回到Overview，点击Domains下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 等字样。
overview.png

Domains下方的链接即为后面需要使用到的环境id。

至此，Twikoo评论系统部署完成。

实现邮件通知

开通POP3/SMTP服务

以下教程以QQ邮箱为例，其他邮箱可自行摸索，原理大同小异。

前往你的邮件服务提供商，开通POP3/SMTP服务服务。

开通服务.png

验证密保.png

授权码.png

这里的授权码后面会用到，记得留存。

配置Twikoo

启用Twikoo

此部分教程以Butterfly主题为例说明，其他主题可参阅对应的使用文档。

打开[Blogroot]\_config.butterfly.yml主题配置文件，

1
2
twikoo:
  envId:

填写环境id，再在comments-use中填写Twikoo即可。
部署到GitHub上后，进入一个有评论区的页面，点击输入框下的齿轮状按钮，设置你的管理密码。

配置邮件通知服务

进入配置管理 - 邮件通知，按照下方提供的标准填写即可。

1
2
3
4
5
6
7
SENDER_EMAIL: <你的QQ邮箱地址>
SMTP_SERVICE: <你的邮件服务提供商>
SMTP_HOST: <自定义 SMTP 服务器地址>
SMTP_PORT: <自定义 SMTP 端口>
SMTP_SECURE: <自定义 SMTP 是否使用 TLS>
SMTP_USER: <邮件通知邮箱用户名>(需与SENDER_EMAIL一致)
SMTP_PASS: <邮件通知邮箱密码>(授权码)

可参考我的配置：
配置1.png
配置2.png

测试

拉到最下方点击保存后，打开邮件通知测试，输入你的邮箱，点击发送测试邮件，如果能成功收到邮件即说明邮件通知服务设置成功！
测试成功.png

参考文章

特别鸣谢

@小石潭烤鱼，排查两天发现本教程的错处：

原Vercel的导入链接已失效，本教程未及时更新。

现2022年6月5日已替换为新链接。

现2022年8月1日已替换为新链接。