github 有一個工具讓你可以存放一些簡單的靜態網頁

• Github Pages
• 什麼是Github Pages

而且是完全免費！(當然有幾個附帶的條件)

• 1GB容量
• 只支持靜態網頁(html/css/js等)
• 每月100GB流量
• …

只要你在github的repo中放上你的網頁 (如index.html) 你就可以在 https://[username].github.io/[repo_name] 中看到你放上去的網站 亦可以設定一個首頁 只要repo的名字是 [username].github.io 你就可以直接在 https://[username].github.io 看到你的網站了

Github設定

Github Page 預設是把你master　branch中的檔案發佈到站上 但同時亦提供了另外幾種方法去設定發佈的來源

You can configure GitHub Pages to publish your site’s source files from master, gh-pages, or a /docs folder on your master branch for Project Pages and other Pages sites that meet certain criteria.

因為我的repo有其他的源碼 所以這邊我就選了用gh-pages來發佈

只要在source那邊選用gh-pages來發佈就可以了

# 先clone repo
git clone [email protected]:[username]/[repo].git

# 
cd [repository]

# checkout 一條新的orphan branch
git checkout --orphan gh-pages

# 並把他推到github 上
git push origin gh-pages

# 之後的網站內容都放到gh-pages這條branch 當中
...

Github上的教學

這邊要用到orphan branch的原因是因為靜態網站並不需要你的源碼 我們只需把travis設定成把網站的源碼build起來之後加到這條branch中就可以了 其中的檔案跟本來的master branch是完全獨立的 簡單來說就是master branch中只有源碼，build folder是處於.gitignore的狀態 而gh-pages當中只有每次ci build完的網站，跟master branch是完全沒有關連

所以你會在git中看到以上的畫面

TravisCI 設定

下一步就是設定travis-ci 這裡是在deploy stage中加入了以下的設定

- stage: deploy
  script:
    - npm run build # build vue
  deploy:
    provider: pages #
    skip-cleanup: true 
    github-token: $GITHUB_TOKEN  # 在github中生成的Personal access token
    keep-history: true
    local-dir: web/dist # build完之後的目錄，直接從repo root開始計算
    on:
      branch: master #　只有master branch才把網站發佈到github page上

然後再在travisci中設定你的github access tokenGITHUB_TOKEN就完成了