project

Github Pages 前端自动化部署

# 思路

GitHub Pages 提供了部署静态页面，在 GitHub 创建一个名为 username.github.io 的仓库，其中 username 是 GitHub 上的用户名（或组织名称）。然后提交静态页面代码到 GitHub 就可以直接访问 https://username.github.io 了。

可以将项目源代码放在 master 分支，进行版本管理。
将打包构建好的 dist 目录下的代码放在 gh-pages 分支，进行页面访问。

# 准备工作

在 package.json 文件的 scripts 里加入 build，deploy 命令。

"scripts": {
  "build": "vuepress build docs", // 以 vuepress 项目为例
  "deploy": "bash deploy.sh"
},

修改当前 GitHub 仓库的 Settings/Pages 里面 Source 的分支改为 gh-pages。

# 方法一：本地 deploy 部署代码

直接在本地执行构建打包，将打包好的 dist 目录下的代码推送到 gh-pages 分支。

新建 deploy.sh 执行文件。

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹，以 vuepress 项目为例

git init
git add .
git commit -m 'deploy'
git push -f git@github.com:redbattle/redbattle.github.io.git master:gh-pages # 推送到github的gh-pages分支，以 redbattle 用户为例

本地执行 deploy。
```
npm run deploy
```

# 方法二：通过 Github Action 部署代码

本地只需提交项目源代码到 master 分支，当 master 分支有提交操作时，Github Action 会自动执行 .github/workflows/ci.yml 文件，实现自动化部署。
按照官方文档 (opens new window) 或者阮一峰文档 (opens new window)，生成一个 GitHub Token (令牌/密钥)。
将这个 GitHub Token 储存到当前仓库的 Settings/Secrets 里面。

新建 deploy.sh 执行文件。

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹，以 vuepress 项目为例

# 以 redbattle 用户为例
if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:redbattle/redbattle.github.io.git
else
  msg='来自github action的自动部署'
  githubUrl=https://redbattle:${GITHUB_TOKEN}@github.com/redbattle/redbattle.github.io.git
  git config --global user.name "redbattle"
  git config --global user.email "zhaiyu_hb@hotmail.com"
fi

git init
git add .
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github的gh-pages分支

cd -
rm -rf docs/.vuepress/dist

新建 .github/workflows/ci.yml 工作流文件。

name: CI
# 在master分支发生push事件时触发。
on:
  push:
    branches:
      - master
jobs: # 工作流
  build:
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
        run: npm install && npm run deploy # 执行的命令

#GitHub #前端 #自动化部署