使用Hexo+Github+TravisCI搭建自動發佈的靜態博客系統

最近玩slack接觸到 Travis CI，又忽然想起本身很久沒寫技術blog了，想一想塵封已久的hexo+coding.net，心想能不能把Travis CI加進去。

先列舉要用到的東西：

• Hexo - 快速、簡潔且高效的博客框架
• Github Pages - 完美的靜態博客服務器（除大陸網速外）
• NexT - 一款高質量且簡潔優雅的Hexo主題
• Travis CI - 一個持續集成測試工具

其中，Travis CI 是我最新接觸的，它是一款很好用的持續集成測試工具。它能夠自動關聯Github上的項目而且clone下來編譯測試，如今就是利用它這一特性來實現hexo博客自動編譯、部署。

<!--more -->

步驟及重點

一些網上和官方文檔都很明確的步驟再也不詳細敘述，只作記錄，提升效率。

1、先搞Hexo

Hexo建站參考Hexo官方文檔

沒難度，須要注意幾個點：

1. 增長hexo-deployer-git依賴，防止部署時報錯。

npm install --save hexo-deployer-git

1. 增長hexo-util到dev依賴，防止travis的npm版本<3,出現的Error: Cannot find module 'hexo-util'錯誤。

npm install --save-dev hexo-util

2、配置Github

建庫、同步本地什麼的都是github基礎操做，注意一點，建兩個分支，master分支和對應源碼，gh-pages分支做爲hexo生成的靜態頁面上傳分支。網上不少都說要用到xxx.github.io這個項目的，其實不必，只須要推到其餘分支便可，而後在setting裏配置要做爲頁面顯示的是哪一個分支便可。

3、使用NexT主題

這個能夠參考Next幫助文檔，步驟說明很詳細。

其中須要注意的點：

1. 就是上邊說的hexo-util的問題，已給出解決辦法。
2. 關於語言的問題，v5.1.x版本的中文是zh-Hans，而v6.0.0的中文是zh-CN，注意區分。
3. 關於主題的配置文件，採用了Hexo data files特性，利用這個特性，能夠放心更新next主題，而不擔憂配置丟失或煩於合併。
4. v6.0.0的fancybox移至外部倉庫依賴，因此須要自行添加，添加方法參見詳細安裝步驟。

4、配置Travis CI

重點來了，詳細步驟可參考用 Travis CI 自動部署 hexo，做者已經說的比較詳細。

須要注意的一點是：在package.json中增長depoly的命令行語句，防止travis在自動執行到npm run deploy這一步的時候報找不到該script的錯。

"scripts": {
  "deploy": "hexo clean && hexo g -d"
},

上述代碼加在dependencies同級便可。

其實配置完Travis發現，其實原理就是讓Travis在雲上幫咱們執行本地化的編譯、部署等操做，它也須要git pull項目下來，npm install安裝依賴，hexo d -g去編譯靜態博客，而且依舊須要遵循github的權限驗證，因此才須要配置了共私鑰對。

觸類旁通，經過這個博客的配置，同時也學會了使用Travis作持續集成測試。除了能夠應用到其餘項目中去，同時也開啓了新世界的大門。

個性化

1. 配置自定義的css樣式，主題目錄下source/css/_custom/custom.styl
2. NexT使用說明

後續

在此基礎上，研究slack集成travis，讓每次自動測試的結果及時推送到slack上，完美！