用 travis-ci 自动化构建部署 github-pages

前言

最近重新捣鼓了一下以前学习 react 所写的一个后台系统，由于有个在线预览功能使用了 Github Pages，每次 push 前都需要 build 一下，很麻烦，所以想搭建一个 Jekins、GitLab Runner，但是奈何 vps 硬件不给力，索性还是用了 Travis CI。

关联 GitHub 工程

用 github 授权登录 travis，然后把你想关联的工程开关打开（免费版只能用在 github 公共仓库中，私有仓库不行）

编写 .travis.yml

# .travis.yml
# see https://docs.travis-ci.com/user/deployment/pages/
language: node_js
node_js:
  - 10
install:
  - yarn
script:
  - unset CI
  - yarn build
cache: yarn
deploy:
  provider: pages
  local_dir: build
  skip_cleanup: true
  keep_history: true
  github_token: $GITHUB_TOKEN
  on:
    branch: master

$GITHUB_TOKEN 指设置里的 Environment Variables，它需要一个 github personal access tokens

使用 github 生成 token: 打开 https://github.com/settings/tokens -> Generate new token -> 随便填一个名字，勾选 repo 并保存，记好 token，只能看一次

新建 gh-pages 分支

由于它默认会 push 到 gh-pages 分支，分支不存在会构建失败，那么我们手动新建一个这个分支

git checkout --orphan gh-pages
git rm -rf .

echo '# new branch' >> README.md

git add README.md
git commit -m 'new branch'

检验

push 一下，稍等片刻浏览器中便会打印构建信息