前言： 由于本人最近在學(xué)習(xí)vue帝火，想把做出來(lái)的網(wǎng)頁(yè)放到一個(gè)有自己域名的網(wǎng)站上來(lái)供大家學(xué)習(xí)交流（裝B）。首先考慮的是租用云主機(jī)，無(wú)奈云主機(jī)貴的一逼，千幸萬(wàn)苦終于找到一個(gè)便宜點(diǎn)的20塊錢一個(gè)月的國(guó)內(nèi)主機(jī)鳍鸵。結(jié)果剛把新鮮買的域名綁定上去，過(guò)了一會(huì)就無(wú)法訪問(wèn)了尉间。一臉懵逼好嗎偿乖！居然需要備案，百度了一下備案周期差不多要一個(gè)月乌妒。汹想。。玩毛撤蚊！咨詢了一下古掏，原來(lái)所有的國(guó)內(nèi)的主機(jī)必須備案才能通過(guò)綁定的域名進(jìn)行訪問(wèn)。怪不得我的github上面的hexo博客域名能夠訪問(wèn)侦啸，原來(lái)因?yàn)間ithub用的是國(guó)外的主機(jī)槽唾。丧枪。。我以前一直以為只有cn域名才需要備案來(lái)著庞萍？前端時(shí)間全部域名都要備案了拧烦，我還特意看了下我的hexo博客（top域名），還能正常訪問(wèn)钝计，然后就導(dǎo)致我一直有這個(gè)認(rèn)知誤區(qū)恋博。。私恬。
后來(lái)通過(guò)github上面的gh-pages終于將vue網(wǎng)頁(yè)展示了出來(lái)并綁定了自己的域名（重要的是沒有備案也沒有被封- -）债沮。于是我就開始思考，能否將用于對(duì)vue網(wǎng)頁(yè)進(jìn)行持續(xù)集成的Travis CI 用在hexo博客上本鸣，于從而大大減少博客更新的繁瑣步驟呢疫衩？結(jié)果發(fā)現(xiàn)真的大大減少了每次更新博客的命令數(shù)量（感興趣的同學(xué)可以和我之前寫的1.0版進(jìn)行對(duì)比），而且Ｈ俚隆Ｃ泼骸！hexo博客的安裝與遷移過(guò)程也得到了最大的簡(jiǎn)化涮瞻，于是就有了這篇文章鲤拿！
我的hexo博客：Marathoner | 倉(cāng)庫(kù)地址
使用的主題：Material
1. 安裝hexo
注： 由于本人的電腦是windows系統(tǒng)，之前一直是用的虛擬機(jī)上的linux饲宛，覺得多此一舉皆愉，所以改換了windows上的github客戶端。所以本文的下列步驟全都是用windows系統(tǒng)進(jìn)行的艇抠。
在安裝hexo之前幕庐，請(qǐng)確保你的系統(tǒng)安裝了Git和Node.js，不多做贅述家淤。
用Git Shell輸出下列命令异剥，進(jìn)行hexo腳手架的全局安裝
npm install hexo-cli -g
2. 初始化hexo
讓我們新建一個(gè)hexo文件夾然后用Git Shell cd 到該目錄下，然后輸入下列命令進(jìn)行hexo的初始化
hexo init
3. 創(chuàng)建github倉(cāng)庫(kù)
直接在官網(wǎng)操作即可絮重，本人是創(chuàng)建了一個(gè)以賬號(hào)名命名的zytx121.github.io的倉(cāng)庫(kù)冤寿，因?yàn)槊菜埔郧翱吹秸f(shuō)只有以用戶名作為倉(cāng)庫(kù)名才能展示網(wǎng)頁(yè)。后來(lái)發(fā)現(xiàn)是完全是謠言青伤，你github下面任意一個(gè)倉(cāng)庫(kù)都可以生成有自己獨(dú)一無(wú)二域名的展示網(wǎng)頁(yè)（感興趣的童鞋可以點(diǎn)擊這篇文章）督怜，并不是說(shuō)一個(gè)github賬號(hào)下只有一個(gè)倉(cāng)庫(kù)才能有展示頁(yè)面，也不是說(shuō)每個(gè)賬號(hào)的多個(gè)展示頁(yè)面只能有一個(gè)統(tǒng)一的域名狠角。
3. 將github倉(cāng)庫(kù)clone到本地
4. 將之前初始化的hexo文件里面的所有東西拷貝到github倉(cāng)庫(kù)本地目錄下
到這里号杠，hexo博客的準(zhǔn)備工作就做的差不多了，下面該輪到Travis-CI登場(chǎng)了!
5. 使用Travis-CI對(duì)hexo進(jìn)行持續(xù)集成
（1） 用github賬號(hào)登陸
這樣就將github與travis-ci進(jìn)行了綁定，使其能都讀取你github中的倉(cāng)庫(kù)信息
（2） 開啟指定倉(cāng)庫(kù)并進(jìn)行相關(guān)設(shè)置
Build only if .travis.yml is present：是只有在.travis.yml文件中配置的分支改變了才構(gòu)建
Build pushes：當(dāng)推送完這個(gè)分支后開始構(gòu)建
然后到github的setting頁(yè)面中完成Access Token的申請(qǐng)姨蟋，將其作為環(huán)境變量GH_TOKEN的值存在這里屉凯。
只需要repo這一項(xiàng)權(quán)限即可。
（3） 創(chuàng)建travis設(shè)置文件
最后眼溶，讓我們回到倉(cāng)庫(kù)本地目錄悠砚，在該目錄下新建一個(gè).travis.yml文件
文件內(nèi)容如下：
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 --global user.name "8888"
- git config --global user.email "88888888@qq.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
看到這里，我們就會(huì)發(fā)現(xiàn)travis其實(shí)就是一個(gè)幫你跑腳本的云主機(jī)命令行堂飞！
他按照我們指定的腳本順序執(zhí)行灌旧，先是install，再是before_script绰筛，script节榜，最后是after_script.
branches指定了執(zhí)行腳本的分支。
全局變量GH_REF指定了你的倉(cāng)庫(kù)地址别智。
我們首先用npm install在 travis 這臺(tái)全新的主機(jī)上進(jìn)行相關(guān)依賴的安裝，這里就不需要重新再安裝一遍 hexo 然后進(jìn)行初始化了稼稿。安裝完所需依賴之后薄榛，我們就可以直接使用 hexo 命令。
然后我們用hexo g命令來(lái)生成靜態(tài)文件让歼，生成的靜態(tài)文件默認(rèn)會(huì)被放在 public 目錄下敞恋。
我們cd到public目錄，用git init初始化倉(cāng)庫(kù)谋右，進(jìn)行相關(guān)信息的設(shè)置硬猫。
最后，travis-ci會(huì)將public目錄下的文件全部 push 到你所創(chuàng)建倉(cāng)庫(kù)的 master 分支上去改执。
詳細(xì)內(nèi)容可以參考這篇文章 手把手教你使用Travis CI自動(dòng)部署你的Hexo博客到Github上
6. 將github倉(cāng)庫(kù)本地目錄pull到hexo分支上去
這里我使用的是PC客戶端啸蜜，目錄下文件變動(dòng)會(huì)顯示，輸入Summary備注辈挂，點(diǎn)擊Commit衬横，然后點(diǎn)右上角的Publish即可。（注意终蒂，我們的博客源代碼存放在hexo分支上蜂林，hexo生成的靜態(tài)網(wǎng)頁(yè)文件存放在master分支。因?yàn)間h-pages的默認(rèn)分支為master拇泣，但其實(shí)這是可以設(shè)置的噪叙。）
綁定域名
如果需要綁定自己的域名，只需要在根目錄下的/source/文件夾內(nèi)新建一個(gè)CNAME文件（需要大寫）霉翔，然后在里面寫上你的域名睁蕾。保存后一起push上去即可
然后，在倉(cāng)庫(kù)設(shè)置中填入你的域名早龟。
同時(shí)在你購(gòu)買域名的服務(wù)器管理控制臺(tái)中惫霸，添加如下2個(gè)解析：
主機(jī)記錄：@ 記錄類型： A 記錄值：192.30.252.153 TTL： 10分鐘
主機(jī)記錄：www 記錄類型： A 記錄值：192.30.252.154 TTL： 10分鐘
這樣就完成了你的域名綁定猫缭。
關(guān)于404頁(yè)面：
同理，你可以在根目錄下的/source/文件夾內(nèi)新建一個(gè)404.html文件壹店，然后在里面寫上<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>并保存猜丹。這樣，當(dāng)你訪問(wèn)博客中不存在的頁(yè)面時(shí)硅卢，瀏覽器就會(huì)自動(dòng)跳轉(zhuǎn)到騰訊的公益404頁(yè)面射窒。
這樣就大功告成啦！
7. 等待Travis-CI執(zhí)行腳本
這樣就說(shuō)明成功了将塑，如果紅色則說(shuō)明不成功脉顿。該頁(yè)面會(huì)顯示運(yùn)行的命令行，如果出現(xiàn)錯(cuò)誤就會(huì)報(bào)錯(cuò)点寥。
到這里為止艾疟，博客的搭建方法就介紹完畢了。之后每次需要更新發(fā)布文章的話敢辩，只需要重復(fù)第6步即可蔽莱。
當(dāng)你需要在其他電腦上更新博客時(shí)，可參照下面的代碼：
-
$ git clone https://github.com/zytx121/zytx121.github.io//拷貝倉(cāng)庫(kù)戚长，在本地生成zytx121.github.io文件夾 -
$ cd zytx121.github.io//進(jìn)入該文件夾根目錄 -
$ npm install（講道理其實(shí)如果只添加博客文章盗冷，不進(jìn)行hexo操作的話，這步其實(shí)可以省略同廉。因?yàn)閠ravis會(huì)在它的主機(jī)上安裝依賴仪糖，幫你生成靜態(tài)頁(yè)面。）
然后迫肖，你就可以在這臺(tái)新電腦上愉快的更新博客辣(≧▽≦)/
與1.0版本的對(duì)比
不需要安裝
hexo-deployer-git插件不需要每次部署博客(
hexo g）前都在本地生產(chǎn)靜態(tài)文件（hexo d）更換電腦后clone到本地后锅劝，只需要
npm install安裝依賴，不需要安裝hexo蟆湖，開箱即用鸠天。每次更新博客文章后，你所需要做的只是將改動(dòng) push 到 hexo 分支帐姻，剩下的事 travis-ci 都會(huì)幫你做好稠集。
由于持續(xù)集成大大簡(jiǎn)化了更新hexo博客的步驟，讓我又開始恢復(fù)了之前因?yàn)樘闊┒艞壐碌膆exo博客＜⒋伞０住！
