Hexo框架 + MongoDB + Vercel部署Twikoo

前言

Twikoo

Twikoo是一个轻量级、开源、基于腾讯云开发的评论系统，旨在为网站和博客提供简便、快速和高效的评论功能。无需自己搭建后端服务，只需要注册并配置相关服务即可。

MongoDB

MongoDB是一个开源的文档型数据库，属于NoSQL数据库的一种。它以灵活的文档模型和高性能的特性著称，适合处理大规模数据、非结构化数据以及快速开发需求的场景。

Vercel

Vercel是一个面向前端开发者的云平台，专注为Web应用程序提供快速部署、托管和自动化的服务。为开发者提供了一个无缝的工作流程，从代码开发到自动化部署，极大地简化了应用的构建和发布过程。

使用MongoDB

申请和创建数据库

  • 首先需要注册一个MongoDB的账号，可以选择Google账号或者Github账号进行登录。
  • 在DATABASE中点击Clusters，点击Create可以选择创建一个免费的共享数据库。
  • 推荐选择aws作为云服务商，地区N. Virginia (us-east-1)作为节点，点击Create Cluster即创建成功。

配置数据库

  • 在DATABASE面板中选择Clusters，点击Connect按钮

  • 选择Allow Access from Anywhere(允许任何IP访问)

    确保Vercel部署能够访问外部资源

  • 此时默认填入的地址是0.0.0.0/0，Description根据自己的需求选填，点击Add IP Address 进行添加。

  • 填入数据库用户名和密码，点击Create Database User 创建该数据库的使用角色。

  • 在设置连接安全的页面中点击Drivers

  • 在选择连接方式的页面中（Choose a connection method），用默认的Node.js即可。

  • 复制保存好下列的字符串，在后续的步骤中会使用到。

使用Vercel

注册账号

注册方式可以选择Continue with Email，通过邮箱进行注册，点击邮件中的链接，进行登录验证。

部署步骤

  • 在Overview选项卡中点击右侧的黑色按钮框Add New…，选择Project。

  • 选择Import Third-Party Git Repository

添加环境变量

  • 选择设置（Settings）选项栏，点击Environment Variables，Key选项框中填入MONGODB_URI，Value选项框中填入上述刚刚复制保存的字符串，其中**需要替换为上述设置的数据库密码，最后点击Save**进行添加。
  • 选择部署（Deployments）选项栏，点击项目右侧的三个横店，选择Redeploy，进行重新部署（保证刚刚添加的环境变量生效）

  • 选择Project选项栏，若相关环境配置正确，即可看到Twikoo云函数运行正常等信息。
  • 在下图中的Domains中的链接地址就是你的环境地址（Environment address），即envId，配置到前端即可。

修改Butterfly主题相关配置

需要修改如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Comments System
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: twikoo # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId:  #上述的环境地址
  region:
  visitor: true
  option:

完成上述所有相关配置，即可开启评论功能了！！！