Hexo使用Travis CI自动化部署


通过使用Travis CI自动化部署,换电脑发布文章无需安装Hexo

偷懒是第一生产力

使用Hexo写博客挺简单的,hexo new "articleName"在生成的md文件中就可以开始自己的写作了。不过每次都要进行发布的三部曲还是略显麻烦:

hexo clean
hexo g
hexo d

这时候就到Travis CI出场的时候了,通过Travis CI可以实现当你将commit提交到Github后,会自动帮你进行这3步,你需要的就只是写文章->提交到Github,剩下的都是自动完成。

Travis CI使用

Travis CI是在软件开发领域中的一个在线的,分布式的持续集成服务,用来构建及测试在GitHub托管的代码 。

登录Travis CI

使用Github账号登录Travis CI官网,登录后在主界面点击My Repositories旁边的”+”号:
点击加号

选择你在Github的放博客源码的仓库,打开左侧的开关:

仓库选择

打开开关

然后点下仓库那里的设置图标,进入设置的界面:

设置选项

现在我们就设置好了需要构建的仓库了,Github的仓库指定的分支有commit后就会触发构建,但是目前还没有权限将构建的结果push到Github的仓库,这就需要在Github配置下Access Token了

配置Github的Access Token

转到Github页面,在Setting界面下选择Personal access tokens:

Personal access tokens

生成一个新的tokens,设置如下:

token配置

生成的时候先别急着关页面,配置信息随时可以更改,但是token只在这时候显示一次,页面关了之后找不到的,要的话只能重新生成一个

将复制的token添加到Travis CI的环境变量中:

添加环境变量

这样Travis CI就有了访问Github的权限了

配置.travis.yml

我们设置了自动部署,但是具体要怎么部署还没有告诉Travis CI,接下来就来设置下相关的配置文件

Github的仓库分支

如果将源码和生成的博客页面文件放在同一个分支也是可以的,不过每次一提交之后,Travis CI会自动化构建然后再push到这个分支。这样会显得比较乱 ,跟默认用hexo三部曲提交到Github差不多,想换台电脑编辑的时候不好找博客源代码,分成两个分支是不错的选择。

由于Github的要求,要作为博客显示的分支必须是master,所以源码就另起了一个分支blog

另一分支

添加.travis.yml文件

在blog根目录新建一个.travis.yml文件,添加如下内容:

language: node_js   #设置语言
node_js: stable     #设置相应的版本
cache:
    directories:
        - node_modules    #据说可以减少travis构建时间
before_install:
  - npm install -g hexo
  - npm install -g hexo-cli
install:
  - npm install   #安装hexo及插件
before_script:
  - npm install -g mocha
  - git clone --branch master https://github.com/Longxr/Longxr.github.io.git public
script:
  - hexo cl   #清除
  - hexo g   #生成
after_script:
  - cd ./public
  - git init
  - git config user.name "longxr"   #修改成自己的github用户名
  - git config user.email "longxuanren@gmail.com"   #修改成自己的GitHub邮箱
  - git add .
  - git commit -m "update by Travis-CI"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master #GH_token就是在travis中设置的token
branches:
  only:
  - blog  #只监测这个分支,一有动静就开始构建
env:
    global:
        - GH_REF: github.com/Longxr/Longxr.github.io.git

修改成你的仓库的配置就行了。设置完毕,就可以新建一篇文章测试下了~以后发文章的流程就是:写文章->提交到Github搞定!

逼格添加

自动化构建服务还可以在README.md中加上一个构建状态的图标:

build Stauts

在自己的README.md中加一行:
[![Build Status](https://travis-ci.org/Longxr/Longxr.github.io.svg?branch=blog)](https://travis-ci.org/Longxr/Longxr.github.io)

branch后设置为监测的分支,链接地址设置为Travis CI的仓库地址

也可以在界面点击仓库名后面的状态图标获取链接代码,默认是master分支,记得改成你监测的分支,不然就会显示unknown

获取状态图标链接

补充说明: blog分支README.md放在根目录就行,master分支README.md要放在博客目录的/source中

参考资料

文章目录
  1. 1. 偷懒是第一生产力
  2. 2. Travis CI使用
    1. 2.1. 登录Travis CI
    2. 2.2. 配置Github的Access Token
    3. 2.3. 配置.travis.yml
      1. 2.3.1. Github的仓库分支
      2. 2.3.2. 添加.travis.yml文件
  3. 3. 逼格添加
  4. 4. 参考资料
| | 81.7k