之前使用过Netlify
持续构建我的Hexo
博客
,比较方便,但是访问速度太慢了,不敢恭维(点这里看原文)
所以考虑迁移到Coding Pages
上面来,但是本地构建Nodejs环境还是比较麻烦,需要装一堆东西,这次又研究了一个比较好的方案,大致流程如下:
1) 在语雀上编写文章
2) 配置语雀仓库的Webhook
通知,当更新文章时通知给Serverless
3) 使用腾讯云提供的Serverless
,编写云函数接收Webhook
通知,然后通过API的方式触发TravisCI
构建
4) 在Github
新建私有仓库,存储Hexo
程序源代码,并编写相关的构建 & 发布规则(发布到Coding Pages
)
关于权限
一些涉及安全的配置项(如: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好了不是一点半点)