使用Travis CI自動部署Hexo部落格

自從使用GitHub Pages和Hexo來釋出部落格之後，不得不說友善了許多，隻需要幾個簡單的指令部落格就釋出了。但在不斷的使用中發現每次的釋出操作也挺耗時的。

我一般的操作是将平時整理好的md檔案放到私有的git倉庫中（感興趣可了解 Ubuntu-Gogs 用更簡單的方式部署、更新或遷移Gogs服務），每次釋出的時候都要先将檔案

clone

到本地，然後配置一下hexo的運作環境，接着再執行

hexo s -g

來預覽和調整，最後執行

hexo d

指令将部落格釋出上去，在這之前如果你沒有配置過GitHub的

SSH Key

,還要花一些時間來弄權限的問題。久而久之就發現這樣操作起來實在是太繁瑣了。

後來看到一篇文章介紹可以使用Travis CI來自動部署hexo的部落格，隻需要将md檔案

pull

到倉庫中部落格就自動釋出好了。趁着這幾天工作任務不太着急，研究了一下，特紀錄在此，希望能幫到有需要的朋友。

Travis CI 是目前新興的開源持續內建建構項目，用來建構托管在GitHub上的代碼。它提供了多種程式設計語言的支援，包括Ruby，JavaScript，Java，Scala，PHP，Haskell和Erlang在内的多種語言。

配置GitHub Pages

如果你是新手或者還沒有自己的

GitHub Pages

部落格站點，可以先看我之前的文章使用GitHub搭建Hexo靜态部落格 | IT範兒了解如何配置，具體過程這裡不再詳述。

建立 hexo 分支

因為我之前的部落格源檔案是存放在私有的git管理工具下，如果我們要使用Travis CI自動部署，必須将這些部落格的源碼檔案放到GitHub上才能被Travis通路到。因為

GitHub Pages

預設要求必須使用

master

分支存放靜态檔案，我們可以在該倉庫下使用其他分支來存放部落格源碼檔案，或者新建立一個倉庫來單獨儲存。這裡我們把hexo部落格的源碼放在

hexo

分支下，部落格的靜态檔案部署在

master

分支下。

對于如何在GitHub上建立分支，相關操作指令如下，僅供參考：

# 克隆項目到本地
> git clone https://github.com/Leafney/Leafney.github.io.git

# 建立并切換到 hexo 分支
> git checkout -b hexo

當切換到

hexo

分支後，因為我們是需要用

hexo

分支來存放部落格源碼檔案的，是以，将

hexo

分支下的檔案除

.git

目錄外全部删除，然後将部落格源碼檔案拷貝到該目錄下，并

commit

到

hexo

分支.

然後我們需要将本地的

hexo

分支送出到遠端倉庫中

# 送出本地hexo分支到遠端倉庫的hexo分支
> git push origin hexo:hexo

這樣我們在GitHub的倉庫下就能看到

hexo

分支為部落格源檔案，

master

分支為靜态檔案。

這裡需要注意一點，當我們新增部落格md檔案時，擷取遠端分支時要指定分支的名稱，否則會預設擷取

master

分支：

> git pull origin hexo

設定 Travis CI

使用 GitHub賬戶登入 Travis CI官網，進去後能看到已經自動關聯了 GitHub 上的倉庫。這裡我們選擇需要啟用的項目，即

yourname/yourname.github.io

。

然後點選後面的齒輪圖示進入設定界面。

如果你之前已經勾選過項目，可以進到項目首頁中，在右上角找到

More options

選項下的

Settings

進入設定界面。

通用設定

在

General

區域開啟：

Build only if .travis.yml is present

表示“隻有當

.travis.yml

存在時才建構” ；開啟：

Build branch updates

表示 “當分支更新時建構” 兩個選項，如下：

Travis CI在自動建構完成後需要push靜态檔案到倉庫的

master

分支下，而通路GitHub的倉庫是需要權限的，下面來看看如何配置權限。

配置 Access Token

如下圖，

Environment Variables

區域就是用來添權重限資訊的。我們需要填寫一個Token的名稱和值，該名稱可以在配置檔案中以

${變量名}

來引用，該Token我們需要從Github中擷取。

從GitHub擷取Access Token

之前我們在使用指令

hexo d

部署hexo部落格到GitHub上時，是因為本地有

SSH key

，當交給 Travis 去自動部署時我們也需要設定可操作權限，這裡我們使用GitHub提供的token變量來實作。

登陸

GitHub

Settings

選項，找到

Personal access tokens

頁面。

點選右上角的

Generate new token

按鈕會生成新的token，點選後提示輸入密碼後繼續，然後來到如下界面，取個名字（我這裡取

Travis_Token

下面的配置檔案中會用到)，勾選相應權限，這裡隻需要

repo

下全部和

user

下的

user:email

即可。

生成完成後，将該token拷貝下來。這裡需要注意的是該token隻有這個時候才能看到，當再次進入這個頁面時就隻會顯示之前設定的名稱了。如果忘記了隻能重新生成一個。

在Travis CI中配置

将上面擷取到的token添加到

Environment Variables

部分，值為該

token

,而名稱即為上面設定的

Travis_Token

(請更改為個人所設定名稱)。不勾選後面的

Display value in build log

. 否則會在日志檔案中暴露你的

token

資訊，而日志檔案是公開可見的。

至此我們已經配置好了要建構的倉庫和通路的token，接下來就是如何建構的問題了。

建立 .travis.yml 檔案

之前的步驟中我們勾選了一項

Build only if .travis.yml is present

,是以我們要在部落格源碼檔案的

hexo

分支下新增一個

.travis.yml

配置檔案，其内容如下：

language: node_js # 設定語言

node_js: stable # 設定相應版本

install:
    - npm install # 安裝hexo及插件

script:
    - hexo clean # 清除
    - hexo g # 生成

after_script:
    - cd ./public
    - git init
    - git config user.name "yourname" # 修改name
    - git config user.email "your email" # 修改email
    - git add .
    - git commit -m "Travis CI Auto Builder"
    - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master # GH_TOKEN是在Travis中配置token的名稱

branches:
    only:
        - hexo #隻監測hexo分支，hexo是我的分支的名稱，可根據自己情況設定

env:
    global:
        - GH_REF: github.com/yourname/yourname.github.io.git #設定GH_REF，注意更改yourname

注意：需要将配置檔案中的

GH_TOKEN

換成我們自己設定的名稱，這裡我的配置應該是

Travis_Token

即

- git push --force --quiet "https://${Travis_Token}@${GH_REF}" master:master # GH_TOKEN是在Travis中配置token的名稱

。還要更改

GH_REF

中我們的部落格倉庫的位址。

配置檔案中的操作也很簡單，這也是網上找到的比較常見的一種配置格式了。然而，這份配置檔案中卻隐藏着一個大坑。至于如何跳過去，後面再詳說。

實作自動部署

當

.travis.yml

配置檔案修改完成後，将其送出到遠端倉庫的

hexo

分支下，此時如果之前的配置一切ok，我們應該能在

Travis CI

的部落格項目首頁頁面中看到自動建構已經在開始執行了。上面會顯示出建構過程中的日志資訊及狀态等。

遇到的問題

問題一：提示 `.travis.yml` 檔案格式錯誤

Travis CI

的日志檔案中，如果遇到下面的錯誤提示，那可能就是

.travis.yml

檔案的格式有問題。

ERROR: An error occured while trying to parse your .travis.yml file.
Please make sure that the file is valid YAML.
http://lint.travis-ci.org can check your .travis.yml.
The log message was: Build config file had a parse error: found character that cannot start any token while scanning for the next token at line 6 column 1.

通過在github上查詢，我發現這個問題是我在配置檔案中的縮進使用了

tab

鍵導緻的。因為在不同的編輯器下，

tab

鍵表示的寬度可能不同。

這裡建議是：不要用

tab

鍵，而是用适當的空格實作縮進

found character '\t' that cannot start any token while scanning for the next token at line · Issue #136 · ruby/psych · GitHub

問題二：Travis CI的自動建構成功，但是建構完成後的項目沒有推送到github中

...
...
git commit -m "Travis CI Auto Builder"
git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
remote: Anonymous access to Leafney/Leafney.github.io.git denied.
fatal: Authentication failed for 'https://@github.com/Leafney/Leafney.github.io.git/'

檢視日志提示是權限問題。

這裡的問題是我在

.travis.yml

配置檔案中沒有把

${GH_TOKEN}

部分換成自己在

Travis CI

中填寫的token名稱而導緻的。執行時找不到token，也就沒法設定權限了。

問題三： `master commit` 樹被清空 ☆

如果你按照上面的

travis.yml

配置檔案的設定去自動建構你的部落格，你會發現

master

分支的送出記錄隻有目前送出的這一條，而且無論操作多少次，也僅僅隻有一條。這還真的是一個大坑呀！

比如下面這位網友的站點： GitHub - hhstore/hhstore.github.io: 個人技術部落格在

master

分支下就隻有一條送出記錄。

.travis.yml

部配置設定置内容：

after_script:
  - cd ./public
  - git init
  - git config user.name "yourname"
  - git config user.email "your email"
  - git add .
  - git commit -m "update"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

仔細檢視上面的配置檔案，我們發現每次都是将

public

目錄下的檔案重新生成了一個git項目，然後強制覆寫送出到了

master

分支下，這就是問題的所在。

為了解決這個問題，我将配置檔案改為了如下的内容：

after_script:
    - git clone https://${GH_REF} .deploy_git
    - cd .deploy_git
    - git checkout master
    - cd ../
    - mv .deploy_git/.git/ ./public/
    - cd ./public
    - git config user.name "yourname"
    - git config user.email "your email"
    - git add .
    - git commit -m "Travis CI Auto Builder"
    - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

after_script

部分，我先将部落格項目

clone

到本地的

.deploy_git

master

分支，将

master

分支下的

.git

目錄拷貝到了

public

目錄下，接着繼續後面的

commit

操作。

這裡算是采用了一種

換位

的方式。之前我們通過git管理檔案時并不會改動

.git

目錄，而隻是更改檔案。但在這種情況下，我們需要送出的是

public

目錄下的新檔案。這樣，就會保留之前的送出記錄了。

附上我在使用的配置檔案内容：

language: node_js # 設定語言

node_js: stable # 設定相應版本

cache:
    apt: true
    directories:
        - node_modules # 緩存不經常更改的内容

before_install:
    - npm install hexo-cli -g

install:
    - npm install # 安裝hexo及插件

script:
    - hexo clean # 清除
    - hexo g # 生成

after_script:
    - git clone https://${GH_REF} .deploy_git
    - cd .deploy_git
    - git checkout master
    - cd ../
    - mv .deploy_git/.git/ ./public/
    - cd ./public
    - git config user.name "yourname"
    - git config user.email "your email"
    - git add .
    - git commit -m "Travis CI Auto Builder"
    - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

branches:
    only:
        - hexo # 隻監測hexo分支

env:
    global:
        - GH_REF: github.com/yourname/yourname.github.io.git #設定GH_REF，注意更改成自己的倉庫位址

注意上面配置檔案中的某些參數改為自己的。

問題四：使用 x-oauth-basic

在網上看到一位網友解決 “

master commit

樹被清空” 的問題時采用了另外一種方法，即在

after_script

部分調用執行

hexo d

指令來釋出。這樣的方式遇到的問題是需要設定

SSH Key

或者必須獲得權限才能進行

push

有一種授權的方式是通過https使用OAuth驗證的方式将token添加到url中來送出。即需要更改

_config.yml

中的如下部分：

## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: [email protected]:Leafney/Leafney.github.io.git
  branch: master

為：

## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://<token>:[email protected]/owner/repo.git
  branch: master

而這樣一來 token 就暴露在配置檔案中了。是以還需要在操作指令中使用替換的方式隻在自動部署時更改該token。

這裡僅做介紹，更詳細可通路：

使用Travis Ci使hexo自動生成并部署 | xingo's private plot
Easier builds and deployments using Git over HTTPS and OAuth · GitHub

問題五： `git branch` 分支操作相關指令

# 檢視本地所有分支(分之名稱前面帶*表示目前分支)
> git branch

# 檢視遠端所有分支
> git branch -r

# 建立分支 blog
> git branch blog

# 切換到 blog 分支
> git checkout blog

# 建立并切換到新分支
> git checkout -b blog

# 删除分支
> git branch -d blog

# 送出本地test分支作為遠端的test分支
> git push origin test:test

# 合并分支(将名稱為[blog]的分支與目前分支合并)
> git merge blog

# 擷取遠端指定分支
> git pull origin blog