需求

之前写过一篇文章，介绍将 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

• GitHub

  

  GitHub创建个人访问令牌

  https://docs.github.com/cn/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

• Coding

  

  Coding创建个人访问令牌

  https://help.coding.net/docs/member/tokens.html

设置 Access token

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

创建 GitHub Actions 工作流

1. 在项目根目录创建 .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"

2. 配置 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

3. 配置 package.json

   打开项目根目录的 package.json 文件，在运行脚本中需要加上这几句，这样即可在工作流中能够顺利执行上一步脚本中的命令。

   "scripts": {
       "build": "gulp",
       "deploy": "bash deploy.sh"
     },

   build 命令是将项目打包生成到 dist 目录，根据个人需求处理。

发布项目

以上配置完成后，项目修改完毕，只需将代码 push 到 blog-source 仓库，该仓库即可自动启动配置好的 GitHub actions，将代码部署到 GitHub page 和 Coding page。

关于 GitHub Action

GitHub Actions 入门教程

http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html?20191227113947#comment-last

更新于：2021年8月9日

GitHub Actions