需求
之前写过一篇文章,介绍将 Hexo 博客通过 GitHub Actions 同时部署到 GitHub Page 和 Coding Page,
这次是将一个普通静态网站源码 push 到 GitHub 源码仓库,然后通过 GitHub Actions 自动同时部署到 GitHub Page 和 Coding Page。
准备工作
创建一个 GitHub 静态网站源码仓库(blog-source),创建一个 GitHub Page 仓库(blog),创建一个 Codiing Page 仓库(blog-codingpage)。
申请 Access token
GitHub
Coding
设置 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 文件,在运行脚本中需要加上这几句,这样即可在工作流中能够顺利执行上一步脚本中的命令。
"scripts": { "build": "gulp", "deploy": "bash deploy.sh" },
build
命令是将项目打包生成到dist
目录,根据个人需求处理。
发布项目
以上配置完成后,项目修改完毕,只需将代码 push
到 blog-source 仓库,该仓库即可自动启动配置好的 GitHub actions,将代码部署到 GitHub page 和 Coding page。
关于 GitHub Action