使用 Gatsby.js 搭建靜態博客 6 評論系統

方案選擇

大家都知道 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/eduardobou...

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，堅持更新了。