写在前面

在为Hexo+Butterfly主题博客中实现评论功能时,我选择了Twikoo+MongoDB+Vercel这套零成本技术方案。本文将分享我的部署经验,并解释这三个技术组件的关系与作用,希望能帮助大家避免踩坑


使用Twikoo+MongoDB+Vercel部署评论

想给你的hexo+butterfly主题添加文章评论功能,又不想花钱租服务器,那么Twikoo+MongoDB+Vercel这个方法是最棒的选择。
名字听起来很长、有点复杂,但跟着大佬分享的教程一步步操作,其实并不难。不过中途一定要细心,避免出错,否则后续排查和修正会很痛苦T.T
注意中间不要出错!否则后续排查改正很痛苦!
下面是我在部署过程中觉得很棒参考的资料以及踩过的坑和解决方法,希望可以帮助大家少走弯路

Twikoo、MongoDB、Vercel技术栈关系

Twikoo:前端评论系统,负责在网页中展示评论框、处理用户交互
MongoDB Atlas:云数据库,存储所有评论数据(内容、用户信息、时间戳等)
Vercel:无服务器部署平台,托管Twikoo的后端服务(处理评论的增删改查逻辑)
简单来说,Twikoo 负责“展示和交互”,MongoDB 负责“存储数据”,而 Vercel 负责“运行后端逻辑”

Twikoo部署参考资料

两个官方文档:
Twikoo官方文档
butterfly主题配置Twikoo文档
前面两个官方文档我感觉在互相套娃(A让我看B,B让我看A),看了半天没有看明白到底该怎么做
推荐参考:

我的评论布置主要参考了夜梦星尘的博客和B站的教学视频。跟着夜梦星尘的博客完成了80%,又跟着B站视频修改完成最后的20%,非常感谢两位。
如果你正准备用这个方法部署,建议你先看B站木鱼的视频教程,把用户名和密码配置好,再跟着夜梦星尘的博客一步一步来,祝你成功
B站木鱼木诶视频教程
夜梦星尘的博客

但是要注意,夜梦博客前面没有设置账号和密码的步骤,导致我后面一直连接失败,最后找到B站这位UP的部署视频,跟着他把账号密码设置后重新部署,并要把前面失败的部署删掉!!好在删删改改终于成功了
如果你也遇到了密钥错误,或者envId点进去显示失败,请看下面:

评论踩坑修改–密钥错误

跟着夜梦博客做,我在输出密钥页面的样子是这样的:右下角密钥的账号是乱码
错误的密钥
此时就有问题了,要找到设置账号密码的地方,设置好自己的,在这里:
设置帐号密码
设置完后,让他重新生成密钥,可以看到这次的密钥账号是你刚才自己输入的,把这个密钥的密码部分改成设置的,这个就是才是正确的
正确的密钥
现在要重新修改第一次设置的密钥,把错的删掉换成新的,在这里修改:
正确的密钥
重新部署,会看到令人心动的成功提示:
正确的密钥

评论踩坑修改–评论显示undefined

虽然修改后现实部署成功了,但是这里点进envId会发现现实还是部署失败,用这个envid完成后续博客配置的结果是评论发不出来显示undefined
解决办法:删除之前没用的部署
我在修改正确的密钥后,每次新部署都会是成功,但是找到envId点进去又是失败,最后发现在部署前要把之前配的、旧的、没用的部署彻底删掉,只留下最新的部署,然后重新部署,这次envId点进去也是部署成功!
最后重新推送一下博客,测试评论功能,成功啦!
正确的密钥

小结

通过 Twikoo + MongoDB Atlas + Vercel 的组合,可以轻松实现一个高性能、免费且易于维护的静态博客评论系统。希望这篇博客能帮助到正在搭建博客的小伙伴,也欢迎大家在评论区分享自己的经验和心得!