Hexo遇上Travis-CI：可能是最通俗易懂的自動釋出部落格圖文教程

MichaelX發表於2017-11-30
Hexo

相信很多同學都有自己的部落格，如果沒有，可以參看《Hexo建站：部署到github》，利用Hexo和github pages服務搭建一個美觀便捷的部落格，Hexo可以將你編寫的md文件解析渲染成html網頁，最後通過git推送到github即可形成一個網站。

Hexo釋出部落格流程

  1. 搭建hexo環境（一系列軟體安裝，配置）
  2. hexo new post “文章名稱”
  3. 編寫md文件
  4. hexo clean
  5. hexo generate
  6. hexo deploy

以上第一步一般只在第一次搭建的時候需要進行，後續只要執行2~6步即可。但是存在一些情況，假如你需要在不同的電腦上釋出部落格呢？假如你重灌了系統呢？是不是需要重新來一次？要知道最繁瑣的步驟就是第一步，這裡面可以分出很多步來做，看過上面那篇部落格或者自己正在使用hexo+gh手動釋出部落格的同學都知道多痛苦。

今天筆者就來介紹下利用travis-ci這個持續整合平臺簡化釋出流程，簡化後流程:

  1. 編寫md文件
  2. git push

利用travis大大提高了效率！是不是很誘人？

Travis-CI簡介

Travis CI 是開源持續整合構建專案，用來構建託管在GitHub上的程式碼。它提供了多種程式語言的支援，包括JavaScript，Java，Scala，Ruby，PHP，Haskell和Erlang在內的多種語言。

當我們每次進行git push等動作時，Travis CI 會自動檢測我們的提交，然後根據配置檔案.travis.yml幫我們自動生成、部署靜態網頁。

事先預備

推送hexo部落格原始碼到github

  1. cd進入自己的本地hexo部落格資料夾，就是你要釋出部落格時進入的那個資料夾。
  2. 將自己本地所有hexo部落格原始碼檔案push到github。
    推送教程：《如何提交程式碼到Github》

注意：不是hexo deploy更新部落格repo！而是直接把本地部落格託管到github。

筆者直接把本地hexo部落格原始碼託管到了xiong-it.github.io的hexo分支，部落格網站則在預設的master分支上。不想採取分支管理的話，你也可以把本地hexo部落格託管到獨立倉庫，但是在配置travis同步時會有所不同。本文采取分支管理方式。

配置github token

那既然需要使用travis自動化更新你的部落格，travis自然需要讀寫你的github上的repo。github提供了token機制來供外部訪問你的倉庫。

進入github.com/settings/to…，生成一個供travis讀寫你的github用的token，至於token的許可權，筆者直接全選了，但是不建議這樣做，風險比較大，token注意保密，待會會用到。

此處輸入圖片的描述
此處輸入圖片的描述

配置Travis-CI

使用github賬號登陸travis，如果沒有github賬號的同學，可以參考《如何提交程式碼到Github》註冊一個自己的github賬號。

在travis進入倉庫同步管理

進入travis-ci.org/profile，開啟剛才託管的hexo部落格原始碼倉庫同步開關，不一定是部落格網站repo。由於筆者直接把本地hexo部落格原始碼託管到了xiong-it.github.io的hexo分支，所以也就是開啟網站repo。如果你不是採取的分支管理，而是將hexo部落格原始碼託管道獨立repo，開啟對應的github repo開關即可。
如圖：

此處輸入圖片的描述
此處輸入圖片的描述

travis設定

點選上圖中紅色圓圈，進入設定頁，設定自動化編譯時機，自動化編譯過程中需要用到的變數。

此處輸入圖片的描述
此處輸入圖片的描述

此處輸入圖片的描述
此處輸入圖片的描述

以上設定的含義是：

  • 只在.travis.yml檔案存在時編譯，必選！
  • 當倉庫/分支發生更新時編譯，也就是push後進行編譯的意思，一般會需要選擇，方便自動化構建。
  • 加了GH_TOEKN等變數，value值為剛才預備工作中準備的token字串

編寫.travis.yml檔案

.travis.yml是travis平臺進行自動化構建的配置檔案，travis會根據配置檔案生成一個shell自動化指令碼。

進入hexo部落格原始碼本地repo

cd hexo
touch .travis.yml
vim .travis.yml複製程式碼

.travis.yml示例如下：

# 指定語言環境
language: node_js
# 指定需要sudo許可權
sudo: required
# 指定node_js版本
node_js: 
  - 7.9.0
# 指定快取模組，可選。快取可加快編譯速度。
cache:
  directories:
    - node_modules

# 指定部落格原始碼分支，因人而異。hexo部落格原始碼託管在獨立repo則不用設定此項
branches:
  only:
    - hexo 

before_install:
  - npm install -g hexo-cli

# Start: Build Lifecycle
install:
  - npm install
  - npm install hexo-deployer-git --save

# 執行清快取，生成網頁操作
script:
  - hexo clean
  - hexo generate

# 設定git提交名，郵箱；替換真實token到_config.yml檔案，最後depoy部署
after_script:
  - git config user.name "yourName"
  - git config user.email "yourEmail"
  # 替換同目錄下的_config.yml檔案中gh_token字串為travis後臺剛才配置的變數，注意此處sed命令用了雙引號。單引號無效！
  - sed -i "s/gh_token/${GH_TOKEN}/g" ./_config.yml
  - hexo deploy
# End: Build LifeCycle複製程式碼

修改下_config.yml檔案的deploy節點：

# 修改前
deploy:
  - type: git
    repo: git@github.com:xiong-it/xiong-it.github.io.git
    branch: master複製程式碼
# 修改後
deploy:
- type: git
  # 下方的gh_token會被.travis.yml中sed命令替換
  repo: https://gh_token@github.com/xiong-it/xiong-it.github.io.git
  branch: master複製程式碼

yml示例傳送門

最後將兩個yml檔案push更新到hexo部落格原始碼branch或者獨立repo，就會在travis後臺成功看到第一次構建了。

歡迎訪問我的個人hexo部落格：xiong-it.github.io

大功告成

以後每次更新部落格，只需要編寫md檔案，放入hexo/source/_post/資料夾下，git add，commit，push後，push操作也可以直接使用剛才申請的token，而無需在不同電腦上配置ssh共金鑰。

git push https://<your_token>@github.com/xiong-it/xiong-it.github.io.git hexo:hexo複製程式碼

travis就會讀取hexo部落格原始碼分支下的.travis.yml檔案，自動幫我們生成並部署網站了。

相關文章