成本 0元 / 30元每年

腾讯云/阿里云域名 30元
腾讯云/阿里云云函数
hexo站点工程
github账户
语雀

成果：
主站：https://blog.murphyyi.com/
github：构建地址https://github.com/zy84338719/hexo/actions
仓库地址：

一、Hexo+Github 的痛点

1.为啥要用hexo+github？

作为一个程序猿，博客肯定是必须要有的拉，github也是必须要混的拉~所以:

  • hexo + github = 高大上

image.jpeg

2.蛋疼的写作体验

使用hexo，会面临如下问题：

  • 博客源码怎么管理？
  • 图片存在哪？
  • 如何编写markdown文件？

相信很多人都在使用本地编辑器来写博客，那体验，真心蛋疼，比如说vscode，可视化插件一般般，图片还不能复制黏贴，想插入个图片还要先保存成文件放在本地，然后再引用，啥？你说七牛云存储？哪有复制黏贴爽呀~
当然，博客源码可以使用github-action 来做持续集成，想写博客或者换个电脑，clone一下源仓库，写完push一下，就可以不用管了。but，比起独立站点的博客，如wordpress，还是觉得写作体验有点不爽。

image.jpeg

二、具体流程

  1. Hexo 博客搭建好，将源码上传到 Github，私有还是公有库都可以
  2. 在 Github 中开启 Github Actions 服务，配置 yaml 格式的 deploy 脚本
  3. 注册语雀，创建知识库并发布一篇文章，必须发布过文章，因为 yuque-hexo 会删除 _posts 文件夹
  4. 编写 serverless 函数，测试可以触发 Github Actions，获取触发地址
  5. 配置语雀的 webhook，使其可调用 serverless 函数
  6. 语雀编写文章后触发 Github Actions 实现 Hexo 的自动部署，生成静态文件并发布

Hexo Github 语雀 yuque-hexo github-action severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ - 图3
下面以 Github Actions 将 Hexo 生成的静态页面推送到 Github Pages 举例

创建 Github Pages

  1. 登录 github
  2. 创建项目，项目名字username.github.io，必须为公开库

    创建 Hexo 博客并配置

    可参考：

配置完成，本地预览达到自己满意，编写文章发布一切搞定后就能继续了。

搭建完成效果：https://github.com/zy84338719/blog
页面地址：https://blog.murphyyi.com

三、配置 Github Actions 脚本

两种方法配置，内容一样

  1. 在 Hexo 源码仓库的页面选择Actions—>Set up a workflow yourself，进行网页编写
  2. 在本地环境根目录创建.github/workflows文件夹，里面放写好的 yaml 脚本

脚本我以一种举例，其他方法同样可以实现，请查看我的博客
如：我的例子

  1. # workflow name
  2. name: Deploy To Github Pages
  3. # 当有 push 到仓库和外部触发的时候就运行
  4. on: [push, repository_dispatch]
  5. # YUQUE_TOKEN
  6. # Github_SSH_PRIVATE_KEY
  7. jobs:
  8.   deploy:
  9.     name: Deploy Hexo Public To Pages
  10.     runs-on: ubuntu-latest
  11.     env:
  12.       TZ: Asia/Shanghai
  13.     steps:
  14.     # check it to your workflow can access it
  15.     # from: https://github.com/actions/checkout
  16.     - name: Checkout Repository master branch
  17.       uses: actions/checkout@master
  18.     # from: https://github.com/actions/setup-node
  19.     - name: Setup Node.js 10.x
  20.       uses: actions/setup-node@master
  21.       with:
  22.         node-version: "10.x"
  23.     # from https://github.com/x-cold/yuque-hexo
  24.     - name: Setup Hexo Dependencies and Generate Public Files
  25.       env:
  26.         YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}
  27.       run: |
  28.         npm install hexo-cli -g
  29.         npm install yuque-hexo -g
  30.         npm install
  31.         npm run start
  32.     # from https://github.com/peaceiris/actions-gh-pages
  33.     - name: Deploy
  34.       uses: peaceiris/actions-gh-pages@v3
  35.         with:
  36.           deploy_key: ${{ secrets.Github_SSH_PRIVATE_KEY }}
  37.           external_repository: 用户名/仓库
  38.           publish_branch: master
  39.           publish_dir: ./public
  40.           commit_message: ${{ github.event.head_commit.message }}

这个脚本实现了发布 Hexo 的 Public 到 Pages，这只是一种方法，你也可以使用 hexo d 、API、github-pages-deploy-action等形式进行发布。
但是现在你还不能运行，因为里面的隐藏参数还没有设置
image.png

参数 说明
YUQUE_TOKEN_INFO 从语雀获取的 TOKEN，语雀上点击个人头像 –> 设置 –> Token 即可获取，要在 Hexo 源仓库的 Settings–>Secrets 中进行添加，对重要信息进行保密
ACCESS_TOKEN 是SSH-Key密钥中的私钥，需要在Secrets中进行添加，公钥（.pub）已经存储在 Github 中

四、配置腾讯 serverless 云函数

  1.   1. 登录腾讯云，搜索云函数，创建
  2.   2. 选择 `python`，2.7 和 3.6 都行，空白函数
  3.   3. 运行角色，`SCF_QcsRole`即可
  4.   4. 注意执行方法，有强制要求

Hexo Github 语雀 yuque-hexo github-action severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ - 图5

Hexo Github 语雀 yuque-hexo github-action severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ - 图6
这里我使用的是 python 2.7

python

  1. # -*- coding: utf8 -*-
  2. import requests
  3. def main_handler(event, context):
  4.     r = requests.post("https://api.github.com/repos/用户名/仓库名/dispatches",
  5.     json = {"event_type": "start"},
  6.     headers = {"User-Agent":'curl/7.52.1',
  7.               'Content-Type': 'application/json',
  8.               'Accept': 'application/vnd.github.everest-preview+json',
  9.               'Authorization': 'token Github访问Token'})
  10.     if r.status_code == 204:
  11.         return "This's OK!"
  12.     else:
  13.         return r.status_code

在函数代码中测试一下，如果 Actions 正常触发，大功告成

  1.   1. 配置触发方式，保存，获取到 访问路径，后面要用到
  2.   - 触发方式：API 网关触发器
  3.   - API 服务类型：新建 API 服务
  4.   - API 服务：SCF_API_SERVICE
  5.   - 请求方法：ANY
  6.   - 发布环境：发布
  7.   - 鉴权方法：免鉴权
  8.   - 启动集成响应：未启用

Hexo Github 语雀 yuque-hexo github-action severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ - 图7

五、配置语雀

  1. 注册，登录
    1. 创建知识库–>文档知识库–>可见范围为互联网可见
    2. 工作台–>知识库–>找到新创建的知识库，管理–>设置–>路径进行自定义，后面有用

image.png

  1.   1. 工作台–>知识库–>找到新创建的知识库，管理–>设置–>开发者–>名称任意。URL 为云函数的地址，即上面获取到的 **访问路径**

image.png
权限建议选择

  1.   - 仅主动推送更新触发（强烈建议）
  2.   - 发布文档
  3.   - 更新文档
  4.   - 删除文档

可本地更新后 push 或者直接在 github 网页修改
先安装 yuque-hexo

bash

  1. npm install yuque-hexo --save

编辑package.json文件，添加以下内容
Npm 脚本 “start” 和 “yuqueConfig”，将操作命令合并为一个脚本，只需要执行 npm run start即可完成语雀的同步和 Hexo 的清理和静态文件生成

  1. {
  2.  ...
  3.   "scripts": {
  4.     "start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",
  5.     "build": "hexo generate",
  6.     "clean": "hexo clean",
  7.     "deploy": "hexo deploy",
  8.     "server": "hexo server"
  9.   },
  10.  ...
  11.   "yuqueConfig": {
  12.     "baseUrl": "https://www.yuque.com/api/v2",
  13.     "login": "语雀个人路径",
  14.     "repo": "知识库名称",
  15.     "mdNameFormat": "title",
  16.     "postPath": "source/_posts",
  17.     "onlyPublished": false
  18.   }
  19. }

例子：https://github.com/zy84338719/hexo/blob/master/package.json

六、Come on 发布文章

1