前言： 由于本人最近在学习vue，想把做出来的网页放到一个有自己域名的网站上来供大家学习交流（装B）。首先考虑的是租用云主机，无奈云主机贵的一逼，千幸万苦终于找到一个便宜点的20块钱一个月的国内主机。结果刚把新鲜买的域名绑定上去，过了一会就无法访问了。一脸懵逼好吗！居然需要备案，百度了一下备案周期差不多要一个月。。。玩毛！咨询了一下，原来所有的国内的主机必须备案才能通过绑定的域名进行访问。怪不得我的github上面的hexo博客域名能够访问，原来因为github用的是国外的主机。。。我以前一直以为只有cn域名才需要备案来着？前端时间全部域名都要备案了，我还特意看了下我的hexo博客（top域名），还能正常访问，然后就导致我一直有这个认知误区。。。
后来通过github上面的gh-pages以及持续集成工具travis-ci终于将vue网页展示了出来并绑定了自己的域名（最最重要的是没有备案也没有被封- -）
下面我用写的举例，一步一步实现网页的展示。
我的vue博客： |
（1） 用github账号登陆
这样就将github与travis-ci进行了绑定，使其能都读取你github中的仓库信息
（2） 开启指定仓库并进行相关设置
Build pushes：当推送完这个分支后开始构建
然后到github的setting页面中完成，将其作为环境变量GH_TOKEN的值存在这里。
（3） 创建travis设置文件
最后，让我们回到vue项目所在仓库的本地目录，在该目录下新建一个.travis.yml文件
文件内容如下：
branches: only: - developlanguage: node_jssudo: falsenode_js: stablecache: directories: - node_modulesaddons: apt: packages: - xvfbinstall: - export DISPLAY=':99.0' - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & - npm installbefore_script: - git config user.name "yourusername" - git config user.email "youremail@xx.com" - git clone --branch gh-pages https://${GH_REF} distscript: - npm testafter_success: - npm run build - cd dist - echo "lightmoon.pw" > CNAME - cp index.html 404.html - git add --all . - git commit --message "Automatically update from travis-ci" - git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages# Note: you should set Environment Variables here or 'Settings' on travis-ci.orgenv: global: - GH_REF: github.com/zytx121/vue-blog.git复制代码 看到这里，我们就会发现travis其实就是一个帮你跑脚本的云主机命令行！
他按照我们指定的脚本顺序执行，先是install，再是before_script，script，最后是after_script.
branches指定了执行脚本的分支。
全局变量GH_REF指定了你的仓库地址。
首先用npm install在 travis 这台全新的主机上进行相关依赖的安装。
然后，travis-ci生成静态文件，并将dist目录下的文件全部 push 到你所创建仓库的 gh-pages 分支上去。（注意：该仓库一共有2个分支，vue源码存放在develop分支，静态页面文件存放在gh-pages 分支）
如果有域名需要绑定，可以将域名写入CNAME文件。没有，则将其注释掉。
同时在你购买域名的服务器管理控制台中，添加如下2个解析：
主机记录：@ 记录类型： A 记录值：192.30.252.153 TTL： 10分钟主机记录：www 记录类型： A 记录值：192.30.252.154 TTL： 10分钟复制代码
值得一提的是，你github下面任意一个仓库都可以生成有自己独一无二域名的展示网页，并不是说一个github账号下只有一个仓库才能有展示页面，也不是说每个账号的多个展示页面只能有一个统一的域名。我们要做的就是将需要展示的页面分支命名为 gh-pages（随便啥都行），然后在仓库设置中进行如下设置。
这样就大功告成啦！
以后每次更新网页或博客后，只需要push到develop分支，剩下的事（包括生成vue静态文件）travis-ci都会帮你搞定！
注：本文所用到的例子中的文章全部存放在另一个命名为writting的仓库里面。
每次文章更新后，甚至不需要再将vue的源代码push到develop分支。你所需要做的，仅仅是直接在travis-ci中点击Restartbuild即可！
关于持续集成travis-ci可以参考这篇文章
同时，也欢迎大家阅读我的另一篇文章