将静态网站使用GitHub Actions发布到GitHub Page和Coding Page

需求

之前写过一篇文章，介绍将 Hexo 博客通过 GitHub Actions 同时部署到 GitHub Page 和 Coding Page，

GitHub Actions将Hexo同时部署到GitHub和CODING

https://blog.zerow.cn/technology/a2116167.html

这次是将一个普通静态网站源码 push 到 GitHub 源码仓库，然后通过 GitHub Actions 自动同时部署到 GitHub Page 和 Coding Page。

准备工作

创建一个 GitHub 静态网站源码仓库（blog-source），创建一个 GitHub Page 仓库（blog）,创建一个 Codiing Page 仓库（blog-codingpage）。

申请 Access token

设置 Access token

进入 blog-source 仓库，【Settings】->【Secrets】->【New repository secret】，Name 分别设置为：PAGE_DEPLOY_PRI 和 CODING_DEPLOY_PRI（记住，后面要用到），Value 填入上一步申请到的 Access token。

创建 GitHub Actions 工作流

在项目根目录创建 .github/workflows/deploy.yml文件，内容如下：

name: HomePage Auto Deploy

# 在master分支发生push事件时触发。
on: 
  push:
    branches:
      - master

env:
  TZ: Asia/Shanghai # 时区

jobs: # 工作流
  build:
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x] #设置node.js版本

    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 # 作用：安装node.js
        with:
          node-version: ${{ matrix.node-version }}

      - name: run deploy.sh # 步骤3 （运行shell脚本，同时部署到github和coding）
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.PAGE_DEPLOY_PRI }} #上一步设置的GitHub secret name
          CODING_TOKEN: ${{ secrets.CODING_DEPLOY_PRI }} #上一步设置的coding secret name
        run: npm install && npm run deploy # 执行的命令  
        # package.json 中添加 "deploy": "bash deploy.sh"

配置 shell 脚本

在项目根目录创建 deploy.sh 脚本文件，内容如下：

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build # 生成静态文件
cd dist # 进入生成的文件夹

# deploy to github
echo 'www.zerow.cn' > CNAME
if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:varm/varm.github.io.git
else
  msg='Auto deploy with GitHub actions.'
  githubUrl=https://varm:${GITHUB_TOKEN}@github.com/varm/varm.github.io.git
  git config --global user.name "设置为个人用户名"
  git config --global user.email "设置为个人邮箱"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master # 推送到github
echo 'Push complete to GitHub.'
# deploy to coding
if [ -z "$CODING_TOKEN" ]; then  # -z 字符串 长度为0则为true；本地环境运行
  codingUrl=git@e.coding.net:varm/blog/blog.git
else
  codingUrl=https://varm:${CODING_TOKEN}@e.coding.net:varm/blog/blog.git
fi
git add -A
git commit -m "${msg}"
git push -f $codingUrl master # 推送到coding
echo 'Push complete to Coding.'

cd -
rm -rf dist

配置 package.json
打开项目根目录的 package.json 文件，在运行脚本中需要加上这几句，这样即可在工作流中能够顺利执行上一步脚本中的命令。
1
2
3
4
"scripts": {
"build": "gulp",
"deploy": "bash deploy.sh"
},
build 命令是将项目打包生成到 dist 目录，根据个人需求处理。