Hexo 博客集成 Twikoo 评论系统｜基于 Vercel 的免费部署实践

Twikoo 是一款简洁、安全且免费的静态网站评论系统，通过将其与 Vercel 的免费部署服务相结合，可以为你的 Hexo 博客轻松添加一个功能丰富的互动评论区。本教程将详细介绍如何一步步完成部署和配置。

准备工作

在开始之前，请确保你已具备以下条件：

  • 一个 Hexo 博客： 并已熟悉其基本操作。
  • 一个 GitHub 账户： 用于登录 Vercel 和 MongoDB。
  • 一个 Vercel 账户： 用于部署 Twikoo 后端服务。
  • 一个 MongoDB 账户： 用于存储评论数据。

部署流程

创建 MongoDB 数据库

Twikoo 需要一个数据库来存储评论数据，MongoDB Atlas 提供了免费的共享数据库，非常适合个人博客使用。

  1. 注册并登录 MongoDB Atlas： 访问 MongoDB 官网并创建一个账户，你也可以选择使用 Google 账户直接登录。
  2. 创建免费数据库： 登录后，选择创建一个免费的（Free）共享数据库（Shared Clusters）。在云服务商（Cloud Provider）中推荐选择 AWS，区域（Region）可选择 Oregon (us-west-2)。
  3. 配置数据库用户： 在 “Database Access” 选项卡下，创建一个新的数据库用户，并记录下你设置的用户名和密码，稍后会用到。

  1. 配置网络访问： 在 “Network Access” 选项卡下，添加一个新的 IP 地址。为了确保 Vercel 能够访问你的数据库，请选择 “Allow Access from Anywhere”（允许任何 IP 地址访问），系统会自动填入 0.0.0.0/0。

  1. 获取数据库连接字符串： 返回 “Database” 页面，点击 “Connect”，选择 “Drivers”。系统会生成一个连接字符串，请将其复制下来，并将 <password> 部分替换为你刚刚创建的数据库密码。

使用 Vercel 一键部署 Twikoo

Vercel 平台可以让你轻松地部署 Twikoo 的后端云函数。

  1. 一键部署： 点击 Twikoo 官方提供的一键部署链接，它会自动引导你到 Vercel 平台并创建一个新的项目。
  2. 配置环境变量： 在 Vercel 创建项目时，会要求你配置环境变量。 在这里，你需要添加一个名为 MONGODB_URI 的环境变量，其值就是你在第一步中获取并修改好的 MongoDB 连接字符串。
  3. 完成部署： 点击部署后，Vercel 会自动拉取 Twikoo 的代码并完成部署。部署成功后，Vercel 会为你生成一个域名，例如 your-project-name.vercel.app。这个地址就是你的环境 ID (envId)，请务必记录下来。
  4. 自定义域名： 因为众所周知的原因，.vercel.app这个后缀的域名在国内几乎无法访问，所以我们需要绑定一个属于自己的自定义域名，如果你还不会，可以参考我的这篇博文：Vercel 托管站点提速技巧｜使用优选域名绕过卡慢节点，全面提升国内访问速度

在 Hexo 主题中配置 Twikoo

部署好后端服务后，你需要在你的 Hexo 博客中进行前端配置，以便加载评论框。

几乎所有现代 Hexo 主题都支持自定义评论系统。而这些评论系统中几乎都有Twikoo。这里的关键是找到主题配置文件中关于自定义评论系统的设置项。

官方文档中列出了常见的 Hexo 主题配置：在 Hexo 中使用

  1. 修改主题配置文件： 打开你 Hexo 博客项目中的主题配置文件（通常是 _config.theme.yml 文件）。
  2. 找到评论配置项： 定位到主题中关于评论系统的配置部分，不同的主题可能会有差异。以 hexo-theme-anzhiyu 主题为例。你需要找到 comments 配置项。
  3. 启用并配置 Twikoo：
    • 将评论系统 use 设置为 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 # Twikoo/Waline
        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: false # Display comment count in post's top_img
        card_post_count: false # Display comment count in Home Page
    • 填写 envId，其值就是你在 Vercel 部署成功后获得的地址 (例如：https://xxx.vercel.app/)，如果你自定义了域名那就是你的自定义域名(前面记着要填写https://)
      1
      2
      3
      4
      5
      6
      7
      # Twikoo
      # https://github.com/imaegoo/twikoo
      twikoo:
        envId: https://xxx.vercel.app/
        region:
        visitor: false
        option:
    • 根据你的主题文档，可能还会有其他可配置项，例如是否显示访客信息等，你可以按需进行配置。

第四步：重新部署 Hexo 博客

完成以上配置后，保存你的主题配置文件，然后执行 Hexo 的标准部署命令，将你的博客重新生成并部署到线上。

1
2
3
hexo clean
hexo g
hexo d

部署完成后，打开你博客的任意一篇文章，如果配置正确，你应该就能在页面底部看到 Twikoo 评论框了。

初始化管理面板

首次加载评论区时，点击评论框右下角的齿轮图标，可以设置一个管理密码。 之后你便可以通过这个密码登录管理面板，进行评论管理、邮件通知设置等高级配置。

至此，你已经成功地为你的 Hexo 博客集成了 Twikoo 评论系统，并利用 Vercel 实现了免费的后端部署。