使用Vercel部署twikoo并解决被墙的问题

前言

还是因为服务器过期的原因,之前部署的Twikoo已经不能用了,于是我尝试使用Vercel部署Twikoo。

部署过程

申请 MongoDB 账号并创建数据库

首先进入MongoDB官网创建一个账号,可以使用github直接登录。

登录后进入界面,选择最右边的免费共享数据库 -> aws -> N.virginia(us-wast-1) -> create。

image-20240102213618313

设置用户名和密码并记住,后面需要使用。

image-20240102225133977

ip设置 0.0.0.0/0

image-20240102225336172

然后会自动跳转到首页,点击connect

image-20240102225528973

链接应用

image-20240102225803429

记住第 3 条的代码,后续部署需要用到,且使用时需要在相应位置替换为之前设置的用户名和密码

image-20240102230239471

1
mongodb+srv://<username>:<password>@twikoo.odlv1qd.mongodb.net/?retryWrites=true&w=majority

部署到Vercel

首先先注册一个Vercel账号,同样可以使用github登录。

点击以下链接一键部署,取名为twikoo

image-20240102231249481

如果点击链接后出现空白页面或者导入失败的现象,大概率是twikoo仓库地址发生了改变,可以去官网获取最新部署链接。

点击进入任务界面

image-20240102232905886

新建变量,key为MONGODB_URI,value为之前保存的代码,记得替换用户名和密码

image-20240102233339749

重新部署

image-20240102233532365

检验部署成果,显示 云函数运行正常 表示成功部署

image-20240102233804988

实现邮件通知

这个功能可开可不开,看个人情况。

以qq邮箱为例,其它邮箱大同小异,都是在设置中开通POP3/SMTP服务,根据提示一步步开通即可。

image-20240102234342404

解决Vercel被墙无法留言的问题

登录域名解析平台,我这里使用的是阿里云,进入域名解析工作台 -> 添加域名,格式为twikoo+你的域名,然后点击 TXT授权校验。

image-20240103151547092

保存好弹出信息,之后需要用,先不要验证

image-20240103151813017

进入解析设置界面,点击添加记录,将上一步保存的值填入

image-20240103152211824

然后返回进行验证

image-20240103152449148

进入新增域名的域名解析界面,添加两条记录

主机记录 记录类型 解析请求来源(isp) 记录值 TTL
twikoo CNAME 默认 cname.vercel-dns.com 10分钟
@ A 默认 76.76.21.21 10分钟

为Vercel 项目添加域名

image-20240103153336901

在博客中配置Twikoo

进入博客后台,评论系统选择使用Twikoo

1
2
3
4
5
6
7
8
9
10
comments:
# Up to two comments system, the first will be shown as default
# Choose: Valine/Waline/Twikoo/Artalk
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: true
count: true # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page

添加环境ID

1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId: https://twikoo.smiletoc.top/
region:
visitor: false
option:

重新编译后测试一下

image-20240103154541598

可以在设置中实现邮件通知,还有其它设置头像、设置站长等功能,具体请看官方文档。

Versel 版本不符升级配置

进入 Vercel 仪表板 - twikoo - > Settings - Git
点击 Connected Git Repository 下方的仓库地址
打开 package.json,点击编辑
"twikoo-vercel": "latest" 其中的 latest 修改为最新版本号。点击 Commit changes
部署会自动触发,可以回到 Vercel 仪表板,查看部署状态