使用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 "[email protected]" - 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 "[email protected]" - git add . - git commit -m "Update By TravisCI With Build $TRAVIS_BUILD_NUMBER" - git push --force --quiet "https://wenzewoo:[email protected]/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好了不是一点半点)