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: './' 即可。