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.