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

2019-05-18

之前使用过Netlify持续构建我的Hexo博客,比较方便,但是访问速度太慢了,不敢恭维 所以考虑迁移到Coding Pages上面来,但是本地构建Nodejs环境还是比较麻烦,需要装一堆东西,这次又研究了一个比较好的方案,大致流程如下:

1) **在语雀上编写文章   **2) **配置语雀仓库的Webhook通知,当更新文章时通知给Serverless   **3) **使用腾讯云提供的Serverless,编写云函数接收Webhook通知,然后通过API的方式触发TravisCI构建   **4) Github新建私有仓库,存储Hexo程序源代码,并编写相关的构建 & 发布规则(发布到Coding Pages)  

关于权限

一些涉及安全的配置项(如:TokenSSH 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 可以先预览博客效果

image.png

创建Coding Pages仓库

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

image.png

该项目是一个静态文件托管项目, 将之前通过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

image.png

Push成功后,通过提供的二级域名,可以查看部署好的静态网站,当然,也可以自定义域名/SSL image.png

到这里就已经完成完整的发布流程了,接下来要做的就是通过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

image.png

Travis CI

通过TravisCI关联刚刚创建的源码仓库,读取.travis.yml配置文件,进行网站构建。 地址:https://travis-ci.com/account/repositories

image.png image.png

关联完成后,只要源码仓库有提交(或API触发),就会触发TravisCI构建任务。 image.png

构建完成后,我们的网站就被更新了,现在我们开始考虑如何让语雀通知TravisCI进行代码构建呢?

编写Serverless

使用腾讯的无服务器云函数,创建API网关接口,该接口负责接收语雀的Webhook通知,然后中转给TravisCI

image.png

函数代码相当简单(这里选择了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的触发方式: image.png

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

配置语雀Webhook

image.png

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

发布文章测试

image.png

点击发布后,先到Serverless控制台查看相关日志: image.png

发现云函数已经被触发了,这时再到TravisCI去看看构建日志: image.png

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

image.png

网站测速:(比Netlify好了不是一点半点)

image.png