使用 Gatsby.js 搭建静态博客 EX 使用语雀发布到博客

DoINsiSt 发布于2019-08-23 14:47 / 529人阅读

摘要：原文链接偶然看到通过语雀发布文章到静态博客，很方便，实现过程也很有意思。我的配置接收推送此时在语雀发布文章，接口就会收到推送的文章信息。

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

偶然看到通过语雀 webhook 发布文章到 Hexo 静态博客，很方便，实现过程也很有意思。同样的原理可以运用到 Gatsby.js 博客上。

因为使用了 netlify，自动部署的事情就不用自己担心了，本文讲述的有一下两点：

熟悉语雀 webhook

使用 GitHub api 更新 GitHub 仓库（更新仓库后 netlify 自动部署）

除了以上两个重点，整个流程是：

在语雀发布文章 -> 触发语雀 webhook -> express（node.js）接收到文章推送 -> 请求信息中抽取文章内容和必要信息 -> 调用 GitHub api 更新仓库 -> netlify 自动部署 -> 文章在博客发布

语雀 webhook

语雀webhook文档自带完整指引，以下讲讲关键步骤。

在知识库页面配置订阅地址

本地测试

官方推荐使用 ngrok，ngrok 能让你的本地服务暴露到外网，方便测试。

我的配置：

express 接收 webhook 推送

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

此时在语雀发布文章，接口就会收到推送的文章信息。

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"
    })
  })
})

因为语雀没有 tag 之类的选项，只能自己用特定标记写到文章里再在后端提取，并且添加信息头部。内容组合好调用更新 api 即可完成整个流程。

功能部署

如果你自己有服务器，正常部署即可，若没有，可以使用 Heroku。Heroku 可以为你提供免费的程序部署服务。你可以先把上面写好的功能上传到 GitHub，然后从选择从 GitHub 拉取仓库。拉取仓库后 Heroku 会自动运行 npm start。

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

值得注意的是，heroku 的端口是系统分配的，所以需要使用环境变量提供的端口：

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

大功告成

在语雀发布文章即可在博客同时发布，这确实比手写 md 再 push 发布只方便了一点，但是更让人期待的是语雀移动端的上线！那么之后就能直接在手机更新静态博客了！不过有点地方还是想吐槽，语雀的 md 编辑器有时候会语法失效，而且不能直接看到 md 代码，总觉得对格式有种不能完全控制源码的束缚感。

GPU云服务器云服务器静态博客博客静态html php静态博客系统搭建博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101136.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.js 搭建静态博客 1 关键文件

摘要：原文地址静态博客之前也有搭建过，不过使用一键生成的，其实当时也有考虑过，不过这个框架搭建博客入门还是比较难的，前置知识点包括和。使用建立项目已经自带了不少插件，但在我的搭建过程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 静态博客之前也有搭建过，不过使用 Hexo 一键生成的，其实当时也有考虑过 Gatsby，不过这个框架搭...

mzlogin 2019-08-23 13:58 评论0 收藏0
Hexo 博客终极玩法：云端写作，自动部署

摘要：配置触发方式一般会得到这么个语雀配置配置一个仓库的可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发。 Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ 一、Hexo+Github 的痛点 1.为啥要用hexo+github？作为一个程序猿，...

AlphaWallet 2019-08-02 14:04 评论0 收藏0
Hexo 博客终极玩法：云端写作，自动部署

摘要：配置触发方式一般会得到这么个语雀配置配置一个仓库的可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发。 Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ 一、Hexo+Github 的痛点 1.为啥要用hexo+github？作为一个程序猿，...

EsgynChina 2019-08-23 14:33 评论0 收藏0
用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结)

摘要：用和创建一个静态博客翻译和自己探索过程中的经验总结原文参阅或本篇主要是对其精华内容进行翻译以及实操过程中遇到的问题解决和探索一些具体的操作步骤和细节我将忽略结合原文一起阅读效果更佳注本文操作环境是介绍这是一个包含很多静态内容页面的站点从技术用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结) 原文参阅: Building a static blog usin...

lijy91 2019-06-26 17:32 评论0 收藏0