使用 Gatsby.js 搭建靜態(tài)博客 6 評(píng)論系統(tǒng)

venmos 發(fā)布于2019-08-23 14:48 / 2519人閱讀

摘要：原文鏈接方案選擇大家都知道等第三方評(píng)論系統(tǒng)的存在。部署自己的的原理就是使用接口把評(píng)論更新到你靜態(tài)博客的倉(cāng)庫(kù)，觸發(fā)博客重新部署，在頁面生成評(píng)論。這樣得到的博客頁面包括評(píng)論部分都是完全靜態(tài)的。配置完畢推送到或本地運(yùn)行。

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

方案選擇

大家都知道 disqus 等第三方評(píng)論系統(tǒng)的存在。disqus 幾年前還是挺好使的，但是現(xiàn)在已經(jīng)是不存在的網(wǎng)站了。雖然國(guó)內(nèi)也有類似的服務(wù)，但是免費(fèi)檔位有可能會(huì)有大篇幅的廣告。

不過其實(shí)最大的問題是：你的評(píng)論掌握在別人手上。作為一個(gè)博客都自己搭建的程序員，為什么要讓數(shù)據(jù)落在別人手上呢？

掌握自己的評(píng)論數(shù)據(jù)有兩個(gè)方法：

自建接口，儲(chǔ)存評(píng)論數(shù)據(jù)，頁面也是動(dòng)態(tài)獲取數(shù)據(jù)。

使用接口在 github 倉(cāng)庫(kù)更新評(píng)論信息，然后重新生成包含最新評(píng)論的靜態(tài)頁面。

官網(wǎng)推薦的是第二種方法，借助一個(gè)叫 staticman 的開源工具。推薦原因有 3：

自己掌控?cái)?shù)據(jù)

服務(wù)崩潰時(shí)也能展示評(píng)論（針對(duì)第三方評(píng)論系統(tǒng)和上面動(dòng)態(tài)獲取評(píng)論的方案 1 的問題）

staticman 集成了 akismet 過濾垃圾評(píng)論

所以本文著重說明 staticman 的使用方法（如果想使用第一種方案可以依賴 strapi 框架）。因?yàn)槲抑笆褂?staticman 本身的服務(wù)接口不能調(diào)通，但是本地測(cè)試可以，所以我決定部署自己的 staticman。

部署自己的 staticman

staticman 的原理就是使用 GitHub 接口把評(píng)論更新到你靜態(tài)博客的倉(cāng)庫(kù)，觸發(fā)博客重新部署，在頁面生成評(píng)論。這樣得到的博客頁面包括評(píng)論部分都是完全靜態(tài)的。

對(duì) GitHub 接口更新倉(cāng)庫(kù)感興趣的話可以參考使用 Github API 更新倉(cāng)庫(kù)

首先 clone staticman 的官方倉(cāng)庫(kù)。你可以先在本地測(cè)試運(yùn)行，也可以直接部署到云端（需要免費(fèi)服務(wù)的話依然推薦 heroku）。

staticman 部署配置

在生產(chǎn)環(huán)境，首先需要一個(gè)生產(chǎn)環(huán)境的配置文件 config.production.json。

可以通過 cp config.sample.json config.production.json 生成配置文件。這個(gè)配置文件里面甚至自帶文檔，可以很清晰看出每個(gè)項(xiàng)目的作用。

其中最重要的是兩個(gè)配置項(xiàng)：

  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-----
key
-----END RSA PRIVATE KEY-----"",
    format: String,
    default: null,
    env: "RSA_PRIVATE_KEY"
  },

第一個(gè) githubToken 用于獲取修改你的倉(cāng)庫(kù)權(quán)限的 token，必須注意這個(gè) token 不能泄漏，不然別人就能隨便修改的你倉(cāng)庫(kù)了。第二個(gè)是用于加密留言中的郵箱。

配置完畢推送到 heroku 或本地運(yùn)行 npm start。（運(yùn)行環(huán)境會(huì)根據(jù) NODE_ENV 判斷）

staticman 應(yīng)用于你的倉(cāng)庫(kù)

發(fā)送以下 Get 請(qǐng)求

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

staticman 推送配置

在根目錄創(chuàng)建 staticman.yml 文件，可以參考：https://github.com/eduardobou...

PS. 如果將配置中的 moderation 設(shè)為 true，推送到倉(cāng)庫(kù)后不會(huì)直接合并而是先提出一個(gè) PR。

這個(gè)配置的目的是確定你傳入到倉(cāng)庫(kù)的數(shù)據(jù)格式，對(duì)應(yīng)的表格應(yīng)該類似：


  
  
  
  Name
  E-mail
  Message

更新請(qǐng)求：

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

功能完成

至此，成功添加評(píng)論功能，整個(gè)博客的功能也幾乎完善。對(duì)比之前被放棄的一個(gè) wordpress 和一個(gè) hexo，這次是我第一次從基本模板開始自己添加功能做出來的靜態(tài)博客，來之不易，希望珍惜，接下來要做的就是繼續(xù)優(yōu)化功能和 UI，堅(jiān)持更新了。