详细介绍了使用Vercel+MongoDB方案搭建Twikoo评论系统的过程,并实现邮件自动通知回复信息。
配置数据库
申请MongoDB账号
进入MongoDB注册一个账号。
创建MongoDB数据库
申请完毕后进入以下界面,选择最右边的免费共享数据库。
进入创建页面后,其他选项及配置保持默认,区域选择推荐AWS / N. Virginia (us-east-1)
区域选择完毕后,拉到页面底部点击Create
进入下一步。
配置MongoDB数据库
ip设置为0.0.0.0/0
即可:
创建数据库用户,请记住这里的password,后面步骤需要使用到。
回到Clusters页面,点击CONNECT
选择第二项:Connect your applicalion
进入
进入以下页面,请记录你的数据库连接字符串,并将其中的<password>
替换为你创建的数据库用户的密码
。
这项数据库连接字符串将会在部署twikoo时使用到,请保存备用。
部署到Vercel
申请账号
申请一个Vercel账号,如已有Vercel账号可跳过这步。
部署仓库
点击以下链接将Twikoo一键部署到Vercel:
注:如果导入后出现空白界面或部署失败等现象,极大可能是Twikoo的仓库地址更换了,本文未能及时更新,可以自行前往Twikoo文档中获取部署链接:
https://twikoo.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2
在REPOSITORY NAME
处随意输入一个仓库名字即可。
点击Create
进入下一步。
等待Import进度跑完后,点击Visit
进入仓库。
新建环境变量
进入Settings - Environment Variables
页面。
新建一个NAME为MONGODB_URI
;VALUE为你在前面记录到的数据库连接字符串
的环境变量。
再次部署
进入Deployments
界面,点击右边的竖三点,点击Redeploy
检验部署结果
回到Overview
,点击Domains下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 等字样。
Domains下方的链接
即为后面需要使用到的环境id。
至此,Twikoo评论系统部署完成。
实现邮件通知
开通POP3/SMTP服务
以下教程以QQ邮箱为例,其他邮箱可自行摸索,原理大同小异。
前往你的邮件服务提供商,开通POP3/SMTP服务服务。
这里的授权码后面会用到,记得留存。
配置Twikoo
启用Twikoo
此部分教程以Butterfly主题为例说明,其他主题可参阅对应的使用文档。
打开[Blogroot]\_config.butterfly.yml
主题配置文件,
twikoo:
envId:
填写环境id,再在comments-use
中填写Twikoo
即可。
部署到GitHub上后,进入一个有评论区的页面,点击输入框下的齿轮状按钮,设置你的管理密码。
配置邮件通知服务
进入配置管理 - 邮件通知
,按照下方提供的标准填写即可。
SENDER_EMAIL: <你的QQ邮箱地址>
SMTP_SERVICE: <你的邮件服务提供商>
SMTP_HOST: <自定义 SMTP 服务器地址>
SMTP_PORT: <自定义 SMTP 端口>
SMTP_SECURE: <自定义 SMTP 是否使用 TLS>
SMTP_USER: <邮件通知邮箱用户名>(需与SENDER_EMAIL一致)
SMTP_PASS: <邮件通知邮箱密码>(授权码)
可参考我的配置:
测试
拉到最下方点击保存后,打开邮件通知测试
,输入你的邮箱,点击发送测试邮件
,如果能成功收到邮件即说明邮件通知服务设置成功!
参考文章
- Twikoo中文文档:https://twikoo.js.org/
- Twikoo Vercel 部署教程:https://www.bilibili.com/video/BV1Fh411e7ZH
- bufferfly主题的应用和即时推送:https://www.keyiqingxin.cn/317ea436/
特别鸣谢
@小石潭烤鱼,排查两天发现本教程的错处:
原Vercel的导入链接已失效,本教程未及时更新。
现2022年6月5日已替换为新链接。
现2022年8月1日已替换为新链接。