使用GitHub Action分布式部署静态网站

什么是GitHub Action

通俗的理解GitHub Action是通过push代码等方式自动触发运行用户提前编写好的工作流脚本，这些脚本会运行在GitHub提供的虚拟机中，虚拟机会像机器人流水线作业一样一步一步来完成这些复杂频繁的的工作流程，解放人力。

分布式部署网站

目前我使用的网站结构在两个git仓库使用了两个GitHub Action流程，如下流程图所示：每次push博客生成器源码git仓库后，执行GitHub Action工作流程，将编译好的网站html源码push到另一个存放网站html代码的git仓库以及gitee备用仓库。存放html源码的仓库在收到push后又会触发自己仓库的GitHub Action，把html代码上传到阿里云oss中。


graph TB
    A[本地书写文章] -- 主动推送 --> B[(github-hexo静态网页生成器源码仓库)];
    B -- GitHub Action one --> C[(github-html代码仓库)];
    B -- GitHub Action one --> D[(gitee-html代码备用仓库)];
    C -- GitHub Action two --> E[(阿里云OSS)];

看起来有些繁琐但是人工参与的只有第一步向仓库push代码，剩下的步骤都由勤劳的GitHub Action来自动集成。网站访客在访问域名后，dns会根据访客ip智能把请求到最佳节点。”github-html代码仓库”开启了git pages用于国外访客的域名解析,阿里云OSS用于国内ip的访客使用,并且使用了cdn访问速度飞快。gitee备用仓库由于监管原因不能绑定自定义域名暂无使用只是用于备份存储，整个访问流程如下所示。


graph LR
    A[网站访客] --> B{dns判断访客IP?};
    B -- 是国内访问,解析至 --> C[阿里云cdn];
    C -.-> D[阿里云OSS];
    B -- 否,国外访问,解析至 ---> E[gitPages网页托管];

GitHub Action代码

上面这些繁琐的工作都是靠下面两个GitHub Action实现

博客生成器仓库的GitHub Action one

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
# Action 的名字
name: Hexo Auto Deploy
on:
  # 触发条件1：main 分支收到 push 后执行任务。
  push:
    branches:
      - main
  # 触发条件2：手动按钮
  workflow_dispatch:
# 这里放环境变量,需要替换成你自己的
env:
  # Hexo 编译后使用此 git 用户部署到 github 仓库
  GIT_USER: xiyuvi
  # Hexo 编译后使用此 git 邮箱部署到 github 仓库
  GIT_EMAIL: 20702001@qq.com
  # Hexo 编译后要部署的 github 仓库
  GIT_DEPLOY_REPO: xiyuvi/xiyuvi.github.io
  # Hexo 编译后要部署到的分支
  GIT_DEPLOY_BRANCH: main
  # Hexo 编译后使用此 gitee 用户部署到gitee仓库
  GITEE_USER: xiyu
  # Hexo 编译后要部署的 gitee 仓库
  GITEE_DEPLOY_REPO: xiyu/bloghtml
  # Hexo 编译后要部署到的分支
  GITEE_DEPLOY_BRANCH: main
  # 注意替换为你的 GitHub 源仓库地址
  GIT_SOURCE_REPO: git@github.com:xiyuvi/xiyuvi.github.io.git
  # 注意替换为你的 Gitee 目标仓库地址
  GITEE_DESTINATION_REPO: git@gitee.com:xiyu/bloghtml.git
jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    if: github.event.repository.owner.id == github.event.sender.id
    strategy:
      matrix:
        os: [ubuntu-18.04]
        node_version: [12.x]
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Checkout deploy repo
        uses: actions/checkout@v2
        with:
          repository: ${{ env.GIT_DEPLOY_REPO }}
          ref: ${{ env.GIT_DEPLOY_BRANCH }}
          path: .deploy_git
      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node_version }}
      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
          # coding 已取消同步
          ssh-keyscan -t rsa e.coding.net >> ~/.ssh/known_hosts
          ssh-keyscan -t rsa gitee.com >> ~/.ssh/known_hosts
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL
      - name: Install dependencies
        run: |
          npm install hexo-cli -g
          npm install
          # 根据你安装的组件进行安装
          # npm uninstall hexo-generator-index --save
          # npm install hexo-baidu-url-submit hexo-generator-index2 hexo-symbols-count-time hexo-blog-encrypt hexo-deployer-git --save
          # 复制中文语言包，解决菜单英文的问题
          # cp zh-CN.yml node_modules/hexo-theme-next/languages/
      - name: Deploy hexo
        run: |
          npm run deploy
      - name: Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          # 直接使用了 HEXO_DEPLOY_PRI
          SSH_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
        with:
          # GitHub 源仓库地址
          source-repo: ${{ env.GIT_SOURCE_REPO }}
          # Gitee 目标仓库地址
          destination-repo: ${{ env.GITEE_DESTINATION_REPO }}
      # - name: Build Gitee Pages
        # uses: yanglbme/gitee-pages-action@main
        # with:
          # 你的 Gitee 用户名
          # gitee-username: ${{ env.GITEE_USER }}
          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
          # gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
          # gitee-repo: ${{ env.GITEE_DEPLOY_REPO }}
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
          # branch: ${{ env.GITEE_DEPLOY_BRANCH }}

html代码仓库的GitHub Action two

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
name: ossWorkflow
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    - name: Build Blog
      run: |
        npm install 
    - uses: manyuanrong/setup-ossutil@master
      with:
        # endpoint 可以去oss控制台上查看
        endpoint: "oss-cn-chengdu.aliyuncs.com"
        # 使用我们之前配置在secrets里面的accesskeys来配置ossutil
        access-key-id: ${{ secrets.KEY }}
        access-key-secret: ${{ secrets.SECRET }}
    - name: Deply To OSS
      run: |
        cp -ri  ./   ../output
        cd ../output
        rm -rf .git .github
        ossutil cp ./ oss://xiyublog/ -rf

结语

GitHub Action还能用来做更多可以自动集成化的事情，希望大家都能挖掘出更多有意义的用法 。

IT
#github
使用GitHub Action分布式部署静态网站
https://xiyu.pro/2022/10/27/19/
作者
Xi Yu
发布于
2022年10月27日
许可协议