零成本通过Vercel部署Hexo博客Twikoo评论系统


Hexo作为静态博客，访客无法直接评论，为解决这一问题，添加一个合适的评论系统很有必要。推荐使用Twikoo，它部署方式多样，Twikoo官方文档也极为详尽，便于操作。

一、创建MongoDB数据库

MongoDB Atlas是MongoDB Inc.推出的一项便捷的MongoDB数据库托管服务。其免费套餐能够让用户永久享有512MB的数据库空间，对于存储Twikoo评论数据而言，这个容量完全足够。

  1. 注册MongDB账号
    在MongoDB Atlas注册账号：https://www.mongodb.com/cloud/atlas/register

  2. 购买免费Free套餐
    选择**香港（Hong Kong）**就可以了，运营商AWS、Azure、Google随便，香港能选择就行，然后创建即可。

  3. 创建数据库用户
    在Database Access页面点击Add New Database User（create database user）创建数据库用户。

  4. 添加Network Access
    进入Network Access页面，点击Add IP Address来添加网络白名单。由于 Vercel 的出口地址并非固定不变，为确保能够正常连接，我们需要在Access List Entry中输入0.0.0.0/0，以此来允许所有 IP 地址进行连接。

  5. 获取数据库连接字符串
    在Clusters标签页点击Connect。连接方式选择Drivers

    选择Driver为Node.js，Version选择6.7 or later；之后得到一串字符串，复制这个字符串。

    [!important]
    连接字符串至关重要，它囊括了连接至MongoDB数据库的全部必要信息。一旦该字符串不慎泄露，后果将十分严重。因此，务必妥善保管好这一连接字符串，在后续对Twikoo进行部署时，还需要将其准确填入到相应的部署平台中。

    下面只是例子，必须复制你平台获取的，这个例子无效。

    1
    mongodb+srv://....:你的数据库密码@cluster0.zzsmj.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0

    复制数据库连接字符串之后，将连接字符串中的<db_password>修改为你创建的数据库密码，修改后的就是之后要用到的。到这里MongDB的就完成了。

二、Vercel部署Twikoo

  1. 注册Vercel账号
    进入Vercel官网https://vercel.com 注册账号；Vercel的注册要求比较严苛，你可以选择Github注册，也可以邮箱注册，如果注册失败那就是你的邮箱不符合要求。

    [!caution]
    国内邮箱比如qq.com是不行的，解决办法是更改为Github的用户名 或 直接用国际邮箱注册，推荐用@outlook.com，按要求注册就行了。

  2. 一键部署Twikoo
    注册成功并且登录后，点击一键部署Twikoo。这里仓库不用提前准备，但必须是不存在的仓库名才行。

  3. 配置环境变量
    选择新建的Twikoo项目，进入Settings -> Environment Variables，添加环境变量MONGODB_URI，值为前面的MongoDB数据库连接字符串（注意替换<db_password>）。

  4. Redeploy
    进入Deployments标签页，进行Redeploy，等待重新部署完毕。
    重新部署完成后，进入Project，查看Overview或者点击visit，看见Twikoo云函数运行正常的提示，说明部署成功。
    Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app ）即为环境ID，也就是envId


  5. 绑定自定义域名

  • 在自有域名添加解析，选择CNAME类型转发，记录值填写为：cname.vercel-dns.com
  • 然后在第四步的云函数运行正常页面中点击右侧的Domains菜单项，输入你自己定义的域名点击Add按钮即可。

    [!important]
    绑定自定义域名这一步一定要做，直接用Vercel默认的域名太慢了，绑定成功后，访问自定义Domains，看到如下代码，说明成功。

    1
    {"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.41"}

三、解决邮箱推送异常

在Vercel部署Twikoo后收不到评论邮件通知问题，这个我也遇到过，原因在于新部署的Vercel环境默认启用了Vercel Authentication，该功能会导致 Twikoo 邮件通知失败。
解决办法就是进入Settings - Deployment Protection，设置Vercel Authentication为Disabled，并 Save。

四、Hexo配置

每个主题都不一样，但也都大差不差，将主题的_config.yml文件评论类型选择twikoo，然后true开启，配置你的envId就可以了，具体情况结合参考所使用主题文件的文档吧。

1
2
3
4
5
# Twikoo
twikoo:
  envId:  # 填入你绑定的自定义域名就可以了
  region: 
  path:

至此，就全部完成了借助 Vercel 部署 Twikoo 评论系统以及在 MongoDB Atlas 搭建数据库的流程。这一系列步骤虽然有些繁琐，但当看到评论系统能够顺利运行时，我们的一切努力便有了意义。