如何利用hexo+語雀+serverless雲函數，實現自動發布博客
花了幾天時間，翻遍了全網的所有相關資料，最後總結成這樣一篇算是教程吧，也是自己的記錄。通過本教程，你可以將你的文章儲存在雲端，實現雲端寫作（不限於 MAC 系統、Windows 系統、手機微信小程序），擺脫本地機器的限制。除此之外，優秀簡約的富文本編輯器能極大提升你的寫作效率，使你能更專注於文本的寫作。通過結合 github action（github 自動部署）、serverless 雲函數（騰訊雲 API，用於部署事件的觸發）、語雀（文檔的發布）、Hexo（博客系統）自動實現文章發布到博客展現的流程。
使用前的準備
為了更好、更方便的完成 hexo× 語雀的部署。在開始流程搭建的操作前，你需要一定的基礎，遇到問題可以自行百度，並按照以下步驟循序漸進吧。
賬號的申請與授權
語雀賬號-- 申請
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
1
npm i -g yuque-hexo
修改 package.json
在第一個對象代碼塊後增加”yuqueConfig” 代碼塊。
JSON
{ "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” 字段。
點擊進入博客的知識庫，在瀏覽器地址欄中將用戶名和倉庫名複製分別粘貼為”login”、”repo” 的字段。
語雀的token 是在右上角頭像 -> 賬戶設置 -> Token 添加的，權限的話只給讀取就可以。複製粘貼獲取的”token” 字段。
修改 “scripts” 增加”sync”: “yuque-hexo sync” 和 “clean”: “yuque-hexo clean”。
JSON
{ "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”)。該步驟是確保語雀中的圖片可以正常加載。
YAML1
meta(name="theme-color" content=themeColor)meta(name="referrer" content="no-referrer")
修改 hexo 的_config,yml
前往博客的根目錄，修改 hexo 的_config,yml 中關於 develop 的配置。
POWERSHELL
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
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
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
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
# -*- 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
# -*- 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 開始執行則說明配置成功。
雖然現在可以很方便的使用語雀同步，自動部署發布文章，但是中間整個的過程實在太複雜，麻煩繁瑣，坑太多了。建議缺乏動手能力的還是不要嘗試了。老老實實的吧。
內容借鑒了很多前任的經驗，但是仍有很多不如意的地方，有什麼疑問可以在這裡留言。由於文章不是在公眾號編輯的，格式上如有錯誤，可以查看我的網站原文。僅供參考。