今天实现了评论功能,在此详细写下开发过程。


涉及到的技术栈:MonGoDB \ Tencent Cloud \ Vercel \ Butterfly Theme \ Hexo \ Twikoo


详细描述
  • 总体描述:这里的评论系统选择了Twikoo,是一个简洁、安全、无后端的静态网站评论系统,基于腾讯云开发。只需要把获取到的环境ID(envId)填写到配置栏。


  1. 因为没有自己的服务器,便使用免费的 Vercel 进行部署。Hexo 是静态博客,访客没有办法评论,添加一个自己的评论系统就会方便很多。 图片去外星球了


  2. 申请 MongoDB Atlas 账号,MongoDB Atlas 是 MongoDB Inc 提供的 MongoDB 数据库托管服务。免费账户可以永久使用 500 MiB 的数据库,足够存储 Twikoo 评论使用。 以下步骤针对新用户,在 MongoDB AtLas 注册完账号以后,创建免费 MongoDB 数据库。(接下来的位置可以选择为Hong Kong) 图片去外星球了


  3. 牢记你的用户名与密码 图片去外星球了


  4. 创建完用户以后,就可以 close 了。接下来在 Network Access 页面点击 Add IP Address 添加网络白名单。 因为 Vercel 的出口地址不固定,所以我们这里 Access List Entry 输入 0.0.0.0/0(允许所有 IP 地址的连接)。 图片去外星球了


  5. 接下来在 Database页面点击Connect,连接方式选择Drivers。 图片去外星球了 mongodb+srv://yemengstar:你的数据库密码@cluster0.zzsmj.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 连接字符串包含了连接到 MongoDB 数据库的所有信息,一旦泄露会导致评论被任何人添加、修改、删除,并有可能获取你的 SMTP、图床token等信息。 请妥善记录这一字符串,之后需要填入到 Twikoo 的部署平台里。


  6. 在 vercel 中部署 twikoo

    在https://vercel.com中注册账号 点击这个链接,将 Twikoo 一键部署到 Vercel 出现以下图,证明其已经配置好 图片去外星球了


  7. 接下来进入 Settings – Environment Variables,添加环境变量 MONGODB_URI,值为前面记录的数据库连接字符串,即: 图片去外星球了


  8. 添加完毕点击 save,然后进入 Settings – Deployment Protection,设置 Vercel Authentication 为 Disabled,并 Save。 图片去外星球了


  9. 进入 Deployments , 然后在任意一项后面点击更多(三个点) , 然后点击 Redeploy , 最后点击下面的 Redeploy。等待重新部署完毕。 图片去外星球了


  10. 进入项目的 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示。 图片去外星球了 Vercel Domains(包含 https:// 前缀,例如 https://xxx.vercel.app)即为您的环境 id(envId)。


  11. 将Twikoo接入 Butterfly

    把 envId 修改成你使用的域名,把 visitor 修改为 true: 图片去外星球了




看到这里,我相信你或许在你的网站上已经看见了评论功能,但遗憾的是,关掉科学上网工具后,不能评论。 请移步至另一篇文章: 点击这里

这次评论功能的实现,丰富了我的技术栈。定期回顾这些知识,以保持清醒的头脑。