用Waline+Vercel搭建评论系统


博客搭建工作仍在进行,总感觉少了点什么,在参考其它大佬的个人博客后,发现很多都开通了留言板的评论功能,于是又在网上找了一堆重复的帖

多数文章写的是使用Valine,但是在自己使用的过程中发现,在配置项中LeanCloudappKeyappID是直接在配置文件中直接粘贴上去的,那在页面源码那不就直接可以被人找到这两个值了?

正在头疼之际翻到了这篇文章:https://hin.cool/posts/waline.html

确实,使用Valine确实会带来上面猜想的问题,博主的文章也为我带来的一个全新的思路:换用Waline评论系统

一方面Waline的配置与Valine相差不多,但Waline相对来说会更加安全;这里可以为各位列一张表,让各位自主参考选择合适自己的评论系统

评论系统 安全性 Markdown 便捷性
Valine 支持
Waline 支持
Gitalk 支持
hypercomments 不支持

综合下来看还是感觉Waline相对更加适合一些

LeanCloud

使用LeanCloud主要的目的,是将网页用户的评论保存下来,相当于一个云存储,管理人员也可以很方便地对数据进行操作,能够节省很多开发步骤

  • LeanCloud注册

    大部分刚开始搭建个人博客的人都是托管在GitHub上,没有对域名进行备案的情况下建议大家在注册时将LeanCloud改为国际版,并创建应用

    输入应用名称,点击创建 (选择开发版,将白嫖进行到底)

    创建应用后前往控制台 –> 设置 –> 应用凭证,这三串码很重要,后面会用到。由于使用Valine会在网页后台直接暴露这几个码,而Waline通过其它配置手段配置后不会,因此我没有选择使用Valine

Vercel服务端

首先前往Vercel:跳转到Vercel进行服务端的配置部署(未登录的请使用GitHub账户进行登录,后Vercel会在你的仓库上新建一个服务)

输入一个新的仓库项目名字,并创建,此时Vercel会基于Waline模板帮你新建并初始化一个仓库项目,骚等一两分钟即可

等到网页放烟花庆祝时,证明模板已经部署完成,点击Go to Dashboard跳转到这个项目的控制台

点击顶部的 Settings - Environment Variables 进入环境变量配置页,并配置三个环境变量 LEAN_ID, LEAN_KEYLEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key

如果配置弄不懂的话可以观看这个视频:【使用Vercel简单地部署Waline评论系统】

配置完环境变量后,点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署,让输入的环境变量生效。

此时会跳转到 Overview 界面开始部署,等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ,即可跳转到部署好的网站地址,此地址即为你的服务端地址。

此时你会发现,点击Visit后网页似乎加载不出来亦或者无法访问,这是因为Vercel在国内似乎被科学了(悲) (DNS污染) 于是你刚才部署的项目无法通过国内的使用,那我怎么使用评论啊!!??憋急,接着往下看

域名绑定

那既然vercel.app的网站无法正常访问,干脆搞个子域名做跳转吧,国内你可以选择阿里云或者腾讯云之类的服务商购买域名,但是考虑到国内购买域名需要备案等乱七八糟的,备案完别人还能在域名备案查询网站找出你的个人信息,就十分反感。

因此,在这里推荐各位可以使用NameSilo购买域名,我这里使用了一位博主的优惠码asns2020,实际上域名一年也只花了7块钱而已

  • NameSilo 域名购买流程

    NameSilo官网链接:【NameSilo官网】

    关于域名购买的流程比较繁琐,直接附上教程链接:【Namesilo 域名购买及使用教程】

    后续文章直接开始DNS解析的操作

  • 域名解析

    回到我们的Vercel,点击顶部的 Settings - Domains 进入域名配置页,输入我们刚购买的域名并点击Add

    此时这个域名下面将弹出配置信息,提示你这个域名需要DNS解析Vercel提供的值,比如这串 类型为 AValue值为76.xx.xx.xx

    将其复制下来,回到NameSilo进行DNS解析,首先点击上方的Change Nameservers更改域名服务器,更换Name Server为Vercel提供的两个server地址,再点击图中的小蓝球编辑DNS

    在设置前,首先把自带的五条默认记录全部删除(DELETE)!!!
    域名解析可以添加两条 A 记录,或者使用 A + CNAME 的组合。
    点击 “Add/Edit a Resource Record” 栏中的 A,依次添加两条 A 记录,将域名指向主机 IP,以我为例使用了A + CNAME 的组合,设置如下:

  • 第一条:HOSTNAME:空,TYPE: A, 76.xx.xx.xx:,TTL:默认可不改;

  • 第二条:HOSTNAME:www,TYPE: CNAME,cname.vercel-dns.com:,TTL:默认可不改。

编辑完一条后点击submit提交,设置完DNS就能访问回我那个被挂掉的服务端了吗?我知道你很急,但你先别急

DNS配置以及NameServer一般需要15~30分钟才能生效,等改动生效后,我们再用购买的域名去访问,就能通过自己的域名来访问评论系统啦

这里附上几篇在NameSilo进行DNS解析的文章:

【萌新建站教程(四)namesilo域名解析设置】
【搭建个人网站(2):Github和Vercel建站以及配置DNS】
【NameSilo域名解析和DNS服务器修改教程】

切记!在评论框点击登录按键,并注册一个账号进行留言,第一个账号是这个评论系统的管理员,你可以在LeanCloud结构化数据中看到相关信息以及他人的留言内容 (不好的留言我会删 bushi)

记得把你的主题下的_config.yml里的Waline配置项打开,别配了半天啥博客反应都没有,我的博客留言板已开通,欢迎各位留言,请各位文明发言


文章作者: Viktor Chen
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Viktor Chen !
评论
  目录