流程和概述

流程大概为: 语雀webhook→Serverless→Github Actions→Github Pages

本身用 Github Actions→Github Pages 即可完成在线更新文章,或者说通过Github网页写文章实现自动化部署到hexo静态博客。但习惯用语雀来记录笔记,或者有类似需求的,便可在语雀文档中写文章从而实现自动化部署到 Github Pages静态博客上。

Serverless配置

  • 你得先有腾讯云或者阿里云账户,没有注册的话,这些注册需要验证手机,甚至实名认证。这里以腾讯云为例,在腾讯云中开通Serverless(无服务架构),有叫函数计算,有叫云函数,总之都围绕它展开做的产品。
  • 新建云函数,函数名称自己随意,运行环境 Python2.7 创建方式 空白函数 ,点击高级设置,启用 运行角色SCF_QcsRole
  • 点击完成后,在 函数代码→函数管理 复制如下代码做相应修改,没有Github账户或者私有仓库待会创建后来修改也可以。

先去登录 GitHub,定位到如此网址 https://github.com/settings/profile ,点击 Developer settings,新建一个token,然后勾选 repo后确定申请。或点击查看《Github申请token》,然后填写好。

下面所有代码都可在 https://gitee.com/ct2/web/blob/master/yque-serverless-github-actions-hexo.md中,更便于复制。

# -*- coding: utf8 -*-
import requests

def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/用户名/私有仓库名/dispatches",
    json = {"event_type": "start"},
    headers = {"User-Agent":'curl/7.52.1',
              'Content-Type': 'application/json',
              'Accept': 'application/vnd.github.everest-preview+json',
              'Authorization': 'token Github访问Token'})

    if r.status_code == 204:
        return "This's OK!"
    else:
        return r.status_code
  • 特别注意的是 'Authorization': 'token bc9aa5a5dfa324545007eab6c1865d' 这样形式存在的。

  • 触发方式如下,没有可以在触发管理中新建触发管理。

    • 触发方式:API 网关触发器
    • API 服务类型:新建 API 服务
    • API 服务:SCF_API_SERVICE
    • 请求方法:ANY
    • 发布环境:发布
    • 鉴权方法:免鉴权
    • 启动集成响应:未启用
  • 触发管理 中能看到访问路径,记下这个访问路径,我们要写入语雀中去

语雀配置

  • 没有账户点击这里申请语雀账户,注册成功后在知识库中新建一个知识库,权限选择互联网可见,知识库名称自己命名,比如我这里为 tohexo
  • 然后点击右上角头像设置刚新建的知识库,在知识库信息中便可修改路径,比如我的全路径为 https://www.yuque.com/ccne2020/hexoblog 留意下这个链接,待会后面会取用这个链接中的相关信息。
  • 在知识库的开发者中,网页路径为 https://www.yuque.com/你的语雀用户名/知识库用户名/settings/webhooks 填入上面云函数的访问路径,名称自己写,然后把 仅主动推送更新触发发布文档更新文档删除文档 都勾选上点击添加
  • 在点击右上角头像,点击 个人设置token新建 ,用途自己填写,这里勾选 读取你的知识库 读取你的文档 后创建,记下这串token,后面要填写在Github私有仓库中。
  • 因为要用到 yuque-hexo 插件,因此不妨在本地执行以下 npm install yuque-hexo --save 好让hexo的 package.json 中写有 "yuque-hexo": "^1.6.5" 这样的字段。
  • 用记事本打开package.json文件,可以在 "dependencies": 字段中看到"yuque-hexo": "^1.6.5"
  • 接着配置如下代码
"yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "你的语雀名,我这里的是ccne2020",
    "repo": "你的语雀知识库名,我这里的是hexoblog",
    "mdNameFormat": "title",
    "postPath": "source/_posts/yuque",
    "onlyPublished": false
  },
  • 着在 "scripts": 字段下加入如下代码
  "start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",
  • 下面开始百度搜索 json在线检查 找一个检查json的网站打开,复制你文件的内容检查一遍看看能不能通过,能通过才可以用。
  • 如果你的知识库中没有文章的话,这是可以先发一篇文章。我的整个 package.json 文件内容如下:
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
"yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "ccne2020",
    "repo": "hexoblog",
    "mdNameFormat": "title",
    "postPath": "source/_posts/yuque",
    "onlyPublished": false
  },
  "hexo": {
    "version": "4.2.1"
  },
  "dependencies": {
    "hexo": "^4.2.1",
    "hexo-autonofollow": "^1.0.1",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-wordcount": "^6.0.1",
    "yuque-hexo": "^1.6.5"
  },
  "devDependencies": {
    "hexo-generator-baidu-sitemap": "^0.1.9",
    "hexo-generator-sitemap": "^2.0.0"
  }
}

Github Pages配置

  • 按理说,你应该具备此仓库,并且已经存放了hexo网站文件,如果没有,那么则创建一个以 你的github用户名.github.io 的公开仓库即可。
  • 下面打开git,没有的话去官网下载一个 https://git-scm.com/downloads ,可参见《Github Actions自动部署Hexo博客》中的 密钥生成 这一小节。
  • git执行 ssh-keygen -f YUQUE_GIT_HEXO 一路回车即可得到两个文件
  • 打开此仓库的Settings→Deploy keys→Add deploy key ,Title字段填写 YUQUE_GIT_HEXO.PUB ,Key就把公钥,就是带.PUB后缀名的文件内容粘贴到此,同时一定要勾选 Allow write access
  • 因为我这里是用网页上传来实现,需要手动这般操作。

Github Private配置

  • 这个Github Private是你创建的一个私有库,用来存放hexo所需文件的仓库。

  • 打开此仓库的Settings→Secrets→New Secrets ,这里的 Name 字段要填写为 YUQUE_GIT_HEXOValue 字段填写前面生成的 YUQUE_GIT_HEXO 文件中的内容。

  • 还记得语雀配置中的token吗?现在也重复上述操,而这里的Name 字段填写为YQ_TOKEN 如果你填写的不是这个值,那么请在Github Actions的脚本代码做修改。

  • 然后上传hexo所需文件,直接用网页上传亦可,文件有如下:

    • scaffolds文件夹
    • source文件夹
    • theme文件夹
    • _config.yml
    • package.json
    • package-lock.json

配置Github Actions脚本

  • 在仓库中点击 Actions-->Set up a workflow yourself 粘贴如下代码后做相应修改即可
# workflow name
name: Yuque To Github Pages

# 当有 push 到仓库和外部触发的时候就运行
on: [push, repository_dispatch]

# YQ_TOKEN
# YUQUE_GIT_HEXO
jobs:
  deploy:
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai

    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master

    # from: https://github.com/actions/setup-node
    - name: Setup Node.js 10.x
      uses: actions/setup-node@master
      with:
        node-version: "10.x"

    # from https://github.com/x-cold/yuque-hexo
    - name: Setup Hexo Dependencies and Generate Public Files
      env:
    # from: 这里的YUQUE_TOKEN: $不能随意改
        YUQUE_TOKEN: ${{ secrets.YQ_TOKEN }}
      run: |
        npm install hexo-cli -g
        npm install yuque-hexo -g
        npm install
        npm run start

    # from https://github.com/peaceiris/actions-gh-pages
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.YUQUE_GIT_HEXO }}
        external_repository: Github用户名/Pages仓库
        publish_branch: master
        publish_dir: ./public
        commit_message: ${{ github.event.head_commit.message }}

最后在Serverless中点击测试,如果成功的话应该可以看到 This's OK!。在语雀中无论删除文章,更新文章,新发布文章,都一定要选择 文档有较大更新,推送给关注知识库的人 才能触发这系列操作。

针对语雀图片无法正常显示的解决办法,找到主题的 layout 文件夹中的 post.ejs 文件中加上一句 <meta name="referrer" content="no-referrer" />可解决此问题。

最后总结

另外github actions可能对触发操作做了一定限制,因此不要频繁点击测试,可能会导致失败问题。我自己的感觉是前面我一分钟点击七八次都能通过测试,后面莫名其妙就失败了,猜想与此有关,然后过了几分钟再次点击,测试又通过。在一个我怀疑跟墙有关,反正很玄学。

现在可以尝试在语雀中发布一篇文章应该可以触发一系列操作。经过反复摸索和练习,终得以成功,但我好像并不喜欢这样的写作方式,可能是与我习惯有关吧!