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

前端麥克發表於2019-04-07


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 

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

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_branchgh_pages,  這個分支預設是github pages 伺服器部署靜態資源的分支。

踩過的坑: 如果不設定特定的目錄路徑,github pages 會指定專案根目錄下README.md 作為index.html。 所以如果build的專案目錄是 dist, 那可以設定 local_dir: dist


3. 第三步 -- github 設定gh_pages為github pages 部署branch

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

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

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

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


相關文章