教程：云端写作搭建自动化个人博客，Hexo+语雀+腾讯云函数。

原文发表在公众号：音乐和啤酒
因转载图片可能显示不全，可到原文查看。
https://mp.weixin.qq.com/s?__biz=MzI1NTg2NzQyOA==&mid=2247489178&idx=1&sn=a41a6400af3703ace1df85d34acf42fa&chksm=ea2e39d1dd59b0c76a9f4e38e8ce1345416515c8691fce04bd6e4790a6ee102faebf584bee42&mpshare=1&scene=1&srcid=1222PiZqOCbXJzVXNvqxSogq&sharer_sharetime=1640131461472&sharer_shareid=b206f2fa812b6ca26b027c2ef010574f#rd

Copy
如何利用hexo+语雀+serverless云函数，实现自动发布博客

花了几天时间，翻遍了全网的所有相关资料，最后总结成这样一篇算是教程吧，也是自己的一个记录。通过本教程，你可以将你的文章储存在云端，实现云端写作（不限于 MAC 系统、Windows 系统、手机微信小程序），摆脱本地机器的限制。除此之外，优秀简约的富文本编辑器能极大提升你的写作效率，使你能更专注于文本的写作。通过结合 github action（github 自动部署）、serverless 云函数（腾讯云 API，用于部署事件的触发）、语雀（文档的发布）、Hexo（博客系统）自动实现文章发布到博客展现的流程。

使用前的准备
为了更好、更方便的完成 hexo× 语雀的部署。在开始流程搭建的操作前，你需要一定的基础，遇到问题可以自行百度，并按照以下步骤循序渐进吧。
账号的申请与授权

Copy
语雀账号--  申请
serverless 方案一（本人使用）：腾讯云账号登录授权（ https://console.cloud.tencent.com/scf/），云函数授权后再进行 API 授权（ https://console.cloud.tencent.com/apigateway/index）这样才能正常使用云函数功能

serverless 方案二：百度云授权（ https://console.bce.baidu.com/cfc/#/cfc/functions）， 开通方法指南
方案三：使用 vercel 构建的 api。

获取 github 私钥，前往 github 的 token 设置（ https://github.com/settings/tokens），点击生成密钥按钮，填写密钥名称，勾选 repo 选项。将生成的密钥保存在桌面新建的 txt 文件里备用。

仓库的准备
为了实现 hexo 的自动部署，需要将本地的源码文件交与 github 托管，你可以创建私有仓库（建议）也可以创建共有仓库。首先在 github 上创建私有仓库。

步骤一：
创建语雀仓库
登陆语雀，点击知识库 👉 新建知识库。将知识库的可见范围改为 “互联网可见”。

旧文章的导入，或新建（必须有至少一篇文章）
点击知识库的管理按钮，选择新建下的导入，将博客中_post 文章进行批量导入。

模板的创建（可后续再建）
为了方便以后文档的撰写，可以新建模板。注意图片链接需要加上’’防止被渲染成链接。

步骤二：安装语雀插件进行本地调试
为了确保在云端能够正常生成博客，首先在本地进行调试。
语雀插件的安装
首先在根目录打开终端安装 yuque-hexo。
POWERSHELL

Copy
1
npm i -g yuque-hexo

修改 package.json
在第一个对象代码块后增加”yuqueConfig” 代码块。
JSON

Copy
{  "name": "hexo-site",  "version": "0.0.0",  "private": true,  "scripts": {    "build": "hexo generate",    "clean": "hexo clean",    "deploy": "hexo deploy",    "server": "hexo server"},  "yuqueConfig": {    "postPath": "source/_posts/yuque",    "cachePath": "yuque.json",    "mdNameFormat": "slug",    "adapter": "markdown",    "concurrency": 5,    "baseUrl": "https://www.yuque.com/api/v2",    "login": "你的语雀用户名",    "repo": "你的语雀知识库名",    "token": "******此处修改为你的语雀TOKEN*******",    "onlyPublished": true,    "onlyPublic": true  },

其中需要修改”login”、”repo”、”token” 字段。

Copy
点击进入博客的知识库，在浏览器地址栏中将用户名和仓库名复制分别粘贴为”login”、”repo” 的字段。

语雀的token 是在右上角头像 -> 账户设置 -> Token 添加的，权限的话只给读取就可以。复制粘贴获取的”token” 字段。

修改 “scripts” 增加”sync”: “yuque-hexo sync” 和 “clean”: “yuque-hexo clean”。
JSON

Copy
{  "name": "hexo-site",  "version": "0.0.0",  "private": true,  "scripts": {    "build": "hexo generate",    "clean": "hexo clean",    "deploy": "hexo deploy",    "server": "hexo server",    "sync": "yuque-hexo sync",    "clean:yuque": "yuque-hexo clean"  },  "yuqueConfig": {    "postPath": "source/_posts",    "cachePath": "yuque.json",    "mdNameFormat": "slug",    "adapter": "markdown",    "concurrency": 5,    "baseUrl": "https://www.yuque.com/api/v2",    "login": "用户名",    "repo": "知识库名",    "token": "********TOKEN***************",    "onlyPublished": true,    "onlyPublic": true  },  "hexo": {    "version": "5.2.0"  },  "dependencies": {    "yuque-hexo": "^1.6.0",    "gulp": "^4.0.2",    "gulp-base64": "^0.1.3",    "gulp-htmlmin": "^5.0.1",    "gulp-tobase64": "^1.1.2",    "hexo": "^5.0.0",    "hexo-abbrlink": "^2.2.1",    "hexo-deployer-git": "^2.1.0",    "hexo-generator-archive": "^1.0.0",    "hexo-generator-baidu-sitemap": "^0.1.9",    "hexo-generator-category": "^1.0.0",    "hexo-generator-feed": "^3.0.0",    "hexo-generator-index-pin-top": "^0.2.2",    "hexo-generator-sitemap": "^2.1.0",    "hexo-generator-tag": "^1.0.0",    "hexo-helper-live2d": "^3.1.1",    "hexo-offline-popup": "^1.0.3",    "hexo-renderer-ejs": "^1.0.0",    "hexo-renderer-marked": "^3.0.0",    "hexo-renderer-pug": "^1.0.0",    "hexo-renderer-stylus": "^1.1.0",    "hexo-server": "^1.0.0",    "hexo-tag-aplayer": "^3.0.4",    "hexo-wordcount": "^6.0.1",    "live2d-widget-model-unitychan": "^1.0.5",    "workbox-build": "^5.1.4"  },  "devDependencies": {    "@babel/core": "^7.12.3",    "@babel/preset-env": "^7.12.1",    "del": "^6.0.0",    "gulp": "^4.0.2",    "gulp-babel": "^8.0.0",    "gulp-clean-css": "^4.3.0",    "gulp-cli": "^2.3.0",    "gulp-html-css-js-base64": "^0.0.4",    "gulp-htmlclean": "^2.7.22",    "gulp-htmlmin": "^5.0.1",    "gulp-imagemin": "^7.1.0",    "gulp-imgs-base64": "^1.0.2",    "gulp-minify-inline-json": "^1.3.4",    "gulp-uglify": "^3.0.2",    "gulp-uglify-es": "^2.0.0"  }}

进行本地调试
添加完成后保存，在执行命令前，请先备份自己的_post 文件夹，因为语雀的下载操作会覆盖原有的_post 文件夹。在终端中输入‘yuque-hexo sync’就会把语雀的文章给下载下来。然后通过‘hexo g&hexo s’进行调试。ps：输入‘yuque-hexo clean’就会清除_post 下的所有文章。如果存在外挂标签，请确保外挂标签格式的书写规范，否则容易报错。

步骤三：配置 github action
删除主题版本的控制文件
因为在仓库里面再放一个仓库是没法把里面那个仓库 push 到 github 的，只会传一个空文件夹，会导致后期博客成了空白页面，需要把 git clone 的 hexo 主题里的.git 文件夹给删掉。
这里只列出了最简单的方法，另外你也可以尝 fork 创建自己主题的方法，这里暂时不予以介绍。

修改 hexo 主题文件中的 meta
以 butterfly 主题为例，打开主题文件的 /themes/butterfly/layout/includes/head.pug。在 meta (name=”theme-color” content=themeColor) 后方添加 meta (name=”referrer” content=”no-referrer”)。该步骤是确保语雀中的图片可以正常加载。
YAML

1
meta(name="theme-color" content=themeColor)meta(name="referrer" content="no-referrer")

修改 hexo 的_config,yml
前往博客的根目录，修改 hexo 的_config,yml 中关于 develop 的配置。
POWERSHELL

Copy
1
# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repository:   github: https://用户名:保存在txt中的密钥@github.com/用户名/仓库名.git  branch: master注意这个坑，仓库名字是.Github.io

这里只列出一种简单的方案，其他的有时间再介绍。
创建 github action 脚本
在博客根目录下新建.github 文件夹（点不要漏掉了），在该文件夹下新建 workflows 文件夹。

在 workflows 文件夹下新建 autodeploy.yml。并填入以下代码。将【更新 语雀拉取缓存及文章】与【部署】 user.name 和 user.email 后面的 “” 信息修改为自己的信息，注意对齐。
YAML

Copy
1
name: 自动部署# 当有改动推送和语雀发布时，启动Actionon: [push, repository_dispatch]jobs:  deploy:    runs-on: ubuntu-latest    steps:      - name: 检查分支        uses: actions/checkout@v2        with:          ref: master      #2020年10月后github新建仓库默认分支改为main，注意更改      #但私有仓库貌似还是master并没有变      - name: 安装 Node        uses: actions/setup-node@v1        with:          node-version: "12.x"      - name: 安装 Hexo        run: |          export TZ='Asia/Shanghai'          npm install hexo-cli -g          #npm install gulp-cli -g          #如果你有使用gulp的话，打开上面这一行          npm install yuque-hexo -g          yuque-hexo clean          yuque-hexo sync      - name: 更新 语雀拉取缓存及文章 #更新yuque 拉取的文章到GitHub仓库        run: |          echo `date +"%Y-%m-%d %H:%M:%S"` begin > time.log          git config --global user.email "￥@.com"          git config --global user.name "￥￥￥"          git add .          git commit -m "Refresh yuque json" -a      - name: 推送 语雀拉取缓存及文章 #推送修改后的yuque json        uses: ad-m/github-push-action@master        with:          github_token: ${{ secrets.GITHUB_TOKEN }}      - name: 缓存 Hexo        uses: actions/cache@v1        id: cache        with:          path: node_modules          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}      - name: 安装依赖        if: steps.cache.outputs.cache-hit != 'true'        run: |          npm install --save      - name: 生成静态文件        run: |          hexo clean          hexo g          #gulp          #如果你有使用gulp的话，打开上面这一行      - name: 部署        run: |          git config --global user.name "￥￥"          git config --global user.email "￥￥￥@.com"          hexo deploy

上传博客源码
打开终端输入以下命令，上传你的博客源码到私有源码仓库。
POWERSHELL

Copy
git initgit add .git commit -m "first commit"git remote add origin https://github.com/你的用户名/你的私有博客源码仓库名.gitgit push -u origin master

进行云端调试
上传后你会发现 github action 生效。等待几分钟后，如果打勾，就说明部署成功。如果未打勾请检查出错的步骤。

time.log 文件最近似乎不会自动生成，所有如果 action 不成功，请手动在仓库里新建 time.log
步骤四：配置云函数
vercel 方案（推荐）
为了方便大家调用，我用 python 写了一个 api。比较蛋疼的是，在仓库里填写 github 的私钥 github 会自动删除私钥。所以我试了好久都没成功。因此，我直接将 api 设置成了参数传递型的，供大家调用。api 地址：https://yuque-vercel-webhook-api.vercel.app/api?。当然你也可以 fork 项目在 vercel 中自行搭建，将‘ https://yuque-vercel-webhook-api.vercel.app’更换为你的 app 应用链接。你需要传递的参数有 token，user，source。
CODE

Copy
https://yuque-vercel-webhook-api.vercel.app/api?token='{填写你的github私钥}'&user='{填写你的github用户名}'&source='{填写你的github仓库地址}'示例：https://yuque-vercel-webhook-api.vercel.app/api?token='8888888888'&user='Zfour'&source='my-blog-source-file'将这个URL路径作为触发链接，在语雀中进行配置。

修改触发链接里的参数项，访问这个链接，如果出现‘This’s OK!’说明配置成功。复制 URL 路径作为触发链接，在语雀中进行配置。
百度云方案（推荐）
新建一个云函数
登陆后，点击创建函数。

选择空白函数后，超时设置 10s，运行时选择 python2.7。点击下一步。
选择 HTTP 触发器，URL 路径填’/‘，HTTP 方法填写 POST 和 GET，然后点击提交。
点击函数，选择函数列表，将以下代码粘贴并保存，将用户名，仓库地址改为自己的信息。将保存的私钥进行替换 ****，token 字段需要保留。测试代码，当返回”This’s OK!” 且 github action 开始运行则说明成功。

PYTHON

Copy
# -*- coding: utf8 -*-import requestsdef handler(event, context):    r = requests.post("https://api.github.com/repos/用户名/源码仓库/dispatches",    json = {"event_type": "run-it"},    headers = {"User-Agent":'curl/7.52.1',              'Content-Type': 'application/json',              'Accept': 'application/vnd.github.everest-preview+json',              'Authorization': 'token ****GITHUB的*******'})    if r.status_code == 204:        return "This's OK!"    else:        return r.status_code

复制 URL 路径作为触发链接，在语雀中进行配置。
腾讯云方案（有使用期限）
新建一个云函数
腾讯云方案目前有 1 年的使用期限，目前在尝试阿里云方案和 vercel 方案。
登陆后，点击新建按钮。这个云函数有两个，一个是 severless 还有一个静态托管里的。不要静态托管里的啊。

填写基本信息。选择运行环境为 python2.7, 以空白方式创建。

填写以下脚本。将用户名，仓库地址改为自己的信息。将保存的私钥进行替换 ****，token 字段需要保留。

PYTHON

Copy
# -*- coding: utf8 -*-import requestsdef main_handler(event, context):    r = requests.post("https://api.github.com/repos/%%/%%/dispatches",    json = {"event_type": "run-it"},    headers = {"User-Agent":'curl/7.52.1',              'Content-Type': 'application/json',              'Accept': 'application/vnd.github.everest-preview+json',              'Authorization': 'token ******看上图********'})    if r.status_code == 204:        return "This's OK!"    else:        return r.status_code

点击保存并测试，如果返回”This’s OK!” 且 github action 开始运行则说明成功。
新建一个触发条件
点击触发管理，新建触发器。点击提交后复制访问路径。

记录这个访问路径。

步骤五：配置语雀的 webhook
设定触发规则
在知识库中选择设置。

设定触发规则，名字随便起。URL 就是上面记下的那个云函数的地址。粘贴在云函数处获取的访问路径（腾讯云）或 URL 链接（百度云）。

设置完毕后，你可以尝试发布一篇文章进行测试。如果 github action 开始执行则说明配置成功。
虽然现在可以很方便的使用语雀同步，自动部署发布文章，但是中间整个的过程实在太复杂，麻烦繁琐，坑太多了。建议缺乏动手能力的还是不要尝试了。老老实实的吧。
内容借鉴了很多前任的经验，但是仍有很多不如意的有地方，有什么疑问可以在这里留言。由于文章不是在公众号编辑的，格式上如有错误，可以查看我的网站原文。仅供参考。