優秀的程式設計師都是不用持續整合的

前幾天我面試了一個碼農，連續幾個專業問題他都沒答上來。
尷尬之餘，我問它：「你沒有什麼理想嗎？你現在最渴望的事情是什麼？」
碼農轉悠著大眼睛，不假思索道：「做一個持續整合的自動部署！」
真沒想到在面試中居然還有這種操作。
我問為什麼這能成為現階段最渴望的事情。
他反問「你就沒有改動程式碼頻繁，deploy無數次到崩潰的夜晚嗎？寂寞長夜，總想好好專心寫寫部落格，寬慰下自己啊。」
今天我就要做為一個不優秀的程式設計師使用持續整合。

觀看本教程的前置條件：

1. 已經配置好了hexo部落格。擁有一個倉庫如：mtianyan.github.io\
2. 已經將部落格的原始碼也push
   到了一個倉庫如：hexoBlog-Github
3. 已經配置了使用gulp進行博文壓縮。

參考：推薦觀看我的博文《Hexo+Next主題搭建部落格安裝美化及SEO優化指南》中將部落格原始碼備份到github或碼雲 與 使用gulp進行博文壓縮

完成上述前置條件，雖然不是必須的，但是可以與我保持一致。減少錯誤。

個人對上面部落格做了新版本的修訂。我最近每天改動部落格的內容。一會目錄有問題，一會改了站點引數，主題引數，出現Bug,
不停的提交快崩潰了：寂寞長夜，總想好好專心寫寫部落格，寬慰下自己啊。

本文是一次在這個命題下的個人實踐記錄：大部分文字轉載自參考部落格

通常更新一篇Hexo部落格文章，基本流程是：

1. 本地新建post頁面

hexo n travis-ci-deploy-blog
INFO  Created: e:\WORK\GitHub\think-diff.me.source\source\_posts\travis-ci-deploy-blog.md

1. 在文字編輯器裡用markdown語法編輯新建頁面
2. 本地生成public檔案：hexo g && gulp
3. 啟動本地測試web server：hexo s --debug
4. 瀏覽器開啟http://localhost:4000/, 瀏覽生成文章
5. 如果滿意，即可部署到Github存放page倉庫裡：hexo d

本文主要介紹如何利用TravisCI

What is Travis CI?

Travis CI

CI(Continuous Integration)翻譯為持續整合。Travis CI是一個提供持續整合功能的平臺，在Github上，可以新增Travis CI，當有code push時候，會推送通知到Travis，根據設定的指令碼執行指定任務。

目前有兩個站點:

1. Travis.org 對於所有public專案完全免費

2. Travics.com 只針對private專案，提供更多一些額外功能，如cache，並行build個數

兩個站點只能看到各自的專案，不能通用。

Why we need Travis CI?

有人可能會有疑問: 在本地寫完部落格，直接一個命令hexo d，不就搞定了麼， 為啥要費力搞CI？

的確, 想用TravisCI來自動部署Hexo部落格程式，需要不少設定（瞎折騰），為了給大夥信心，列舉一些優點：

{% note success %}
優點1：直接線上編輯檔案，立即生效
{% endnote %}

假設你已經發表了一篇文章，過了幾天你在朋友機器上瀏覽發現有幾個明顯的錯別字，對於有強迫症的，這是不能容忍的。 但你手頭又沒有完整的hexo+nodejs+git的開發環境，重新下載git，node，hexo配置會花費不少時間，特別不划算。

如果按照這篇完整折騰完，你可以直接用瀏覽器訪問github個人專案倉庫，直接編輯那篇post的原md檔案，前後2分鐘改完。 稍等片刻，你的部落格就自動更新了。

{% note success %}
優點2：自動部署，同時部署到多個地方
{% endnote %}

在gitcafe是被收購之前，很多同學（包括我）都是託管在上面的，國內訪問速度比Github快很多。
配合DNS根據IP位置可以自動選擇導到gitcafe, 還是github，甚至你還可以部署到七牛雲的靜態網站。
利用Travis CI可同時更新多個倉庫。

比如我的部落格現在有兩個站：一個部署在碼雲，一個部署在github。都需要我自己手動部署。

注：最後發現碼雲並不支援。emmmmm

{% note success %}
優點3：部署快捷方便
{% endnote %}

手動deploy需要推送public整個folder到github上，當後期網站文章、圖片較多時候，對於天朝的網路，有時候連線github 就是不順暢，經常要傻等不少上傳時間。
有了CI，你可以只提交post檔案裡單獨的md檔案即可，很快很爽，誰用誰知道。

{% note success %}
優點4：bigger than bigger
build icon

{% endnote %}

你的專案Readme裡面可以顯示CI build圖示，很酷有沒有？
另外通過設定，可以在當build失敗時自動發郵件提醒你。
上面的圖示，如果登陸後你在Github專案裡，直接點選圖示，會跳轉到你當前專案build的log介面，很方便。

當然有了CI，你可以做很多事情，如自動執行單元測試，成功後再deploy等等。很多專案裡的持續整合基本也是這個道理。

How to use Travis CI to deploy hexo blog?

原博主是使用private專案演示的，雖然我也就用學校郵箱加入了Github的Education plan 但是為了通用性，我本次做了public的實踐。

步驟：

準備Travis CI賬號, 傳送門：public專案, private專案, 在登陸成功後.

如果發現沒有Repositories
，點選上圖加號會看到自己的目錄然後把想要持續整合的倉庫開關開啟，會自動hook到Github。

注意: 這裡需要開啟的是自己的

準備Github Personal Access Token。

在Github的setting頁面，左側面板選擇Developer settings然後Personal access tokens, 右上角點選Generate new token。生成token時候需要確定訪問scope，這裡我們選擇第一個repo即可。重要：生成的token只有第一次可見，一定要儲存下來備用。

(可選操作：除非你對於Travis CI儲存你的金鑰不信任，才需要做，否則可以直接跳過省事)

推薦直接跳過：有點奇怪原博主加了密又自行設定了環境變數儲存token。加密在最後都沒有用到。。。

• 準備Travis命令列工具，需要依賴ruby環境。對於Windows環境，可以使用這裡的安裝包，安裝完成後可用ruby -v檢查。

請安裝2.4.x版本。

注意不要安裝2.5版本。暫時不支援。會報錯:

ERROR: Error installing travis: The last version of ffi (>= 1.3.0) to support your Ruby & RubyGems was 1.9.18. Try installing it with `gem install ffi -v 1.9.18` and then running the current command again ffi requires Ruby version < 2.5, >= 2.0. The current ruby version is 2.5.0.

• 安裝命令列工具，參考這裡官方文件：

gem install travis

驗證travis安裝成功

• 用Github的使用者名稱/密碼登入這個命令列工具。

travis login

登陸成功後，開始加密，參考下面程式碼：

travis encrypt -r <github name>/<github repo> GH_Token=XXX

#sample：
travis encrypt -r mtianyan/hexoBlog-Github GH_TOKEN=33ba3948bxxx

把輸出的secure:"xxxx"儲存。可以在檔案的

env:
 global:
   - secure: `你加密後的`

travis-ci會自動對於你的金鑰進行解密。當做加密前的環境變數:GH_TOKEN

配置.travis.yml（如果沒有，新建)

新增環境變數來保護自己的github金鑰。

點選more options 選擇 setting.

找到環境變數值。將自己在github得到的個人token值 作為value，name可以自行定義
Travis_Token

下面gulp的壓縮安裝，參考我Hexo中教程的方法。
如果不需要壓縮，可自行替換為hexo g

我個人的.travis.yml 可供參考

language: node_js  #設定語言

node_js: stable  #設定相應的版本

cache:
    apt: true
    directories:
        - node_modules # 快取不經常更改的內容

before_install:
    - export TZ='Asia/Shanghai' # 更改時區

install:
  - npm install  #安裝hexo及外掛

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

after_script:
  - git clone https://${GH_REF} .deploy_git  # GH_REF是最下面配置的倉庫地址
  - cd .deploy_git
  - git checkout master
  - cd ../
  - mv .deploy_git/.git/ ./public/   # 這一步之前的操作是為了保留master分支的提交記錄，不然每次git init的話只有1條commit
  - cd ./public
  - git config user.name "mtianyan"  #修改name
  - git config user.email "[email protected]"  #修改email
  - git add .
  - git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`"  # 提交記錄包含時間 跟上面更改時區配合
  - git push --force --quiet "https://${Travis_Token}@${GH_REF}" master:master  #Travis_Token是在Travis中配置環境變數的名稱

branches:
  only:
    - master  #只監測master分支，master是我的分支的名稱，可根據自己情況設定
env:
 global:
   - GH_REF: github.com/mtianyan/mtianyan.github.io.git  #設定GH_REF，注意更改yourname

# configure notifications (email, IRC, campfire etc)
# please update this section to your needs!
# https://docs.travis-ci.com/user/notifications/
notifications:
  email:
    - 1147727180@qq.com
    - mtianyan@outlook.com
  on_success: change
  on_failure: always

這裡需要注意的是：GH_REF，這個地址其實就是你github上存放靜態部落格最終檔案的倉庫地址，末尾加上.git。

整合build icon，在Travis CI控制檯裡，點選那個icon，選擇markdown的樣式，然後放到專案Readme裡即可。

大功告成後的使用。

你可以在本地hexo原始碼目錄內，使用命令:

git add .
git commit -am "實驗"
git push -u origin master

來將自己的部落格原始碼提交至github中的原始碼倉庫 CI檢測到你的原始碼更新改動會自動幫你編譯git push 到你的靜態頁面存放倉庫

在commit記錄中會顯示bulid的狀態。

注意：有點慢。畢竟他要在Ci的伺服器上根據你的配置檔案安裝下載，然後使用它的虛擬機器進行部署。