使用 Gatsby.js 搭建静态博客 6 评论系统

January 18, 2019codinggatsby

方案选择

大家都知道 disqus 等第三方评论系统的存在。disqus 几年前还是挺好使的,但是现在已经是不存在的网站了。虽然国内也有类似的服务,但是免费档位有可能会有大篇幅的广告。

不过其实最大的问题是:你的评论掌握在别人手上。作为一个博客都自己搭建的程序员,为什么要让数据落在别人手上呢?

掌握自己的评论数据有两个方法:

  1. 自建接口,储存评论数据,页面也是动态获取数据。
  2. 使用接口在 github 仓库更新评论信息,然后重新生成包含最新评论的静态页面。

官网推荐的是第二种方法,借助一个叫 staticman 的开源工具。推荐原因有 3:

  • 自己掌控数据
  • 服务崩溃时也能展示评论(针对第三方评论系统和上面动态获取评论的方案 1 的问题)
  • staticman 集成了 akismet 过滤垃圾评论

所以本文着重说明 staticman 的使用方法(如果想使用第一种方案可以依赖 strapi 框架)。因为我之前使用 staticman 本身的服务接口不能调通,但是本地测试可以,所以我决定部署自己的 staticman。

部署自己的 staticman

staticman 的原理就是使用 GitHub 接口把评论更新到你静态博客的仓库,触发博客重新部署,在页面生成评论。这样得到的博客页面包括评论部分都是完全静态的。

对 GitHub 接口更新仓库感兴趣的话可以参考使用 Github API 更新仓库

首先 clone staticman 的官方仓库。你可以先在本地测试运行,也可以直接部署到云端(需要免费服务的话依然推荐 heroku)。

staticman 部署配置

在生产环境,首先需要一个生产环境的配置文件 config.production.json

可以通过 cp config.sample.json config.production.json 生成配置文件。这个配置文件里面甚至自带文档,可以很清晰看出每个项目的作用。

其中最重要的是两个配置项:

  githubToken: {
    doc: 'Access token to the GitHub account being used to push files with.',
    format: String,
    default: null,
    env: 'GITHUB_TOKEN'
  },
  rsaPrivateKey: {
    doc: 'RSA private key to encrypt sensitive configuration parameters with.',
    docExample: 'rsaPrivateKey: "-----BEGIN RSA PRIVATE KEY-----\\nkey\\n-----END RSA PRIVATE KEY-----"',
    format: String,
    default: null,
    env: 'RSA_PRIVATE_KEY'
  },

第一个 githubToken 用于获取修改你的仓库权限的 token,必须注意这个 token 不能泄漏,不然别人就能随便修改的你仓库了。第二个是用于加密留言中的邮箱。

配置完毕推送到 heroku 或本地运行 npm start。(运行环境会根据 NODE_ENV 判断)

staticman 应用于你的仓库

发送以下 Get 请求

http://your-staticman-url/v2/connect/GITHUB-USERNAME/GITHUB-REPOSITORY

staticman 推送配置

在根目录创建 staticman.yml 文件,可以参考:https://github.com/eduardoboucas/staticman/blob/master/staticman.sample.yml

PS. 如果将配置中的 moderation 设为 true,推送到仓库后不会直接合并而是先提出一个 PR。

这个配置的目的是确定你传入到仓库的数据格式,对应的表格应该类似:

<form method="POST" action="https://api.staticman.net/v2/entry/eduardoboucas/staticman/gh-pages/comments">
  <input name="options[redirect]" type="hidden" value="https://my-site.com">
  <!-- e.g. "2016-01-02-this-is-a-post" -->
  <input name="options[slug]" type="hidden" value="{{ page.slug }}">
  <label><input name="fields[name]" type="text">Name</label>
  <label><input name="fields[email]" type="email">E-mail</label>
  <label><textarea name="fields[message]"></textarea>Message</label>
  
  <button type="submit">Go!</button>
</form>

更新请求:

POST https://api.staticman.net/v2/entry/{GITHUB USERNAME}/{GITHUB REPOSITORY}/{BRANCH}/{PROPERTY (optional)}

功能完成

至此,成功添加评论功能,整个博客的功能也几乎完善。对比之前被放弃的一个 wordpress 和一个 hexo,这次是我第一次从基本模板开始自己添加功能做出来的静态博客,来之不易,希望珍惜,接下来要做的就是继续优化功能和 UI,坚持更新了。


暂时没有留言,要抢沙发吗?
留言(不再受实现原理所限,立即更新!回复功能现在可用,但邮箱提醒未完成)
文章留言