抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

需求

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

设置 Access token

进入 blog-source 仓库,【Settings】->【Secrets】->【New repository secret】,Name 分别设置为:PAGE_DEPLOY_PRICODING_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

评论