ZBN的博客

Learning is not only a Technique, But also a Dream!

0%

Hexo博客安装Twikoo评论区

Hexo安装Twikoo评论区(通用)

前言

其实本文并不只针对Hexo博客框架安装Twikoo,本文适用于任何需要给自己网站添加评论区的人!
本文使用的是Hexo框架Butterfly主题,并使用Vercel进行配置哦~
提醒:中国大陆访问本文中的Vercel和Twikoo官网及部署时大概率出现网络被“墙”的问题(网络不通),要解决这个问题,明月给你们的建议就是进行“科学上网”,对应的脚本可以到本站置顶公告文章中寻找。

为什么选用Twikoo?

Twikoo是一款简洁、安全、免费的网站评论系统,支持邮箱通知管理员和垃圾评论检测,防XSS,支持限制IP发言次数,并且内嵌了一个管理面板,简单易用,所以在我建站之初便选用了Twikoo。

提醒

本文章需要你有一定的Vercel和后端数据库的知识。

详见官方页面https://twikoo.js.org/backend.html#vercel-%E9%83%A8%E7%BD%B2
可参考官方视频教程https://www.bilibili.com/video/BV1Fh411e7ZH.

第一步:MongoDB

若想存储评论数据,当然要选择一个数据库了,那就是MongoDB!
首先在https://www.mongodb.com/zh-cn/cloud/atlas/register注册一个MongoDB账户,
选免费数据库,类型选择Shared
区域选择 AWS / N. Virginia (us-east-1)
当然了,你也可以使用Google登录。
全搞定之后点击Connect按钮。
连接方式选择Connect your application,
下一步安全配置请输入0.0.0.0/0以允许所有 IP 地址的连接,并创建数据库用户。
数据库的账户密码要妥善保管!
并记录连接字符串!记得将其中的 <password> 修改为刚设置的账户密码!
注意了,这一步较为麻烦,请参考官方教程视频https://www.bilibili.com/video/BV1Fh411e7ZH进行详细配置!
–> 到此,你获得了MongoDB数据库账户连接字符串,请记好这个字符串,在后面的步骤会用到。

第二步:Vercel

Vercel是官方提供众多部署方案中最简洁且免费的部署方案了。注意,Vercel 部署的环境需配合 1.4.0 以上版本的 twikoo.js 使用,默认域名*.vercel.app在中国大陆访问速度较慢甚至无法访问,绑定自己的域名可以提高访问速度。
先在https://vercel.com/signup申请 Vercel 账号,
再在官方点击一键部署按钮或访问https://vercel.com/import/project?template=https://github.com/twikoojs/twikoo/tree/main/src/server/vercel-min进行部署。
进入面板的Settings - Environment Variables,添加环境变量 MONGODB_URI为前面记录的MongoDB数据库连接字符串
进入 Settings - Deployment Protection,设置 Vercel AuthenticationDisabled,并保存配置,
进入 Deployments , 然后在任意一项后面点击更多(三个点), 然后点击 Redeploy, 最后点击下面的 Redeploy
进入Overview,点击 Domains下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示.
Vercel Domains(包含 https:// 前缀,例如 https://xxx.vercel.app)即为您的 Vercel 环境 id。
–> 到此,你获得了 Vercel 环境 ID (一个网址),请记好这个环境 ID,后面要用到。
如果你不想自己的评论系统总是被“墙”,那么可以考虑花钱买域名进行配置,当然了,明月写这篇文章是为了完全零成本的,所以不会提及到,相关配置请自行上网搜索。

第三步:修改主题配置文件

好了,现在我们的数据库有了,环境ID也有了,那么就可以正式开始对我们的博客配置文件“_config.yml”进行相关修改了。
打开主题的配置文件,找到评论的配置,改成使用twikoo,再在下方找到twikoo:的配置(若找不到配置请查找你所使用主题的文档),这个配置只需要修改envID部分为你的Vercel环境ID(一个网址)就行了。
然后进行Hexo的配置与部署就完成了!

坚持原创写作,您的支持将鼓励我继续创作!