语雀文章自动同步到个人博客

Posted on Edited on

思路

yuque_diagram.png

接上篇 hexo+travisCI 自动部署 github pages，后面的部分操作是基于上篇的

yuque-hexo 拉取文章

https://github.com/x-cold/yuque-hexo

安装 yuque-hexo

1
npm i --save-dev yuque-hexo

修改 package.json 文件

参数说明：以我的博客知识库为例，链接为https://www.yuque.com/marvinxu/blog，login 和 repo 参数对应如下

1
2
3
4
5
6
7
8
9
10
11
12
{
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "marvinxu",
    "repo": "blog"
  },
  "scripts": {
    "sync": "yuque-hexo sync",
    "clean:yuque": "yuque-hexo clean",
    "build:yuque": "npm run sync && hexo clean && hexo g"
  }
}

本地测试

语雀 token 获取：https://www.yuque.com/settings/tokens

1
YUQUE_TOKEN=xxx npm run sync

执行成功会得到类似如下的日志

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[INFO] clear previous directory.
[INFO] remove yuque posts: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque
[INFO] reading from local file: /home/travis/build/MarvinXu/blog-hexo/yuque.json
[INFO] article amount: 6
[INFO] download article body: 语雀web-hook触发travis-ci构建
[INFO] download articles done!
[INFO] writing to local file: /home/travis/build/MarvinXu/blog-hexo/yuque.json
[INFO] create posts directory (if it not exists): /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/How to add more to Git Bash on Windows.md
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/hexo+travisCI自动部署github pages.md
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/git-style-guide.md
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/七牛云图床挂了？不用自定义域名找回图片.md
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/用Adobe Acrobat为电子书制作书签.md
[INFO] generate post file: /home/travis/build/MarvinXu/blog-hexo/source/_posts/yuque/语雀web-hook触发travis-ci构建.md
[INFO] yuque-hexo sync done!

配置 TravisCI

修改.travis.yml

script 要换成  npm run build:yuque

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
language: node_js
node_js:
  - 10
script:
  - "npm run build:yuque"
cache:
  directories:
    - node_modules
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
  keep_history: true
  repo: MarvinXu/marvinxu.github.io
  target_branch: master
  local_dir: public
  on:
    branch: master

新增环境变量 YUQUE_TOKEN

image.png

新建阿里云函数

打开阿里云控制台，搜索“函数计算”，在某个服务下新建函数，选择“HTTP 函数”
image.png
注意配置触发器时，请求方式一定要加上 POST（语雀 webhook 是 POST 请求）
image.png
打开云函数，在“代码执行”里编写云函数，写法参考：
https://github.com/x-cold/aliyun-function/blob/master/travis_ci/travis_ci.js

测试

在“触发器”里，得到访问的路径，可在本地用 postman 调用，如果调用成功，就会触发 TravisCI 的构建。

参数说明：

| token | 从  https://travis-ci.org/account/preferences
  获取 |
| — | — |
| repos | travis 项目 id 或 slug(eg: MarvinXu/blog-hexo) |
| branch | 要构建的分支 |

https://1255463568451268.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/travis-ci/yuque/?token=xxx&branch=master&repos=MarvinXu/blog-hexo

配置语雀 webhook

你的知识库 -> 设置 -> 开发者 ->添加 Web Hook
注意：单选“仅主动推送更新触发”没有用，必须配合后面的选项使用
image.png

好啦~ 现在可以在语雀写文章，发布或更新时勾选“文章有较大更新，推送…”，就会自动同步到博客啦~
欢迎访问我的博客 https://marvinxu.top