如何快速搭建一个有域名且持续集成的hexo博客(2.0版)

前言： 因为本人最近在学习vue，想把作出来的网页放到一个有本身域名的网站上来供你们学习交流（装B）。首先考虑的是租用云主机，无奈云主机贵的一逼，千幸万苦终于找到一个便宜点的20块钱一个月的国内主机。结果刚把新鲜买的域名绑定上去，过了一会就没法访问了。一脸懵逼好吗！竟然须要备案，百度了一下备案周期差很少要一个月。。。玩毛！咨询了一下，原来全部的国内的主机必须备案才能经过绑定的域名进行访问。怪不得个人github上面的hexo博客域名可以访问，原来由于github用的是国外的主机。。。我之前一直觉得只有cn域名才须要备案来着？前端时间所有域名都要备案了，我还特地看了下个人hexo博客（top域名），还能正常访问，而后就致使我一直有这个认知误区。。。

后来经过github上面的gh-pages终于将vue网页展现了出来并绑定了本身的域名（重要的是没有备案也没有被封- -）。因而我就开始思考，可否将用于对vue网页进行持续集成的Travis CI 用在hexo博客上，于从而大大减小博客更新的繁琐步骤呢？结果发现真的大大减小了每次更新博客的命令数量（感兴趣的同窗能够和我以前写的1.0版进行对比），并且！！！hexo博客的安装与迁移过程也获得了最大的简化，因而就有了这篇文章！

个人hexo博客：Marathoner | 仓库地址
使用的主题：Material

1. 安装hexo

注： 因为本人的电脑是windows系统，以前一直是用的虚拟机上的linux，以为画蛇添足，因此改换了windows上的github客户端。因此本文的下列步骤全都是用windows系统进行的。

在安装hexo以前，请确保你的系统安装了Git和Node.js，很少作赘述。

用Git Shell输出下列命令，进行hexo脚手架的全局安装

npm install hexo-cli -g复制代码

2. 初始化hexo

让咱们新建一个hexo文件夹而后用Git Shell cd 到该目录下，而后输入下列命令进行hexo的初始化

hexo init复制代码

3. 建立github仓库

直接在官网操做便可，本人是建立了一个以帐号名命名的zytx121.github.io的仓库，由于貌似之前看到说只有以用户名做为仓库名才能展现网页。后来发现是彻底是谣言，你github下面任意一个仓库均可以生成有本身独一无二域名的展现网页（感兴趣的童鞋能够点击这篇文章），并非说一个github帐号下只有一个仓库才能有展现页面，也不是说每一个帐号的多个展现页面只能有一个统一的域名。

3. 将github仓库clone到本地

4. 将以前初始化的hexo文件里面的全部东西拷贝到github仓库本地目录下

到这里，hexo博客的准备工做就作的差很少了，下面该轮到Travis-CI登场了!

5. 使用Travis-CI对hexo进行持续集成

（1） 用github帐号登录

这样就将github与travis-ci进行了绑定，使其能都读取你github中的仓库信息

（2） 开启指定仓库并进行相关设置

Build only if .travis.yml is present：是只有在.travis.yml文件中配置的分支改变了才构建

Build pushes：当推送完这个分支后开始构建

而后到github的setting页面中完成Access Token的申请，将其做为环境变量GH_TOKEN的值存在这里。

只须要repo这一项权限便可。

（3） 建立travis设置文件

最后，让咱们回到仓库本地目录，在该目录下新建一个.travis.yml文件

文件内容以下：

language: node_js
node_js: stable

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install

before_script:
 # - npm install -g gulp


script:
  - hexo g


after_script:
  - cd ./public
  - git init
  - git config user.name "yourusername"
  - git config user.email "youremail@xx.com"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
# E: Build LifeCycle

branches:
  only:
    - hexo
env:
 global:
   - GH_REF: github.com/zytx121/zytx121.github.io.git复制代码

看到这里，咱们就会发现travis其实就是一个帮你跑脚本的云主机命令行！

他按照咱们指定的脚本顺序执行，先是install，再是before_script，script，最后是after_script.

branches指定了执行脚本的分支。

全局变量GH_REF指定了你的仓库地址。

咱们首先用npm install在 travis 这台全新的主机上进行相关依赖的安装，这里就不须要从新再安装一遍 hexo 而后进行初始化了。安装完所需依赖以后，咱们就能够直接使用 hexo 命令。

而后咱们用hexo g命令来生成静态文件，生成的静态文件默认会被放在 public 目录下。

咱们cd到public目录，用git init初始化仓库，进行相关信息的设置。

最后，travis-ci会将public目录下的文件所有 push 到你所建立仓库的 master 分支上去。

详细内容能够参考这篇文章 手把手教你使用Travis CI自动部署你的Hexo博客到Github上

6. 将github仓库本地目录pull到hexo分支上去

这里我使用的是PC客户端，目录下文件变更会显示，输入Summary备注，点击Commit，而后点右上角的Publish便可。（注意，咱们的博客源代码存放在hexo分支上，hexo生成的静态网页文件存放在master分支。由于gh-pages的默认分支为master，但其实这是能够设置的。）

绑定域名

若是须要绑定本身的域名，只须要在根目录下的/source/文件夹内新建一个CNAME文件（须要大写），而后在里面写上你的域名。保存后一块儿push上去便可

而后，在仓库设置中填入你的域名。

同时在你购买域名的服务器管理控制台中，添加以下2个解析：

主机记录：@    记录类型： A    记录值：192.30.252.153     TTL： 10分钟
主机记录：www  记录类型： A    记录值：192.30.252.154     TTL： 10分钟复制代码

这样就完成了你的域名绑定。

关于404页面：

同理，你能够在根目录下的/source/文件夹内新建一个404.html文件，而后在里面写上<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>并保存。这样，当你访问博客中不存在的页面时，浏览器就会自动跳转到腾讯的公益404页面。

这样就大功告成啦！

7. 等待Travis-CI执行脚本

这样就说明成功了，若是红色则说明不成功。该页面会显示运行的命令行，若是出现错误就会报错。

到这里为止，博客的搭建方法就介绍完毕了。以后每次须要更新发布文章的话，只须要重复第6步便可。

当你须要在其余电脑上更新博客时，可参照下面的代码：

1. $ git clone https://github.com/zytx121/zytx121.github.io //拷贝仓库，在本地生成zytx121.github.io文件夹
2. $ cd zytx121.github.io //进入该文件夹根目录
3. $ npm install（讲道理其实若是只添加博客文章，不进行hexo操做的话，这步其实能够省略。由于travis会在它的主机上安装依赖，帮你生成静态页面。）

而后，你就能够在这台新电脑上愉快的更新博客辣~(≧▽≦)/~

与1.0版本的对比

• 不须要安装hexo-deployer-git插件

• 不须要每次部署博客(hexo g）前都在本地生产静态文件（hexo d）

• 更换电脑后clone到本地后，只须要npm install安装依赖，不须要安装hexo，开箱即用。

• 每次更新博客文章后，你所须要作的只是将改动 push 到 hexo 分支，剩下的事 travis-ci 都会帮你作好。

因为持续集成大大简化了更新hexo博客的步骤，让我又开始恢复了以前由于太麻烦而放弃更新的hexo博客！！！