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.