Fork me on GitHub

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

前言

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

关联 GitHub 工程

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

编写 .travis.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# .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
nZGZad.jpg

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

新建 gh-pages 分支

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

1
2
3
4
5
6
7
git checkout --orphan gh-pages
git rm -rf .

echo '# new branch' >> README.md

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

检验

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

nZBbBq.jpg