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

嗶譜嗶譜發表於2017-07-18
GithubVue

前言： 由於本人最近在學習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（隨便啥都行），然後在倉庫設定中進行如下設定。

這樣就大功告成啦！

以後每次更新網頁或部落格後，只需要push到develop分支，剩下的事（包括生成vue靜態檔案）travis-ci都會幫你搞定！

注：本文所用到的例子vue-ghpages-blog中的文章全部存放在另一個命名為writting的倉庫裡面。

每次文章更新後，甚至不需要再將vue的原始碼push到develop分支。你所需要做的，僅僅是直接在travis-ci中點選Restartbuild即可！

關於持續整合travis-ci可以參考這篇文章 手把手教你使用Travis CI自動部署你的Hexo部落格到Github上

同時，也歡迎大家閱讀我的另一篇文章 如何快速搭建一個有域名且持續整合的hexo部落格(2.0版)

相關文章