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 Authentication
为 Disabled
,并保存配置,
进入 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的配置与部署就完成了!