使用 Gatsby.js 搭建靜態(tài)博客 EX 使用語雀發(fā)布到博客

DoINsiSt 發(fā)布于2019-08-23 14:47 / 545人閱讀

摘要：原文鏈接偶然看到通過語雀發(fā)布文章到靜態(tài)博客，很方便，實(shí)現(xiàn)過程也很有意思。我的配置接收推送此時在語雀發(fā)布文章，接口就會收到推送的文章信息。

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

偶然看到通過語雀 webhook 發(fā)布文章到 Hexo 靜態(tài)博客，很方便，實(shí)現(xiàn)過程也很有意思。同樣的原理可以運(yùn)用到 Gatsby.js 博客上。

因?yàn)槭褂昧?netlify，自動部署的事情就不用自己擔(dān)心了，本文講述的有一下兩點(diǎn)：

熟悉語雀 webhook

使用 GitHub api 更新 GitHub 倉庫（更新倉庫后 netlify 自動部署）

除了以上兩個重點(diǎn)，整個流程是：

在語雀發(fā)布文章 -> 觸發(fā)語雀 webhook -> express（node.js）接收到文章推送 -> 請求信息中抽取文章內(nèi)容和必要信息 -> 調(diào)用 GitHub api 更新倉庫 -> netlify 自動部署 -> 文章在博客發(fā)布

語雀 webhook

語雀webhook文檔自帶完整指引，以下講講關(guān)鍵步驟。

在知識庫頁面配置訂閱地址

本地測試

官方推薦使用 ngrok，ngrok 能讓你的本地服務(wù)暴露到外網(wǎng)，方便測試。

我的配置：

express 接收 webhook 推送

app.post("/yuque/webhook", function(req, res) {
    console.log(req.body.data)
})

此時在語雀發(fā)布文章，接口就會收到推送的文章信息。

GitHub api 更新倉庫 原理

使用 api 更新 GitHub 倉庫的方法可以參考：使用 Github API 更新倉庫

主要代碼

var updateGitHubRes = function(blob, path) {
  var commitSha
  var commitTreeSha
  return getRef()
    .then(({ data }) => {
      commitSha = data.object.sha
      return getCommit(commitSha)
    })
    .then(({ data }) => {
      commitTreeSha = data.tree.sha
      return createBlob(blob)
    })
    .then(({ data }) => {
      var blobSha = data.sha
      return createTree(commitTreeSha, path, blobSha)
    })
    .then(({ data }) => {
      var treeSha = data.sha
      return createCommit(commitSha, treeSha)
    })
    .then(({ data }) => {
      var newCommitSha = data.sha
      return updataRef(newCommitSha)
    })
    .catch(err => {
      console.log(err)
    })
}

var getRef = function() {
  return axios.get(`/${owner}/${repo}/git/refs/heads/master`)
}

var getCommit = function(commitSha) {
  return axios.get(`/${owner}/${repo}/git/commits/${commitSha}`)
}

var createBlob = function(content) {
  return axios.post(`/${owner}/${repo}/git/blobs`, {
    content,
    encoding: "utf-8"
  })
}

var createTree = function(base_tree, path, sha) {
  return axios.post(`/${owner}/${repo}/git/trees`, {
    base_tree, // commit tree 的 sha
    tree: [
      {
        path, // 文件路徑
        mode: "100644", // 類型，詳情看文檔
        type: "blob",
        sha // 剛才生成的 blob 的 sha
      }
    ]
  })
}

var createCommit = function(
  parentCommitSha,
  tree,
  message = ":memo: update post"
) {
  return axios.post(`/${owner}/${repo}/git/commits`, {
    message,
    parents: [parentCommitSha],
    tree
  })
}

var updataRef = function(newCommitSha) {
  return axios.post(`/${owner}/${repo}/git/refs/heads/master`, {
    sha: newCommitSha,
    force: true
  })
}

組合

把接受 webhook 請求的功能和 GitHub 更新流程組合起來，有如下代碼：

app.post("/yuque/webhook", function(req, res) {
  console.log("web hook")
  var postData = req.body.data
  if (!postData) {
    console.log("nothing append")
    return res.json({
      msg: "nothing append"
    })
  }
  var title = postData.title
  var date = postData.created_at
  var content = postData.body

  var tagsReg = new RegExp(/(?<=).*(?=)/)
  var removeTagsReg = new RegExp(/.*/)
  var pathReg = new RegExp(/(?<=).*(?=)/)
  var removePathReg = new RegExp(/.*/)
  var replaceBrReg = new RegExp(/
/g)

  var tags = content.match(tagsReg)
  content = content.replace(removeTagsReg, "")
  var postPath = content.match(pathReg)
  content = content.replace(removePathReg, "")
  content = content.replace(replaceBrReg, "
")

  tags = tags && tags[0]
  postPath = postPath && postPath[0]
  var tagsString = JSON.stringify(tags.split(","))

  var contentHeader = `---
path: "${postPath}"
date: "${date}"
title: "${title}"
tags: ${tagsString}
---
`
  updateGitHubRes(
    contentHeader + content,
    `src/pages/${date.substring(0, 10)}-${postPath.substring(1)}/index.md`
  ).then(({ data }) => {
    console.log("finish")
    return res.json({
      msg: "finish"
    })
  })
})

因?yàn)檎Z雀沒有 tag 之類的選項(xiàng)，只能自己用特定標(biāo)記寫到文章里再在后端提取，并且添加信息頭部。內(nèi)容組合好調(diào)用更新 api 即可完成整個流程。

功能部署

如果你自己有服務(wù)器，正常部署即可，若沒有，可以使用 Heroku。Heroku 可以為你提供免費(fèi)的程序部署服務(wù)。你可以先把上面寫好的功能上傳到 GitHub，然后從選擇從 GitHub 拉取倉庫。拉取倉庫后 Heroku 會自動運(yùn)行 npm start。

npm start 映射到 node index.js 就可以了。

值得注意的是，heroku 的端口是系統(tǒng)分配的，所以需要使用環(huán)境變量提供的端口：

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Our app is running on port ${ PORT }`);
});

大功告成

在語雀發(fā)布文章即可在博客同時發(fā)布，這確實(shí)比手寫 md 再 push 發(fā)布只方便了一點(diǎn)，但是更讓人期待的是語雀移動端的上線！那么之后就能直接在手機(jī)更新靜態(tài)博客了！不過有點(diǎn)地方還是想吐槽，語雀的 md 編輯器有時候會語法失效，而且不能直接看到 md 代碼，總覺得對格式有種不能完全控制源碼的束縛感。

GPU云服務(wù)器云服務(wù)器靜態(tài)博客博客靜態(tài)html php靜態(tài) 博客系統(tǒng) 搭建博客

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101136.html

發(fā)表評論

登陸后可評論

0條評論

DoINsiSt

男|高級講師

我要關(guān)注我要私信

TA的文章

Arduino ESP32 BLE藍(lán)牙串口通訊實(shí)驗(yàn)

閱讀 3870·2021-09-29 09:34
頭歌-軟件測試技術(shù)-面向?qū)ο鬁y試_王鐵軍

閱讀 3787·2021-09-27 13:34
關(guān)于AD/DC變換器的幾個問題

閱讀 580·2021-09-24 09:47
前端每日實(shí)戰(zhàn)：62# 視頻演示如何用純 CSS 創(chuàng)作一只蒸鍋

閱讀 3046·2019-08-30 15:53
Hybrid開發(fā)

閱讀 1823·2019-08-26 13:54
基于 Github API 的圖床 Chrome 插件開發(fā)全紀(jì)錄

閱讀 2097·2019-08-26 13:43
使用 Gatsby.js 搭建靜態(tài)博客 EX 使用語雀發(fā)布到博客

閱讀 546·2019-08-23 14:47
【前端面試】變量和類型計算

閱讀 1754·2019-08-23 14:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用 Gatsby.js 搭建靜態(tài)博客 EX 使用語雀發(fā)布到博客

相關(guān)文章

**創(chuàng)造屬于自己的靜態(tài)博客**

**使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件**

Hexo 博客終極玩法：云端寫作，自動部署

Hexo 博客終極玩法：云端寫作，自動部署

**用Gatsby和Strapi創(chuàng)建一個靜態(tài)博客(翻譯和自己探索過程中的經(jīng)驗(yàn)總結(jié))**

發(fā)表評論

0條評論

DoINsiSt

男|高級講師

TA的文章

Arduino ESP32 BLE藍(lán)牙串口通訊實(shí)驗(yàn)

頭歌-軟件測試技術(shù)-面向?qū)ο鬁y試_王鐵軍

關(guān)于AD/DC變換器的幾個問題

前端每日實(shí)戰(zhàn)：62# 視頻演示如何用純 CSS 創(chuàng)作一只蒸鍋

Hybrid開發(fā)

基于 Github API 的圖床 Chrome 插件開發(fā)全紀(jì)錄