利用 GitHub 以及 Travis-CI 展示带自己域名的 Vue 页面

前言： 由于本人最近在学习vue，想把做出来的网页放到一个有自己域名的网站上来供大家学习交流（装B）。首先考虑的是租用云主机，无奈云主机贵的一逼，千幸万苦终于找到一个便宜点的20块钱一个月的国内主机。结果刚把新鲜买的域名绑定上去，过了一会就无法访问了。一脸懵逼好吗！居然需要备案，百度了一下备案周期差不多要一个月。。。玩毛！咨询了一下，原来所有的国内的主机必须备案才能通过绑定的域名进行访问。怪不得我的github上面的hexo博客域名能够访问，原来因为github用的是国外的主机。。。我以前一直以为只有cn域名才需要备案来着？前端时间全部域名都要备案了，我还特意看了下我的hexo博客（top域名），还能正常访问，然后就导致我一直有这个认知误区。。。

后来通过github上面的gh-pages以及持续集成工具travis-ci终于将vue网页展示了出来并绑定了自己的域名（最最重要的是没有备案也没有被封- -）

下面我用viko16写的vue-ghpages-blog举例，一步一步实现网页的展示。

我的vue博客：Lightmoon | 仓库地址

（1）用github账号登陆Travis-CI

这样就将github与travis-ci进行了绑定，使其能都读取你github中的仓库信息

（2）开启指定仓库并进行相关设置

Build only if .travis.yml is present：是只有在.travis.yml文件中配置的分支改变了才构建

Build pushes：当推送完这个分支后开始构建

然后到github的setting页面中完成Access Token的申请，将其作为环境变量GH_TOKEN的值存在这里。

只需要repo这一项权限即可。

（3）创建travis设置文件

最后，让我们回到vue项目所在仓库的本地目录，在该目录下新建一个.travis.yml文件

文件内容如下：

branches:
  only:
    - develop

language: node_js

sudo: false

node_js: stable

cache:
  directories:
    - node_modules

addons:
  apt:
    packages:
      - xvfb

install:
  - export DISPLAY=':99.0'
  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
  - npm install

before_script:
  - git config user.name "yourusername"
  - git config user.email "youremail@xx.com"
  - git clone --branch gh-pages https://${GH_REF} dist

script:
  - npm test

after_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.org
env:
  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（随便啥都行），然后在仓库设置中进行如下设置。