使用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 仪表板，查看部署状态