基於 GitHub Discussions 的 Blog 框架

lencx發表於2021-08-16

這是一篇鋪墊文,Blog 腳手架正在編寫中,支援 RSS 訂閱,自動生成微信公眾號文章等,歡迎關注。

我是一個喜歡折騰的人,雖然文章沒寫幾篇,但是 Blog 框架沒少折騰,剛入行那會用蹩腳的前端技術自己實現,就感覺越花哨,越能證明自己的實力,各種大投影,大圓角,奇怪的字型... 隨著認知的提升,懂得了內容才是核心,頁面開始變得不那麼花哨,使用 HexoGatsby,自己實現 nofwl 主題。再到後來的 vuepressvitepressmdBook。全都被我換了一遍,總是感覺不合自己胃口,於是就萌生了自己寫 Blog 框架的想法。

需求背景

我想做的 Blog 框架滿足以下條件:

  1. 實時性 - 可以隨時隨地編輯,與平臺無關,同時支援手機,電腦,本地,線上編輯等
  2. 所有權 - 我對資料的許可權越大越好,這樣我就可以根據自己的需要去渲染頁面模版
  3. 公眾號 - 可以生成微信公眾號文章(微信連結不支援跳轉,需要生成腳註或二維碼)
  4. RSS - 支援 RSS 訂閱

技術棧

Blog 框架的搭建本身也是學習的過程,技術棧一定要前沿,因為我喜歡折騰。結合上面的需求背景,經過多方面比較,最終選擇了 GitHub Discussions 作為資料來源。vite + react 作為 Blog 基本框架。

最終用到的技術包含:

  • github discussions api - 文章資料來源,因為是介面請求,所以可以滿足文章實時性及資料所有權需求
  • github actions - 執行定時任務(生成 RSS 檔案,JSON 資料檔案,微信文章等),及網站部署
  • scripts - 定時任務需要執行的指令碼命令,用來滿足公眾號文章及 RSS 需求
    • rgd - ? GitHub Discussions API - RSS & JSON
    • woap - ? GitHub Discussions 生成微信文章 (支援二維碼及腳註形式)
  • @apollo/client - 是一個 JavaScript 狀態管理庫,能夠使用 GraphQL 管理本地和遠端資料。使用它來獲取、快取和修改應用程式資料,同時自動更新 UI。
  • vite - 下一代前端開發與構建工具
  • react - 用於構建使用者介面的 JavaScript 庫
  • recoil - React 狀態管理庫

常見問題

關於 Github Token

Blog 需要滿足任何人在不經過 GitHub 登陸,或授權就可以訪問網頁,所以需要提供公共 Token 來請求資料。因為 GitHub Token 存在每小時介面請求次數限制,超出請求次數會報錯。官方文件建議快取介面請求,但是整個 Blog 託管於 GitHub Pages ,並不能快取介面請求。

解決方案

使用 rgd 將介面資料生成 JSON 檔案。當網站請求 GitHub API 超過次數限制,會自動降級請求部署後專案中的 json 檔案。同時支援兩種模式是因為:請求介面網站是實時的(體驗效果好),請求的 json 檔案是非實時(每天跑一次定時任務)。

關於 RSS

使用 rgd 生成 RSS 檔案,每天執行一次定時任務(非實時)。

關於公眾號

使用 woap 生成微信文章,每天執行一次定時任務(非實時)。Discussions 標籤滿足 woap 的標籤規則就會將該文生成為微信文章。

標籤規則
  • wechat-link - 微信連結轉為二維碼,適合多連結場景
  • wechat-post - 微信連結轉為腳註,適合多文字場景

更多使用規則請檢視 woap 引數

相關文章