前言
Github Pages 不能运行动态程序,只能输出一些静态内容。因此 Github Pages 非常适合用于前端项目的展示。可用于存放项目介绍、项目文档或者个人博客。本文介绍了怎么用 Travis CI 自动化部署 Github Pages。
CI
持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。目前 github 开源项目用的较多的 CI 主要是 Circle CI 和 Travis CI,两者都是利用容器技术来适配不同项目环境。
GitHub Pages
hexo虽然可以方便地部署github静态博客,但是仅仅是把最终生成的html保存在repository中,像原始的Markdown文件,hexo配置文件,主题配置文件,修改文件都仅仅是保存在本地。这样不利于保存,也无法查看每篇博客的修改历史。
在github上搭blog最大的问题就是,每次提交都需要先hexo g,然后再hexo d生成文件,这样哪怕是改一个小的地方都需要重新编译全部blog。
Travis CI & GitHub Pages
以我的博客为例
coder-lida.github.io
:博客静态文件仓库
blog-source
:文档源码仓库
文档源码放置在blog-source仓库,最终部署文件在 coder-lida.github.io仓库。当在 blog-source仓库更改某些内容之后,通过运行 hexo g来生成最终部署的 HTML 文件到 public 目录,随后再进入 public 目录初始化 git 仓库、添加文件、提交文件,最后将提交强制推送到远程coder-lida.github.io仓库。
Start Travis CI
.travis.yml
Hexo官网配置,官方配置是在同一个仓库的不同分支来实现的。我没用这种方式,而是创建了2个仓库,一个放部署的网页,另一个放blog的源文件,包括post和themes。
注册并设置Travis CI
Travis CI官网
点击右上角使用Github登录的按钮
登录成功后
选中博客的源文件仓库,点击Setting
关于GH_TOKEN
登录到GitHub,点击右上角头像框,选择Settings
选择Developer settings
添加一个token
填写token description,比如叫hexo deploy.
勾选上授予的权限,比如我勾选的是repo和gist,然后create.
将产生的token串复制保留下来,后面会使用到,如果丢失,只能重新产生。
将生成的token设置到Travis CI作为环境变量。
到此Travis CI设置完成。
添加 .travis.yml
先贴出我的配置
language: node_js #设置语言
node_js: stable # nodejs版本
branches:
only:
- master #只监测master分支
cache:
apt: true
directories:
- node_modules # 缓存不经常更改的内容
before_install:
- git config --global user.name "your name" # github用户名
- git config --global user.email "your email" # 邮箱
- npm install -g hexo-cli
install:
- npm i
before_script:
# 无其他依赖项所以执行npm run build 构建就行了
script:
- hexo clean #清除
- hexo generate #生成
after_script:
- git clone https://${GH_REF} .deploy_git # GH_REF是最下面配置的仓库地址
- cd .deploy_git
- git checkout master
- cd ../
- mv .deploy_git/.git/ ./public/ # 这一步之前的操作是为了保留master分支的提交记录,不然每次git init的话只有1条commit
- cd ./public
- git init
- git add .
- git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`" # 提交记录包含时间
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master #GH_TOKEN是在Travis中配置环境变量的名称
env:
global:
- GH_REF: github.com/coder-lida/coder-lida.github.io.git #设置GH_REF,换成自己用户名和仓库名
哪些文件需要提交到源文件的仓库
package-lock.json
文件在.gitignore
文件中加上
在经历的11次失败之后,第12次终于成功了。