部署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:
http://aciano.top/redirect/?target=https://vercel.com/import/project?template=http://aciano.top/redirect/?target=https://github.com/imaegoo/twikoo/tree/main/src/server/vercel-min

注:如果导入后出现空白界面或部署失败等现象,极大可能是Twikoo的仓库地址更换了,本文未能及时更新,可以自行前往Twikoo文档中获取部署链接:
http://aciano.top/redirect/?target=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日已替换为新链接。