一、创建 MongoDB 免费数据库

#

打开：

https://www.mongodb.com/atlas

注册并登录后：

• 创建一个 Project，例如：

hello-github-ui.github.io

• 点击创建数据库
• 选择：

free

• 云厂商随便选择一个 Free Cluster 的选项；
• 区域选择离你的访问者比较近的区域；
• 集群名称可以填写：

twikoo

• 点击创建。 MongoDB 官方说明，M0 Free Cluster 适合小型应用和个人项目，并且不会自动过期。

二、创建数据库用户

#

创建集群过程中会要求创建数据库用户。 例如：

Username: twikoo
Password: 设置一个强密码

请记录：

数据库用户名
数据库密码

密码不要使用过于简单的内容。 如果密码中包含以下特殊字符：

@ # % / ? :

后面需要进行URL编码。为了简单起见，可以直接使用字母、数字和少量安全符号组成的强密码。

三、允许 Vercel 访问 MongoDB

#

进入 MongoDB Atlas:

Network Access

点击：

Add IP Address

添加：

0.0.0.0/0

然后保存。 这是因为 Vercel 的函数出口 IP 不固定，不能只添加你本地电脑的 IP。MongoDB 官方创建 Free Cluster 时也要求配置 IP Access List。

四、获取 MongoDB 连接字符串

#

进入：

Database → Connect → Drivers

选择：

Driver: Node.js

复制连接字符串，格式大致如下：

mongodb+srv://twikoo:你的密码@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority

建议在域名后面加上数据库名称 twikoo：

mongodb+srv://twikoo:你的密码@cluster0.xxxxx.mongodb.net/twikoo?retryWrites=true&w=majority

最终类似：

mongodb+srv://twikoo:Abc123456@cluster0.xxxxx.mongodb.net/twikoo?retryWrites=true&w=majority

不要把这个连接字符串发给别人，也不要提交到 GitHub，因为它包含数据库密码。

五、注册 Vercel 免费账户

#

打开：https://vercel.com 建议使用 GitHub 登录。 免费方案选择：

Hobby

六、一键部署 Twikoo

#

打开 Twikoo 官方文档：https://twikoo.js.org，找到 Vercel 部署，点击官方的部署按钮。

七、添加 MongoDB 环境变量

#

进入 Vercel 项目：

Settings → Environment Variables

新增变量：

Name:
MONGODB_URI

Value 填入刚才的 MongoDB 连接字符串：

mongodb+srv://twikoo:你的密码@cluster0.xxxxx.mongodb.net/twikoo?retryWrites=true&w=majority

环境建议全部勾选：

Production
Preview
Development

不要把 MONGODB_URI 写入 Hugo 项目或 GitHub 仓库。Twikoo 官方的 Vercel 部署流程同样要求通过 MONGODB_URI 环境变量传入数据库连接字符串。

八、关闭 Vercel Authentication

#

进入：

Settings → Deployment Protection

找到：

Vercel Authentication

设置为：

Disabled

然后保存。

如果不关闭，访问者可能会被 Vercel 登录页面拦截，导致博客无法读取评论。Twikoo 官方的 Vercel 部署步骤也要求关闭这一项。

九、重新部署

#

环境变量保存后，进入：

Deployments

找到最新部署，点击右侧的三个点：

Rede

再次确认：

Redeploy

这一步不能省略，否则新添加的 MONGODB_URI 可能不会生效。Twikoo 官方流程也是配置环境变量后重新部署。

十、检查 Twikoo 是否正常运行

#

重新部署完成后，进入：

Overview

找到：

Domains

打开类似下面的地址：

https://my-twikoo.vercel.app

如果配置成功，页面会显示：

![/images/2026/09/17/pixpin2026-09-1713-03-42.png]

这个地址就是后面要使用的 envId：

https://my-twikoo.vercel.app

不要填成博客地址，也不要只填写：

my-twikoo.vercel.app

必须包含：

https://

Twikoo 官方将带有 https:// 的 Vercel 域名作为环境 ID。

十一、接入 Blowfish

#

在 Hugo 项目根目录创建：

layouts/partials/comments.html

写入：

<div class="twikoo-wrapper">
  <div id="twikoo"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/twikoo@1.7.24/dist/twikoo.min.js"></script>

<script>
  twikoo.init({
    envId: 'https://my-twikoo.vercel.app',
    el: '#twikoo',
    lang: 'zh-CN',
    path: window.location.pathname
  })
</script>

把：

https://my-twikoo.vercel.app

换成你的实际 Vercel 域名。 然后在：

config/_default/

加入：

[article]
  showComments = true

本地启动：

hugo server -D

打开文章页面，滚动到底部即可看到 Twikoo 评论区。