Twikoo评论系统部署

Twikoo是一个简洁、安全、免费的静态网站评论系统
GitHub：https://github.com/twikoojs/twikoo（2.2k⭐）

前言

静态博客（如 Hexo、Hugo、Astro 等）不像传统的动态博客（如 WordPress）那样自带数据库和评论系统。为了让静态博客具备互动功能，目前主流的几种解决方式是：

• 基于 GitHub API 的评论系统：如 Giscus、Utterances、Gitalk 等。
• 基于云开发 / Serverless 的评论系统：如 Twikoo、Waline 等
• 基于第三方全托管的评论系统：如 Disqus、来必力 (LiVere) 等

下面是这几种方式的横向对比：

综合对比下来，我选择了 Twikoo ，我看中了它可以：匿名评论、UI好看、数据自主掌握。虽然需要一点点的动手能力（实际上也没那么难啦），但个人认为也是值得的，毕竟鱼与熊掌不可兼得。

部署流程

先来了解一下这种方式——基于云开发 / Serverless——是如何工作的，这类评论系统的部署过程大同小异，由三部分组成：

• 静态前端：即博客前端，负责渲染评论
• 数据库：负责存储评论数据
• 云函数：负责 Twikoo 后端服务

基本流程是，博客页打开 -> 前端发起请求 -> 唤起云函数 -> 云函数从数据库拉取数据 -> 返回数据 -> 前端渲染，如图

是不是还挺好理解的？得益于一些大厂提供的良心服务，我们才能把这套评论系统0成本部署起来，下面开始正式部署。

配置数据库

注册MongoDB

前往官网注册，步骤略

新建数据库用户

点击“Add New Database User"进行添加

选择认证方式、设置用户名密码角色后，完成用户添加

配置ip白名单

点击“Add IP Address”

‍

设置任意ip可访问

创建数据库

点击“Build a Cluster”创建数据库

选择免费层级后，填写数据库名称，选择地域后进入下一步

选择“Drivers”

Driver选择Node.js，复制数据库连接字符串，完成数据库创建

配置云函数

注册Vercel

前往官网注册，尽量使用gmail注册，步骤略

部署

点击链接进行部署，之后选择 “GitHub”

添加GitHub账户

之后会弹出授权窗口，我这里没什么敏感信息，直接允许 Vercel 访问所有仓库了，如果你有其他需求，可以指定仓库

之后还需要一次 GitHub 认证，认证后，会显示下图，表示Vercel授权完毕

返回之前的页面，已经显示通过授权的 GitHub 账户了，之后填写一个新的仓库名，最后创建

等待部署完成，显示“未设置环境变量”是正常的，点击底部按钮返回控制台

添加环境变量

Key填 MONGODB_URI，Value 填之前的数据库连接字符串，最后 Save

在控制台点击 “Settings”，再点击 “Deployment Protection”，关闭身份验证，最后点击 Save，这一步是为了保证 Twikoo 邮件通知正常

添加环境变量后，已经运行的项目不会自动更新，需要我们手动重新部署一下。在项目面板中点击“Overview”，再点击“Deployments”

点击最右侧3个点，点击”Redeploy“

在弹出的窗口中，直接点击“Redeploy”，稍等片刻，等待重新部署完成

回到控制台总览页，原来的“未设置环境变量…”不再显示，正常会显示“Twikoo 云函数运行正常”，表示部署已完成更新

绑定域名

由于 Vercel 给的域名（*.vercel.app）会被墙，因此我们需要利用自己的域名和Vercel给的域名之间架座桥，来保证评论的快速渲染。

打开域名服务商后台（我的是腾讯云），添加一条DNS记录，填写下面的内容后，点击确认

主机记录：twikoo（可以自定义）
记录类型: CNAME（表示别名）
记录值: cname.vercel-dns.com（Vercel自己的解析服务器）

回到 Vercel控制台，点击“Domains”，添加刚才自定义的域名

填写刚才在域名服务商后台自定义的域名，完成后等待片刻

等域名添加完成后，Vercel 会给出一个新的CNAME类型的记录，我们复制 Value 值

回到域名服务商后台，把刚才添加DNS记录的记录值改成 Value 值并确认

返回 Vercel 控制台，可以看到原来黄色标签的“DNS Change Recommended”已经消失了，至此绑定域名完成

配置博客

我的静态博客通过 Hugo 构建，如果你的是通过 Hexo 或其他框架构建的，以下步骤会略有不同，但大致思路是一样的

配置hugo.toml

在 hugo.toml 配置文件中添加以下内容

[params]	
	# Twikoo 评论系统配置
    [params.comments]
        enable = true
        provider = "twikoo"

        [params.comments.twikoo]
            envId = "https://twikoo.yuhang.site/"

配置评论模板文件

我的博客主题是 PaperMod，该主题预留了一个空的评论模板文件 layouts/partials/comments.html，但因为是空文件无法使用，所以需要在自己博客站点文件夹路径下新建文件layouts/partials/comments.html，添加以下内容后，重新运行博客

<div class="comments">
    <div id="tcomment"></div>
    <script src="https://registry.npmmirror.com/twikoo/1.7.13/files/dist/twikoo.min.js"></script>
    <script>
        twikoo.init({
            envId: '{{ .Site.Params.comments.twikoo.envId }}',
            el: '#tcomment'
        })
    </script>
</div>

注册 Twikoo 管理面板

至此，刷新文章页面，评论区已经显示出来了，点击小齿轮打开 Twikoo 管理面板并注册

注册完成后，就可以进行接下来的配置了

管理面板配置

管理面板提供了各种配置及说明，根据自己的喜好来配置即可。

站点信息

评论框提示信息

昵称必填，其余选填

隐藏管理面板入口

不显示用户系统和浏览器信息

配置反垃圾评论，去 https://akismet.com 注册账号，拖动滑块选择免费套餐，完成后将生成的Key填进去即可

配置图床，示例如下

i 提示

R2 API 凭证获取路径为：R2 对象存储 -> API 令牌管理 -> 创建User API 令牌 -> 权限选“对象读和写” -> 完成创建

配置邮件通知，示例如下

邮件通知测试

将上述配置都完成后，先点“保存”，再点“发送测试邮件”，就会收到邮件通知。

‍