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

venmos 發布于2019-08-23 14:48 / 2524人閱讀

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

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

方案選擇

大家都知道 disqus 等第三方評論系統的存在。disqus 幾年前還是挺好使的，但是現在已經是不存在的網站了。雖然國內也有類似的服務，但是免費檔位有可能會有大篇幅的廣告。

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

掌握自己的評論數據有兩個方法：

自建接口，儲存評論數據，頁面也是動態獲取數據。

使用接口在 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-----
key
-----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。

這個配置的目的是確定你傳入到倉庫的數據格式，對應的表格應該類似：


  
  
  
  Name
  E-mail
  Message

更新請求：

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

功能完成

至此，成功添加評論功能，整個博客的功能也幾乎完善。對比之前被放棄的一個 wordpress 和一個 hexo，這次是我第一次從基本模板開始自己添加功能做出來的靜態博客，來之不易，希望珍惜，接下來要做的就是繼續優化功能和 UI，堅持更新了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101181.html

創造屬于自己的靜態博客

摘要：所以自己定值博客，或許可以讓自己堅持更新下去。配合上語雀的文章發布推送絕配，于是有了這么個功能專題。可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節省項目搭...

Channe 2019-08-23 15:05 評論0 收藏0
用Gatsby和Strapi創建一個靜態博客(翻譯和自己探索過程中的經驗總結)

摘要：用和創建一個靜態博客翻譯和自己探索過程中的經驗總結原文參閱或本篇主要是對其精華內容進行翻譯以及實操過程中遇到的問題解決和探索一些具體的操作步驟和細節我將忽略結合原文一起閱讀效果更佳注本文操作環境是介紹這是一個包含很多靜態內容頁面的站點從技術用Gatsby和Strapi創建一個靜態博客(翻譯和自己探索過程中的經驗總結) 原文參閱: Building a static blog usin...

lijy91 2019-06-26 17:32 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 4 標簽系統

摘要：原文鏈接回顧使用搭建靜態博客樣式調整官方自帶標簽系統教程，英語過關可以直接閱讀官方教程。制作頁面展示所有標簽重點同樣是查詢部分是標簽名，是包含該標簽的文章總數。在之前寫好的文章頁渲染標簽就是查詢的時候多一個標簽字段，然后渲染上，完事。原文鏈接：https://ssshooter.com/2018-12... 回顧：使用 Gatsby.js 搭建靜態博客 3 樣式調整官方自帶標簽系統...

AndroidTraveler 2019-08-23 14:23 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 1 關鍵文件

摘要：原文地址靜態博客之前也有搭建過，不過使用一鍵生成的，其實當時也有考慮過，不過這個框架搭建博客入門還是比較難的，前置知識點包括和。使用建立項目已經自帶了不少插件，但在我的搭建過程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 靜態博客之前也有搭建過，不過使用 Hexo 一鍵生成的，其實當時也有考慮過 Gatsby，不過這個框架搭...

mzlogin 2019-08-23 13:58 評論0 收藏0