利用 GitHub 以及 Travis-CI 展現帶本身域名的 Vue 頁面

時間 2019-11-16

標籤利用 github 以及 travis 展現本身域名 vue 頁面欄目 Git 简体版

原文原文鏈接

前言： 因爲本人最近在學習vue，想把作出來的網頁放到一個有本身域名的網站上來供你們學習交流（裝B）。首先考慮的是租用雲主機，無奈雲主機貴的一逼，千幸萬苦終於找到一個便宜點的20塊錢一個月的國內主機。結果剛把新鮮買的域名綁定上去，過了一會就沒法訪問了。一臉懵逼好嗎！竟然須要備案，百度了一下備案週期差很少要一個月。。。玩毛！諮詢了一下，原來全部的國內的主機必須備案才能經過綁定的域名進行訪問。怪不得個人github上面的hexo博客域名可以訪問，原來由於github用的是國外的主機。。。我之前一直覺得只有cn域名才須要備案來着？前端時間所有域名都要備案了，我還特地看了下個人hexo博客（top域名），還能正常訪問，而後就致使我一直有這個認知誤區。。。html

後來經過github上面的gh-pages以及持續集成工具travis-ci終於將vue網頁展現了出來並綁定了本身的域名（最最重要的是沒有備案也沒有被封- -）前端

下面我用viko16寫的vue-ghpages-blog舉例，一步一步實現網頁的展現。vue

個人vue博客：Lightmoon | 倉庫地址node

（1）用github帳號登錄Travis-CI

這樣就將github與travis-ci進行了綁定，使其能都讀取你github中的倉庫信息git

（2）開啓指定倉庫並進行相關設置

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

Build pushes：當推送完這個分支後開始構建github

而後到github的setting頁面中完成Access Token的申請，將其做爲環境變量GH_TOKEN的值存在這裏。npm

只須要repo這一項權限便可。

（3）建立travis設置文件

最後，讓咱們回到vue項目所在倉庫的本地目錄，在該目錄下新建一個.travis.yml文件bash

文件內容以下：服務器

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其實就是一個幫你跑腳本的雲主機命令行！hexo

他按照咱們指定的腳本順序執行，先是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（隨便啥都行），而後在倉庫設置中進行以下設置。