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

1,216 阅读2分钟

效果

直接在语雀里写文章,写完点“发布”,就同步到个人博客



思路

yuque_diagram.png

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

yuque-hexo拉取文章


github.com/x-cold/yuqu…

安装yuque-hexo

npm i --save-dev yuque-hexo

修改package.json文件

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

{
    "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获取:www.yuque.com/settings/to…

YUQUE_TOKEN=xxx npm run sync

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

[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

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

打开云函数,在“代码执行”里编写云函数,写法参考:

github.com/x-cold/aliy…

测试

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


参数说明:

tokentravis-ci.org/account/pre… 获取
repostravis项目id或slug(eg: MarvinXu/blog-hexo)
branch要构建的分支

1255463568451268.cn-hangzhou.fc.aliyuncs.com/2016-08-15/…


配置语雀webhook

你的知识库 -> 设置 -> 开发者 ->添加 Web Hook

注意:单选“仅主动推送更新触发”没有用,必须配合后面的选项使用

image.png