Hexo:利用cloudflare搭建twikoo评论系统

1.前言

  • 文章仅针对hexo博客的Anzhiyu主题

  • 在对比了 GitalkGitmentDisqusLivereValineWalineTwikoo 等多种评论系统后,最终还是选择了 Twikoo。最终效果如下图:

屏幕截图 2026-04-14 143308.png
屏幕截图 2026-04-14 145013.png
屏幕截图 2026-04-14 145102.png

✨ 为什么是 Twikoo?

  • 🎨 界面简洁清爽,符合个人审美
  • ☁️ 基于 Cloudflare,全栈部署更省心
  • 🧩 无需额外注册账号能直接评论

2.部署Twikoo

2.1 Github上的配置

  • 登录自己Github仓库,fork 这个仓库到自己账号。
    屏幕截图 2026-04-14 125521.png

2.2 配置D1储存

  • 登录自己Cloudflare账号,在左侧找到 D1 SQL Database

屏幕截图 2026-04-14 130051.png

  • 创建一个新的D1数据库,名字选择 twikoo ,地区选择亚太地区(选择自己所在地最近区域)。

屏幕截图 2026-04-14 130617.png

  • 创建成功后到 D1 Database>twikoo>overview 复制对应的ID,形式如 b06ca156-b1b2-43ae-b1cb-87e1bcae7ceb
    D1 Database>twikoo>console粘贴之前fork项目里面 schema.sql代码,具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
CREATE TABLE IF NOT EXISTS comment (
_id TEXT NOT NULL,
uid TEXT NOT NULL,
nick TEXT NOT NULL,
mail TEXT NOT NULL,
mailMd5 TEXT NOT NULL,
link TEXT NOT NULL,
ua TEXT NOT NULL,
ip TEXT NOT NULL,
ipRegion TEXT NOT NULL DEFAULT '',
master INTEGER NOT NULL,
url TEXT NOT NULL,
href TEXT NOT NULL,
comment TEXT NOT NULL,
pid TEXT NOT NULL,
rid TEXT NOT NULL,
isSpam INTEGER NOT NULL,
created INTEGER NOT NULL,
updated INTEGER NOT NULL,
like TEXT NOT NULL,
top INTEGER NOT NULL,
avatar TEXT NOT NULL,
PRIMARY KEY (url, created DESC)
);


CREATE INDEX IF NOT EXISTS idx_comment_created ON comment (created DESC);
CREATE INDEX IF NOT EXISTS idx_comment_ip_created ON comment (ip, created DESC);

CREATE TABLE IF NOT EXISTS config (
value TEXT NOT NULL
);

INSERT INTO config (value) SELECT '' WHERE NOT EXISTS (SELECT 1 FROM config);

CREATE TABLE IF NOT EXISTS counter (
url TEXT NOT NULL PRIMARY KEY,
title TEXT NOT NULL,
time INTEGER NOT NULL,
created INTEGER NOT NULL,
updated INTEGER NOT NULL
);
  • 将代码粘贴并执行,注意把代码里面如下部分注释删除,否则cloudflare编译器无法识别而报错。提示 This query successfully executed. 代表成功执行。
    1
    2
    - -- Migration: Add ipRegion column if not exists (for existing databases)
    -- Run this manually: ALTER TABLE comment ADD COLUMN ipRegion TEXT NOT NULL DEFAULT '';

屏幕截图 2026-04-14 131758.png

  • 到自己GitHub仓库,找到之前fork的项目,修改 wrangler.toml 文件内容。只用修改 [[d1_databases]] 部分,具体如下:
1
2
3
4
[[d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "twikoo"
database_id = "b06ca156-b1b2-43ae-b1cb-87e1bcae7ceb" #换成自己的ID

2.3配置R2储存

  • 在Cloudflare的控制左侧找到 R2 Object Storage ,创建新的R2存储,名字 twikoo ,区域选择离自己最近的区域,其他保持默认。
  • 进入该 twikoo 储存设置,找到Custom Domains ,绑定自己的域名,后续通过该域名调用评论系统。

屏幕截图 2026-04-14 134224.png

  • 返回自己的GitHub,找到之前配置的 wrangler.toml 文件,修改 [vars] 部分,具体如下:
1
2
[vars]
R2_PUBLIC_URL = "https://twikoo.r2.mingy.org" #换成自己绑定的域名

2.4配置worker

  • 在Cloudflare首页左侧找到 compute > Workers & Pages ,创建新的worker项目,通过github链接,找到之前fork的对应项目。

屏幕截图 2026-04-14 135139.png
屏幕截图 2026-04-14 135424.png

  • 到该项目的worker后台绑定自己的域名,比如 twikoo.example.org ,之后建议关闭原始分配的workers.devPreview URLs 链接的公开访问权限。

屏幕截图 2026-04-14 135809.png

  • 注:woker在绑定自己域名后,默认分配的大陆cdn节点速度很慢,可以通过优选域名加速woker访问。具体是先在DNS解析一个域名,如cdn.example.com ,然后通过 cname 指向优选域名,比如 store.ubi.comwww.shopify.commfa.gov.uacdn.tangsengai.com 。之后进入worker对应项目绑定router路由,zone选择该域名的一级域名, example.com。下一栏Route填入 cdn.example.com/* ,Failure mode选择默认即可。(只适用于woker项目,对page项目不适用。)

  • 域名优化后访问效果:
    屏幕截图 2026-04-14 144708.png

  • 访问 twikoo.example.org ,如果出现提示:

1
{"code":100,"message":"Twikoo 云函数运行正常,请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.44"}
  • 到此 Twikoo 的后端完全配置好,接下来部署前端。

2.5配置Anzhiyu主题的评论

  • 找到 Hexo 的根文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    目录: C:\Hexo-Blog\blog-demo


Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2026/4/13 20:31 .deploy_git
d----- 2026/4/12 21:02 .github
d----- 2026/4/13 11:37 node_modules
d----- 2026/4/12 21:02 scaffolds
d----- 2026/4/13 20:19 source
d----- 2026/4/12 21:30 themes
-a---- 2026/4/12 21:02 89 .gitignore
-a---- 2026/4/14 14:16 131438 db.json
-a---- 2026/4/13 11:37 128086 package-lock.json
-a---- 2026/4/13 11:37 837 package.json
-a---- 2026/4/14 13:21 42324 _config.anzhiyu.yml
-a---- 2026/4/12 21:02 0 _config.landscape.yml
-a---- 2026/4/13 18:36 3465 _config.yml
  • 我这里是 \Hexo-Blog\blog-demo\_config.anzhiyu.yml,找到comments: 部分,启用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: false
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page
  • 找到Twikoo: 部分,启用Twikoo
1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId: https://twikoo.example.org #改成自己域名,注意空格。
region:
visitor: false
option:
  • 返回根目录重新部署hexo cl;hexo g;hexo d 博客。

3.写在最后

-🌱 此刻,你已经拥有:

  • 一个 轻量、灵活、可扩展 的评论系统
  • 完全属于你自己的数据与交互空间
  • 与访客沟通交流的一扇窗口

  • 或许过程中有过报错、有过困惑,但正是这些“小插曲”,让整个搭建过程更加真实而有成就感。当页面上成功出现评论框的那一刻,不只是功能的实现,更是一种“成就感”的体现 💡
  • 技术的魅力,从来不只是“搭建成功”,而是在一次次尝试与优化中,逐渐构建出属于自己的世界。愿这个小小的评论系统,不仅承载访客的留言,也记录你的成长与热爱 ❤️

“代码之外,皆为风景;评论之中,自有温度。”


🎊 恭喜你,Twikoo 搭建完成!接下来,就让它陪伴你的网站一起成长吧!