介绍#

因为静态网站的局限性，我们如果要使用评论等功能，那么我们需要使用社区开发者开发的第三方评论系统，比如说 Valine、Waline、Twikoo、Giscus 等等。

NOTE
如果你不想折腾可以选择Wordpress 、 Halo 等自带评论系统的博客框架；

Twikoo分为前端和后端两部分，前端代码在主流博客框架主题已默认集成，后端程序需要我们自行选择部署方式；

本教程只涉及Twikoo后端的部署，前端的配置请参考对应博客框架的文档。

本篇教程以Twikoo为例，参考Twikoo部署的Twikoo 官方文档，使用Cloudflare提供的 Cloudflare Worker 部署Twikoo评论系统。

我们以Windows系统为例，使用Twikoo提供的Cloudflare Twikoo文档部署到Cloudflare Worker。互联网大善人这块

注意：请使用Windows PowerShell运行以下命令，Cmd可能存在某些未知问题!!!

搭建步骤#

步骤一#

初始化软件环境：

我们先创建一个新的文件夹，并拉取 Cloudflare-twikoo的官方仓库：

1
git clone https://github.com/twikoojs/twikoo-cloudflare.git

终端应该输出的内容为：

1
Cloning into 'twikoo-cloudflare'...
2
remote: Enumerating objects: 215, done.
3
remote: Counting objects: 100% (83/83), done.
4
remote: Compressing objects: 100% (30/30), done.
5
remote: Total 215 (delta 58), reused 54 (delta 52), pack-reused 132 (from 1)
6
Receiving objects: 100% (215/215), 136.49 KiB | 1.62 MiB/s, done.
7
Resolving deltas: 100% (124/124), done.

使用命令 cd twikoo-cloudflare 进入项目目录。

1
cd twikoo-cloudflare

键入命令 npm install 安装必要环境，并请耐心等待。

1
npm install

终端应该输出的内容为：

1
up to date, audited 385 packages in 2s
2

3
50 packages are looking for funding
4
  run `npm fund` for details
5

6
29 vulnerabilities (2 low, 12 moderate, 13 high, 2 critical)
7

8
To address issues that do not require attention, run:
9
  npm audit fix
10

11
To address all issues (including breaking changes), run:
12
  npm audit fix --force
13

14
Run `npm audit` for details.

键入命令：

1
"" | Out-File -FilePath ".\node_modules\jsdom\lib\api.js" -Encoding utf8
2
"" | Out-File -FilePath ".\node_modules\nodemailer\lib\nodemailer.js" -Encoding utf8
3
"" | Out-File -FilePath ".\node_modules\tencentcloud-sdk-nodejs\tencentcloud\index.js" -Encoding utf8

解决Cloudflare Worker 免费单个文件不能超过1M的限制。

步骤二#

键入以下命令，等待系统浏览器被拉起，登入Cloudflare账户

1
npx wrangler login

终端应该输出的内容为：

1
 ⛅️ wrangler 3.99.0 (update available 4.61.1)
2
 [WARNING] The version of Wrangler you are using is now out-of-date.
3

4
  Please update to the latest version to prevent critical errors.
5
  Run `npm install --save-dev wrangler@4` to update to the latest version.
6
  After installation, run Wrangler with `npx wrangler`.
7

8
Attempting to login via OAuth...
9
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=54d11594-84e4-41aa-b438-e81b8fa78ee7&redirect_uri=xxxxxxx

在被拉起的浏览器上选择登入自己的用户，点击 Allow 选项。

终端应该输出的内容为：

1
Successfully logged in.

步骤三：配置Cloudflare D1 和 R2 存储

创建 Cloudflare D1 数据库并设置架构，键入如下命令：

1
npx wrangler d1 create twikoo

终端应该输出的内容为：

1
 ⛅️ wrangler 3.99.0 (update available 4.61.1)
2
 [WARNING] The version of Wrangler you are using is now out-of-date.
3

4
  Please update to the latest version to prevent critical errors.
5
  Run `npm install --save-dev wrangler@4` to update to the latest version.
6
 After installation, run Wrangler with `npx wrangler`.
7

8
✅ Successfully created DB 'twikoo' in region WNAM
9
Created your new D1 database.
10

11
[[d1_databases]]
12
binding = "DB"
13
database_name = "twikoo"
14
database_id = "b58ed0d6-c3e4-41d4-b486-63030d5955f8

其中我们需要复制 database_id 后的UUID，在这篇教程中为：b58ed0d6-c3e4-41d4-b486-63030d5955f8，并将其替换在项目文件夹下的 wrangler.toml 文件的 相应位置处：

1
[[d1_databases]]
2
binding = "DB" # available in your Worker on env.DB
3
database_name = "twikoo"
4
database_id = "b35e0bd5-6d17-42eb-a597-ff4869a74461"

替换为：

1
[[d1_databases]]
2
binding = "DB" # available in your Worker on env.DB
3
database_name = "twikoo"
4
database_id = "b58ed0d6-c3e4-41d4-b486-63030d5955f8"

设置 Cloudflare D1 架构：

1
npx wrangler d1 execute twikoo --remote --file=./schema.sql

在卡住时输入Y，敲入回车键，终端应该输出的内容为：

1
⛅️ wrangler 3.99.0 (update available 4.61.1)
2
 [WARNING] The version of Wrangler you are using is now out-of-date.
3

4
  Please update to the latest version to prevent critical errors.
5
  Run `npm install --save-dev wrangler@4` to update to the latest version.
6
  After installation, run Wrangler with `npx wrangler`.
7

8
√ ⚠️ This process may take some time, during which your D1 database will be unavailable to serve queries.
9
  Ok to proceed? ... yes
10
🌀 Executing on remote database twikoo (b58ed0d6-c3e4-41d4-b486-63030d5955f8):
11
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
12
Note: if the execution fails to complete, your DB will return to its original state and you can safely retry.
13
├ 🌀 Uploading b58ed0d6-c3e4-41d4-b486-63030d5955f8.e17cf477a40b111a.sql
14
│ 🌀 Uploading complete.
15
│
16
🌀 Starting import...
17
🌀 Processed 6 queries.
18
🚣 Executed 6 queries in 0.00 seconds (9 rows read, 11 rows written)
19
   Database is currently at bookmark 00000001-00000005-00005002-0382313177ada1ab8ae5338b70ccf99e.
20
┌────────────────────────┬───────────┬──────────────┬────────────────────┐
21
│ Total queries executed │ Rows read │ Rows written │ Database size (MB) │
22
├────────────────────────┼───────────┼──────────────┼────────────────────┤
23
│ 6                      │ 9         │ 11           │ 0.04               │
24
└────────────────────────┴───────────┴──────────────┴────────────────────┘

创建 Cloudflare R2 存储：

1
npx wrangler r2 bucket create twikoo

输出的日志为：

1
 ⛅️ wrangler 3.99.0 (update available 4.61.1)
2

3
 [WARNING] The version of Wrangler you are using is now out-of-date.
4

5
  Please update to the latest version to prevent critical errors.
6
  Run `npm install --save-dev wrangler@4` to update to the latest version.
7
  After installation, run Wrangler with `npx wrangler`.
8

9
Creating bucket 'twikoo'...
10
✅ Created bucket 'twikoo' with default storage class of Standard.
11

12
Configure your Worker to write objects to this bucket:
13

14
[[r2_buckets]]
15
bucket_name = "twikoo"
16
binding = "twikoo"

将 R2 域更新到wrangler.toml文件中，替换R2_PUBLIC_URL原值

1
[vars]
2
R2_PUBLIC_URL = "https://twikoo.r2.mingy.org"

替换为：

1
[vars]
2
R2_PUBLIC_URL = "https://pub-1fe34dee5eab4e319b991d1a7bcff8ff.r2.dev"

注意：https://pub-1fe34dee5eab4e319b991d1a7bcff8ff.r2.dev 为你启用的公共开发域发布部署：

键入以下命令：

1
npx wrangler deploy --minify

提示以下日志即配置完成。

1
 ⛅️ wrangler 3.114.17 (update available 4.61.1)
2
---------------------------------------------------------
3

4
▲ [WARNING] The version of Wrangler you are using is now out-of-date.
5

6
  Please update to the latest version to prevent critical errors.
7
  Run `npm install --save-dev wrangler@4` to update to the latest version.
8
  After installation, run Wrangler with `npx wrangler`.
9

10
Total Upload: 996.37 KiB / gzip: 303.91 KiB
11
Worker Startup Time: 101 ms
12
Your worker has access to the following bindings:
13
- D1 Databases:
14
  - DB: twikoo (5cf512af-366a-46a2-bebb-e1fb313cece3)
15
- R2 Buckets:
16
  - R2: twikoo
17
- Vars:
18
  - R2_PUBLIC_URL: "https://pub-5fd952abff284e00a041b3c23..."
19
Uploaded twikoo-cloudflare (5.27 sec)
20
Deployed twikoo-cloudflare triggers (5.75 sec)
21
  https://twikoo-cloudflare.user.workers.dev
22
Current Version ID: 0c363c6a-43a1-4692-9255-affae5ef00d2

配置自定义域名#

我们来到Cloudflare Pages控制台，选择我们刚刚上传的Worker并来到设置。

点击 添加自定义域

访问我们添加的链接，显示：

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

到此，部署完成！

结语#

至此，我们已经成功部署了Twikoo评论系统，接下来我们只需在框架主题的配置文件中添加对应的前端环境配置即可开始使用啦！
在此过程中，我们使用了Cloudflare的Cli工具Wrangler进行部署，这种部署方式相对而言比较”方便”。若你不喜欢使用命令行工具，也可选择登入Cloudflare的Web控制进行部署，具体的方式可以查阅相关资料。

注意事项#

为什么选择Cloudflare Worker部署Twikoo？#

问：为什么我不直接使用基于 腾讯云 或 阿里云 的云函数部署？
回答：因为国内大厂的免费额度太低，不足以支撑正常的使用。

Cloudflare访问速度#

Cloudflare的主流客户群体在海外，使用Cloudflare免费版会导致国内加载Twikoo较慢，但可使用国内的CDN来改善访问速体验。

Cloudflare的免费额度#

Cloudflare Worker 目前有10万个请求/天的免费额度，超过后会进行限流处理，但一般不会超过这个额度，嵌套了CDN以后请求率会显著下降。
Cloudflare R2存储目前有10GB存储空间的免费额度，个人博客一般不会超过这个额度。
R2存储可以用来存储评论中的图片附件等，但API令牌在上述教程中尚未设置，所以评论区无法上传图片，会显示：图片上传失败: 博主未配置图床服务

Twikoo 部署方式#

除了Cloudflare Worker以外，Twikoo还支持部署在Vercel、Netlify 等多个托管服务商上，具体可以参考Twikoo 官方文档。
除了常规的云函数部署，Twikoo还可直接部署在Docker容器中，但需要自己配置端口转发和域名，有一定的上手门槛，但数据完全私有化，适合有一定技术基础的用户。

每日一图#

每日一图

Snow

介绍#

搭建步骤#

步骤一#

步骤二#

配置自定义域名#

结语#

注意事项#

为什么选择Cloudflare Worker部署Twikoo？#

Cloudflare访问速度#

Cloudflare的免费额度#

Twikoo 部署方式#

相关链接#

每日一图#

Cookie 使用声明

Cookie 设置

Snow

介绍#

搭建步骤#

步骤一#

步骤二#

配置自定义域名#

结语#

注意事项#

为什么选择Cloudflare Worker部署Twikoo？#

Cloudflare访问速度#

Cloudflare的免费额度#

Twikoo 部署方式#

相关链接#

每日一图#