MongoDb + Twikoo + Vercel + 腾讯云域名配置网站评论系统

前言

​ 翻看butterfly社区优秀作品是发现,大家都有评论区,那我也要搭一个,哈哈!

​ 开干!

MongoDb

​ 我使用mongodb去存评论内容和相关配置

新建数据库

​ 我直接用魔法谷歌账号登陆了,省去注册步骤,进入之后,选择创建一个免费共享数据库Share Clusters,选择地区之后创建就可以

1

然后添加数据库账号密码

4

完成后,点开database里的connect,连接方式选择 Drivers

2

3

记录数据库连接字符串,请将连接字符串中的 : 修改为刚刚创建的数据库 用户名:密码

6

然后,在networkAccess配置一个0000的ip,表示任何ip都可以访问此数据库

5

Vercel部署

一键添加vercel项目

​ 点击上面的链接,进入vercel的网站,注册账号后进入,我还是魔法加github账号直接登陆了,然后在指定位置绑定GitHub账号,随便起一个名字,create后会克隆vercel项目到仓库中。

71

进入 Settings - Environment Variables,添加环境变量 MONGODB_URI,值为前面记录的数据库连接字符串

8

进入 Deployments , 然后在任意一项后面点击更多 , 然后点击Redeploy , 最后点击下面的Redeploy

为了让环境变量生效,需要重新部署

9

如果一切顺利,可以看到这样

10

点击domains里面的url是可以跳转到这样的页面,表示部署成功了

11

其中,https:// + domains里面的东西就是envId,比如我的就是https://twikoo-ten-woad.vercel.app

之后在主题的配置文件中配置twikoo和envId就可以了

12

14

至此评论系统就部署完成了!

配置个人域名解析

​ 这个主要是因为vercel在国内是被墙的,不使用魔法的情况下不止没法正常评论,连控制台都进不去

添加子域名

​ 这个首先我是有自己的域名在腾讯云上面,我添加一个twikoo前缀的子域名

15

​ 然后,可以直接去vercel的项目Setting中,如图所示添加域名

16

​ 然后他会自动刷新,然后显示Valid Configuration,这里我们需要去为域名添加解析

17

​ 具体添加的内容就是他提示的内容,我是添加了两条,分别是CNAME类型的解析和A类型的解析

18

19

​ 他会自动刷新,如果变成这样,代表配置成功了,这时候去butterfly的配置文件中将envId换成刚才的域名就可以了!

20