使用Serverless + TravisCI 持续构建Hexo博客

之前使用过 Netlify 持续构建我的 Hexo 博客 ，比较方便，但是访问速度太慢了，不敢恭维（ 点这里看原文 ）

所以考虑迁移到 Coding Pages 上面来，但是本地构建Nodejs环境还是比较麻烦，需要装一堆东西，这次又研究了一个比较好的方案，大致流程如下：

1)在 语雀 上编写文章  

2)配置语雀仓库的 Webhook 通知，当更新文章时通知给 Serverless

3)使用腾讯云提供的 Serverless ，编写云函数接收 Webhook 通知，然后通过API的方式触发 TravisCI 构建  

4) 在 Github 新建私有仓库，存储 Hexo 程序源代码，并编写相关的构建 & 发布规则（发布到 Coding Pages ）  

<!--more-->

关于权限

一些涉及安全的配置项（如： Token 、 SSH Key 等等）我选择了直接使用明文存储在Hexo源码仓库的配置文件中，网上一大堆教程都是使用各种加密，环境变量的方式来注入，但是现在Github私有仓库免费了，就没有这个必要了。

搭建Hexo

在本地搭建hexo的过程就不细说了，这里只贴一下关键的配置。

{
  "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 源文件

关于几个自定义命令：

• sync ：从语雀同步文章，并生成 Markdown 文件到本地 source/_posts
• sync:generate ：从语雀同步文章，生成文件后，使用 hexo generate 生成网站静态文件到 public/

完成配置后，在本地使用 npm run sync:generate && hexo s 可以先预览博客效果

创建Coding Pages仓库

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

该项目是一个静态文件托管项目，

将之前通过 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的触发方式：

创建成功后，会得到一个URL地址，只要访问这个地址，就会触发我们的云函数，云函数又会触发TravisCI，完美。

配置语雀Webhook

大功告成，现在只要在语雀上发布或修改文章，过几分钟后，就会自动同步到你的网站上面去了！

发布文章测试

点击发布后，先到Serverless控制台查看相关日志：

发现云函数已经被触发了，这时再到TravisCI去看看构建日志：

等待构建完成后，访问我们的网站： https://wuwenze.com ，不出所料，经过短暂的等待，文章已经发布成功了！

网站测速：（比Netlify好了不是一点半点）