使用Serverless + TravisCI 持續構建Hexo博客

時間 2019-11-16

標籤使用 serverless travisci 持續構建 hexo 博客简体版

原文原文鏈接

以前使用過Netlify持續構建個人Hexo博客，比較方便，可是訪問速度太慢了，不敢恭維（點這裏看原文）
因此考慮遷移到Coding Pages上面來，可是本地構建Nodejs環境仍是比較麻煩，須要裝一堆東西，此次又研究了一個比較好的方案，大體流程以下：html

1) 在語雀上編寫文章
2) 配置語雀倉庫的Webhook通知，當更新文章時通知給Serverless
3) 使用騰訊雲提供的Serverless，編寫雲函數接收Webhook通知，而後經過API的方式觸發TravisCI構建
4) 在Github新建私有倉庫，存儲Hexo程序源代碼，並編寫相關的構建 & 發佈規則（發佈到Coding Pages）  node

python

關於權限

一些涉及安全的配置項（如：Token、SSH Key等等）我選擇了直接使用明文存儲在Hexo源碼倉庫的配置文件中，網上一大堆教程都是使用各類加密，環境變量的方式來注入，可是如今Github私有倉庫免費了，就沒有這個必要了。git

搭建Hexo

在本地搭建hexo的過程就不細說了，這裏只貼一下關鍵的配置。github

{
  "name": "wuwenze.com",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "yuqueConfig": {
    "postPath": "source/_posts",
    "cachePath": "yuque.json",
    "mdNameFormat": "slug",
    "adapter": "hexo",
    "concurrency": 5,
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "wuwenze",
    "repo": "blog",
    "token": "???",
    "onlyPublished": true
  },
  "scripts": {
    "sync": "yuque-hexo clean && yuque-hexo sync",
    "sync:generate": "npm run sync && hexo clean && hexo generate"
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-pug": "0.0.5",
    "hexo-renderer-sass": "^0.4.0",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3",
    "yuque-hexo": "git+https://github.com/wenzewoo/yuque-hexo.git"
  }
}

這裏使用了yuque-hexo這個插件，其目的就是從語雀API上拉取相關的文章，生成相關的Markdown源文件npm

關於幾個自定義命令：json

sync：從語雀同步文章，並生成Markdown文件到本地source/_posts
sync:generate：從語雀同步文章，生成文件後，使用hexo generate生成網站靜態文件到public/

完成配置後，在本地使用npm run sync:generate && hexo s 能夠先預覽博客效果api

建立Coding Pages倉庫

地址：https://dev.tencent.com/user/projects/createsass

該項目是一個靜態文件託管項目，
將以前經過sync:generate命令生成在public/文件夾下的文件上傳到這裏，開啓Pages服務便可訪問安全

這一步如今我還須要手動經過git push命令來操做，命令大體以下：

- cd ./public
  - git init
  - git config user.name "wenzewoo"
  - git config user.email "wenzewoo@gmail.com"
  - git add .
  - git commit -m "Update Site"
  - git push --force --quiet "https://git.dev.tencent.com/wenzewoo/wenzewoo.coding.me.git" master:master

Push成功後，經過提供的二級域名，能夠查看部署好的靜態網站，固然，也能夠自定義域名/SSL

到這裏就已經完成完整的發佈流程了，接下來要作的就是經過TravisCI實現全自動部署，重頭戲來了！

.travis.yml

在後面的步驟開始前，咱們先準備一個.travis.yml文件，放在hexo項目的根目錄，該文件用於描述TravisCI如何去構建咱們的網站

language: node_js
node_js: stable

install:
  - npm install

script:
  - npm run sync:generate

after_script:
  - cd ./public
  - git init
  - git config user.name "wenzewoo"
  - git config user.email "wenzewoo@gmail.com"
  - git add .
  - git commit -m "Update By TravisCI With Build $TRAVIS_BUILD_NUMBER"
  - git push --force --quiet "https://wenzewoo:??@git.dev.tencent.com/wenzewoo/wenzewoo.coding.me.git" master:master

branches:
  only:
    - master

cache:
  directories:
    - node_modules

在Push靜態文件時，直接將用戶名/密碼拼接在了連接上，這樣的好處是不須要去配置一堆繁瑣的SSH Key，因爲相關的源碼最終咱們會放到Github的私有倉庫中，這些我就不擔憂了。

建立Github 私有倉庫

將Hexo整個項目直接Push到Github倉庫中，如：https://github.com/wenzewoo/wuwenze.com

Travis CI

經過TravisCI關聯剛剛建立的源碼倉庫，讀取.travis.yml配置文件，進行網站構建。
地址：https://travis-ci.com/account/repositories

關聯完成後，只要源碼倉庫有提交（或API觸發），就會觸發TravisCI構建任務。

構建完成後，咱們的網站就被更新了，如今咱們開始考慮如何讓語雀通知TravisCI進行代碼構建呢？

編寫Serverless

使用騰訊的無服務器雲函數，建立API網關接口，該接口負責接收語雀的Webhook通知，而後中轉給TravisCI

函數代碼至關簡單（這裏選擇了Python2.7做爲開發語言）

# -*- coding: utf8 -*-
import httplib

# TriggerTravisCI: 觸發TravisCI，更新博客
def main_handler(event, context):
  token = "???"
  repos = "wenzewoo%2Fwuwenze.com"  # wenzewoo/wuwenze.com

  httplib. \
    HTTPSConnection("api.travis-ci.com"). \
    request('POST', "/repo/%s/requests" % repos, None, {
    "Content-Type": "application/json",
    "Travis-API-Version": 3,
    "Authorization": "token %s" % token,
    "Content-Length": 0
  })
  return {"code": 200, "message": "Call completed."}

這裏的Token和Repo參數，在TravisCI裏面都能找到，就不截圖了。

選擇Serverless的觸發方式：