GitHub Pages 構建

什麼是 GitHub Pages

GitHub Pages 是用於託管我的，組織或者來自 Github 倉庫項目的靜態網站。
GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

搭建步驟

1. 創建一個完整項目的倉庫

示例中是一個單頁面應用，使用 Webpack 構建。經過打包能獲得以下結構文件，這是最終發佈到 GitHub Pages 上的源碼文件。

dist
├── static
│    ├── css
│    │  ├── main.css
│    │  └── head.css
│    ├── js
│       ├── main.js
│       └── head.js
└── index.html
複製代碼

2. 建立 .travis.yml 文件

使用 Travis CI 來作持續發佈。首先在項目的根目錄下新建一個 .travis.yml 文件來告訴 Travis CI 跑一個簡單的腳本。示例代碼以下：

# .travis.yml
language: node_js
sudo: false
node_js:
  - 10.15.1
script:
  - bash scripts/deploy-to-gh-pages.sh
複製代碼

3. 建立自動部署腳本

腳本中須要將打包出來的 dist 目錄下的文件上傳到倉庫對應的 gh-pages 分支上。

# deploy-to-gh-pages.sh
#! /bin/bash 
rm -rf dist
npm run build

cd dist
git init
git add .
git commit -m 'Travis build'
git push --force --quiet "https://${GITHUB_TOKEN}@github.com/[user]/[repository name].git" master:gh-pages

複製代碼

GITHUB_TOKEN 須要在 GitHub 中設置，如圖：

4. 新建 gh-pages 分支

GitHub Pages 有多種發佈站點源碼方式，在這裏選擇新建一個 gh-pages 分支。

分支新建完成後，回到 GitHub，在對應的倉庫下點擊 Settings，翻到 GitHub Pages 欄，在下拉框中選擇 gh-pages 分支來發布源碼。如圖：

當咱們提交代碼後，Travis CI 將倉庫拷貝到一個新的虛擬環境中，而後執行一系列的任務來構建代碼，構建成功後，代碼會被部署到 GitHub Pages 服務上。

可能會遇到的問題

1. 資源引用失敗

通常經過 Webpack 打包生成的資源默認是絕對路徑，當部署到帶上下文的中間件的時候，就會致使資源引用失敗（404）。

解決的辦法就是在打包過程當中設置生成的資源路徑爲相對路徑，在 Webpack 配置中找到 output，增長 publicPath: './' 便可。