Travis CI自动部署Hexo博客到Github

使用Travis CI自动部署你的Hexo博客到Github上

问题由来

一般通过Hexo命令行三部曲:

- hexo clean
- hexo g(enerate)
- hexo d(eploy)

就可以清除项目缓存,生成静态网页,然后push静态网页到Github,然后访问https://GithubID.github.io就可以访问更新后的blog了。

通过另外三部曲:

- hexo clean
- hexo g(enerate)
- hexo s(erver)

即可开启本地服务器,通过浏览器访问http://localhost:4000便可以看到更新后的blog

但是: 由于上传到github上的只是静态网页文件,所以只能在具有整个网站项目源代码的电脑上进行写作,与文章同步与更新,而且每次都要执行hexo三部曲,不符合使用git的习惯。

解决方法

通过Travis CI自动部署,自动发布到github上,配置一下,便可实现在每次git push之后自动执行一个脚本,执行生成并发布等命令。相当于不在手动执行hexo三部曲,只用修改后,按照以往的git操作:

add->commit->push

便可自动将源代码pushgithub,然后由travis自动clone项目,并由travis的虚拟机自动执行hexo三部曲,从而deploy更新后的网站到github

技巧

在本地新建dev分支,并在远程新建dev分支,每次本地修改提交到远程dev分支(本地新建dev分支只是为了好操作,不新建dev分支也可以,也就是本地master提交到远程dev),travis配置文件.vravis.yml中监视远程dev分支的改变,build成功后添加动作:hexo deploy,其中_config.ymldeploy的分支为远程master,这样实现的效果是:

git push dev时,远程仓库的dev是整个项目源代码,而travis检测到dev分支改变,便会clone dev分支,并build,然后deploy到远程master分支,所以远程仓库master是整个blog的静态网页集合,于是实现了仓库中既有blog项目源代码,又有构建成功的整个项目,并且处在不同分支上。

具体配置

参考以下文章:

配置过程中遇到的问题

按照上面的第一篇配置,由于我是windows环境,所以按照上面的配置出现了错误,和博主下面说明的情况一致,没有解决。

于是尝试第二篇中的做法,结合第三篇文章中的配置说明,其中

# 这里的 REPO_TOKEN 是变量名,在后面的配置文件中会用到
# TOKEN 是上面github生成的Token
travis encrypt 'REPO_TOKEN=<TOKEN>' --add

cmd中运行上面的命令报错:

系统找不到指定文件

没有解决,最终查到travis使用方法,用下面指令代替:

travis encrypt -r pwmckenna/node-travis-encrypt GH_TOKEN=0efdabf1c44122b90db5****** --add

其实也就是将GH_TOKEN=TOKEN这个环境变量加密,以便在.travis.yml能够使用GH_TOKEN访问到TOKEN

附上.travis.yml配置:

language: node_js

node_js: stable

branches:
  only:
  - dev      # 监视github仓库中的dev分支,分支出现变化就执行build

before_install:
- export TZ='Asia/Shanghai'
- npm install -g hexo
- npm install -g hexo-cli

install:
- npm install

script:
- git submodule init      # 用于更新主题,更新源为自己的主题项目,否则会clone最新NexT主题,而官方主题配置文件没有设置
- git submodule update
- hexo clean && hexo g

env:
  global:
    secure: ***HcNd3E02rGSZ3mzYHmNwsTKBIXa8cdOHIqmnuV8P9xAFRaDRUEdE8gqFmNCeKd5hriM64sO5BGU/szI7Q2uJNhUgDg0Rw/UZMbZCei5Pf112qzDpbb/ok1PUU9Q282sI1YVf8poBUvMHmoHLOMayR25IjIysb5aE+8kpipDbReU=

after_success:
- git config --global user.name "xin053"
- git config --global user.email "13207130066.cool@163.com"
- sed -i'' "s~git@github.com:xin053/xin053.github.io.git~https://${GH_TOKEN}:x-oauth-basic@github.com/xin053/xin053.github.io.git~" _config.yml
- hexo deploy

项目根目录下新建.gitmodules文件,并写入:

[submodule "themes/next"]
    path = themes/next
    url = git://github.com/xin053/MyHexo_NexT_Theme

build时更新主题的源是自己修改后的主题,不能用官网NexT主题,如果设置成官网主题会发现最终网站发布样式主题是默认的设置,而覆盖掉了原先自己的主题配置。

_config.ymldeploy配置如下:

deploy:
  type: git
  repository: git@github.com:xin053/xin053.github.io.git
  branch: master      # 将build后的静态网页发布到github仓库master分支

其中还要注意TOKEN的权限,github默认生成的TOKEN权限很低,如果使用默认的,build过程中虽然travis显示构建成功,但是log中显示hexo deploy失败,原因是权限问题,所以建议设置权限如下,即全部勾选。

travislog中最后显示如下图所示时,说明已经部署成功了:

而最后一篇文章则是通过travis网站来设置环境变量,更方便,也更快捷

在网站中设置了环境变量之后,就可以去掉.travis.yml中的env项了。

设置好后,只用在网站项目源码根目录下执行:

git init

初始化git,仅第一次需要,然后

git add .
git commit -am "update"

第一次提交到远程仓库要先添加远程仓库:

git remote add master git@github.com:xin053/xin053.github.io.git

将本地dev与远程默认分支进行关联

git push -f --set-upstream dev dev

如果原理github下是原来的静态网站,者这里用-f强推,覆盖掉原来的项目就行。

之后每次就只用

git push dev

也就是每次写完博客之后,在网站项目源代码根目录执行三部曲:

git add .
git commit -am "update"
git push dev

就可以提交最新源代码到githubdev分支,同时travis会自动build,生成最新的静态网页deploygithubmaster分支。

build记录可以参见https://travis-ci.org/

坚持原创技术分享,您的支持将鼓励我继续创作!