基于 Anzhiyu主题的 本地 twikoo 配置,使用docker compose

去实现一个网站博客的实时评论系统是一个非常有趣的事情,这意味着陌生的朋友来访问你的主页时都能够去对网站的内容进行实时的评论,这能够很大程度的加深网站的互动性功能。

参考资料

通过参照官方文档,我们可以非常快的实现对于twikoo的构建,地址:
快速上手 | Twikoo 文档

尤其是对于使用butterfly和anzhiyu主题的大家来说,这一切又会变得更简单一些,因为这两个主题在 config.[theme].yml * 已经设置了相应的关键字,在代码中合理嵌入了twikoo脚本,并定义了漂亮的网站样式,所以只要合理配置好服务器就可使用twikoo评论

docker 部署

我使用的部署方法基于docker compose,此方法的优势:

  • 隔离的环境
  • 删的干净
  • 便于管理

对于常常使用docker compose的同学来说应该非常熟悉,我们需要在为docker compose 创建的文件夹中创建一个项目文件夹,创建单独文件夹和子项目文件夹的目的完全只是方便管理而已

在子文件夹中创建: ‘docker-compose.yml’ 文件夹,输入如下内容```

1
2
3
4
5
6
7
8
9
10
11
12
version: '3'
services:
twikoo:
image: imaegoo/twikoo
container_name: twikoo
restart: unless-stopped
ports:
- 8080:8080
environment:
TWIKOO_THROTTLE: 1000
volumes:
- ./data:/app/data

,这里注意的是根据自己的情况定,检查端口是否被占用:

1
lsof -i :8080

启动docker compose,在”docker-compose.yml”目录下运行

1
docker compose up -d

成功运行后,我们应该能看到:

1
2
3
4
5
6
7
twikoo
├── data
│   ├── db.json
│   ├── db.json.0
│   ├── db.json.1
│   └── db.json.2
└── docker-compose.yml

同时如果此时访问服务器的8080端口,应该看到,

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

说明此时服务端已经部署成功了

前端代码连接云函数

此时我们需要能够让代码访问到我们的云函数,我的方法是在DNS代理中在我的域名下添加新的CNAME代理了本地服务器运行的twikoo云函数

创建代理的方法基于cloudflare tunnel 参考我的另两篇笔记
[[图床搭建]]
[[使用cloudflare 内网穿透]]

成功创建好tunnel后,应该能使得你的服务能使用域名访问到,譬如我这里将服务部署到了

1
https://twikoo.<我的域名>.me 

测试,配置成功后,访问此网址能看到和服务端一样的信息。

此时我们需要在hexo主题配置文件中打开 twikoo,简单的现在commet中打开twikoo选项
Screenshot 2025-01-06 at 12.25.14 AM.jpg

然后还需要在twikoo子配置的envId中填入我们配置好的网址

Screenshot 2025-01-06 at 12.22.34 AM.jpg

然后:

1
hexo cl;hexo g;hexo s;

此时重新编译后,我们就可以在网站中看到配置好的twikoo comment了,离能用就差最后一步,进入网页后你应该能看到comment正确的现实,此时你需要按小齿轮配置一下你的管理员信息,进行一些必要设置。

效果如下:如果在邮箱那里填写的是qq邮箱,主题会自动拉取头像,ok,希望你也顺利配置好了,have fun!

image.png