github-page-auto-deployment-with-travis-ci
緣由
其實個人有計劃未來要手動自己打造static website，跟撰寫部落格的工具，只是在此之前我想到說我之前的部落格是放在非static website的，如果一次轉換這麼大會經歷很痛的轉換期，再加上我想要先試用一下這類的工具，這樣我之後才知道什麼地方是我想要的，什麼是我不要的，所以我就找了一下順眼的工具來使用，這篇部落格會來講解使用hexo結合travis ci和github page，達到自動部署的靜態網頁的效果。
開始轉換之路
最一開始其實我是在google blogger上面寫部落格，後來碰到markdown語法，覺得簡單也滿喜歡的，所以我就一直找可以使用markdown來寫文章的平台，找著找著就遇到logdown，使用上挺簡單的，介面也很簡潔，之後就是一直用它了，是到最近想說想要親手打造一個static web site generator，因此才開始轉換我的部落格。
幸好logdown本身就有提供匯出你的文章功能，只是要注意的是它匯出的格式是Octopress，hexo真是剛剛好有支援這種格式，哈哈，其實也不是那麼剛好拉，除了順眼外，我還有故意挑是否有支援Octopress格式的，hexo第三方套件數量不少，能夠選擇的主題也很多，主題我是用hexo next theme，相關細節設定，就不多說明了，文檔算是挺清楚的，再來講講使用hexo可能會遇到的問題，一般都是出現在render時，也就是當你run hexo g or hexo s會遇到的，他的提示是render時遇到syntax error，直接跟你講幾乎問題都會出在你的文章們，裡面可能包含了什麼語法讓他parse錯誤～
github page
關於什麼是github page，可以到官網，簡單來說就是github提供可以讓你放置靜態網站的服務，有分為兩種
- user or organization site
- project site
比較需要注意的是，user or organization site，強制只能把網站相關的檔案放在master，你當然也可以故意放在其他branch拉，只是就會空白:p ，屬於user or organization site類型的，github是會去讀取branch master，屬於project site的話，就可以自由選擇要讓github去讀取哪個branch，這點要注意，也因此我的主要開發branch就是develop（另開的），寫完文章或是調整設定後，我就會run hexo g，產生靜態檔，之後就是把這些靜態檔放到branch master，所以你會發現我的master和develop檔案內容差異很大，可以到我的repo看看就會比較清楚我在講什麼了，到這邊為止其實整個部落格撰寫流程已經可以運作了
- 撰寫文章.md
- run hexo s 看看是否ＯＫ
- run hexo g 產生靜態檔
- git checkout master 將靜態檔，搬到外面來
- git push origin master 看狀況branch develop也可能會需要push
身為一個程式人，就是懶，當然能夠自動化的地方就讓電腦來，不是嗎？ 或者是減少重複性質動作也好 :)
步驟1~3這邊無可避免必須是我們要自己來，畢竟電腦又不知道你寫的這文章是否是最終版本要上線了，但是步驟4跟5呢？ 這邊跟你說！ 是可以的！，也是這篇我主要想要跟大家分享的，我個人是這麼做的，步驟1~3後，接下來我就push branch develop，之後travis ci偵測到github的branch develop有所變動，接著就clone了我的專案，進行產生靜態檔，把靜態檔弄到branch master，之後在push，簡單說就是步驟4~5都被travis ci給拿去做了，那麽我們就先來看看travis ci。
travis ci
travis ci是一個持續整合的平台，一般而言都是拿來當作run tests，比如，當有人發出pull request到你的repo，你可以讓他先run過測試檢查看看是不是符合最基本需求，至少他沒有把你的功能做壞，如果通過的話，你可以考量是否採納這個pull request，更進一步的人，會在測試成功後，做deploy的動作，也就是部署，所以github page是可以利用這個來達到自動部署的！
至於要怎麼和github page做結合呢？ 有想法是一回事，實際做又是一回事，實作中一定會遇到問題，其實有點sense的人，應該一開始就會想到他是怎麼git push的，不是都要輸入密碼嗎？ 關於這個首先就要來看看github personal access token，藉由這種方式就可以避免掉需要輸入username和password了，像這樣git clone https://<token>@github.com/owner/repo.git，至於要怎麼建立access token呢？ 到你個人的github settings頁面，左邊側邊欄會有personal access token，進入後就會看到類似下面的頁面
再來就是建立token，詳細的就不多說了,接下來就要把你的token給放到travis ci相對的project的環境變數，每個自動整合的project，都可以點進去做設定，它提供了可以設定環境變數的功能，也就是說在你的shell裡可以使用你設定的變數，避免你的script直接透露token值！ 如下面這張圖
最後就是撰寫自己的deployment的shell script了。
總結
hexo使用起來的確簡單，但是使用這個工具，還是需要有點程式知識的人才有辦法輕鬆學會，相對而言，logdown提供了一個不錯的撰寫環境，使用起來很簡單，我想之後有時間我開始實做我自己想要的撰寫部落格工具。