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

原文連接：https://ssshooter.com/2019-01...

方案選擇

你們都知道 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，堅持更新了。