如何快速搭建一個有域名且持續集成的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博客！！！