Travis + github page 前端頁面自動化部署

Github page 是一個靜態資源服務器，它能夠用來部署靜態資源，這樣很是方便於前端開發者分享本身開發的成果而無需擔憂租賃服務器來部署。 

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

目前github page 只針對於開源的項目是免費部署的，那說到這裏，你們可能會問，如何可以將build的項目部署到github page 上去呢？這裏面就有一個新的概念，devOps的同窗應該是再熟悉不過了，那就是持續集成(Continuous Integration)， 這裏面我想經過travis CI 這個很是流行的自動化部署工具來和你們說一下如何在github快速搭建一個travis CI + github page 自動化部署。我這邊總結下來分爲3步驟。 

1. 第一步 -- 配置travis 
關於github 如何配置travis, 在這裏就不過多介紹，簡單來講就是在項目中設置.travis.yml 以及在github 網站上配置travis. 具體操做請參照:  travis docs 

2. 第二步 -- travis 配置 deploy

deploy:
 provider: pages
 skip_cleanup: true
 github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
 keep_history: true
 target_branch: gh_pages # default target branch gh_pages
 on:
 branch: master複製代碼

在.travis.yml裏面添加 deploy腳本，目的是爲了在merge pull request 到master branch的時候觸發deployment。 

默認狀況下部署的target_branch 是 gh_pages,  這個分支默認是github pages 服務器部署靜態資源的分支。

踩過的坑： 若是不設置特定的目錄路徑，github pages 會指定項目根目錄下README.md 做爲index.html。 因此若是build的項目目錄是 dist, 那能夠設置 local_dir: dist

3. 第三步 -- github 設置gh_pages爲github pages 部署branch

Source 中選擇 gh-pages 就OK了，是否是so easy. 等到下次你的pr merged到master 成功後你就能夠在github pages上面看到你的改動了。最後附上我寫的demo的github page 連接以及效果圖。喜歡我文章的童鞋能夠關注個人github repo, 有空能夠給個star謝謝😂，或者提issue

初來乍到，還請各位大咖多給些建議。 Your feedback is always important for improvement.  Helping others is helping myself.  Sharing is always good for self-improvement.