利用 GitHub Action 部署静态网页或者博客

发表于 分类于 阅读次数：

介绍

Github Actions 可以很方便实现 CI/CD 工作流，类似 Travis 的用法，来帮我们完成一些工作，比如实现自动化测试、打包、部署等操作。当我们运行 Jobs 时，它会创建一个容器 (runner)，容器支持：Ubuntu、Windows 和 MacOS 等系统，在容器中我们可以安装软件，利用安装的软件帮我们处理一些数据，然后把处理好的数据推送到某个地方。

本文将介绍利用 Github Actions 实现自动部署 hexo 到 Github Pages 以及自动部署自己的静态网页，在之前我们需要写完文章执行 hexo generate --deploy 来部署，当你文章比较多的时候，可能还需要等待很久，而且还可能会遇到本地安装的 Node.js 版本与 Hexo 不兼容的问题，利用 Github Actions 你将会没有这些烦恼。

前提

创建所需仓库

  1. 创建 source-code 仓库用来存放 Hexo 项目源码或者自有静态网页的源码
  2. 创建 deploy 仓库用来存放打包后的博客页面或者静态页面，并创建一个 gh-pages 分支

生成部署密钥

一路回车，执行以下命令：

ssh-keygen -t rsa -C "yourname@example.com" -f github-deploy-key

当前目录下会有 github-deploy-key （私钥）和 github-deploy-key.pub （公钥）两个文件

配置部署密钥

复制 github-deploy-key （私钥）文件内容，在 source-code 仓库 Settings -> Secrets -> Add a new secret 页面上添加

  1. 在 Name 输入框填写 DEPLOY_PRI（可以自定义）
  2. 在 Value 输入框填写 github-deploy-key （私钥）文件内容

复制 github-deploy-key.pub （公钥）文件内容，在 deploy 仓库 Settings -> Deploy keys -> Add deploy key 页面上添加

  1. 在 Title 输入框填写 DEPLOY_PUB（可以自定义）
  2. 在 Key 输入框填写 github-deploy-key.pub （公钥）文件内容
  3. 勾选 Allow write access 选项

编写 Github Actions

Hexo 博客

在 source-code 仓库根目录下创建 .github/workflows/deploy.yml 文件

name: CI

# 当代码推送到master分支时触发Action工作流
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Hexo Auto-Deploy by GitHub Actions
    runs-on: ubuntu-latest

    steps:
      # 切换分支，使用checkout@v2插件
      - name: 1. git checkout...
        uses: actions/checkout@v2
      # 设置node环境，使用setup-node@v1插件
      - name: 2. setup nodejs...
        uses: actions/setup-node@v1
      # 安装依赖包
      - name: 3. install hexo...
        run: |
          npm install hexo-cli -g
          npm install
      # 生成静态文件
      - name: 4. hexo generate public files...
        run: |
          hexo clean
          hexo g
      # 进行部署， “DEPLOY_PRI” 为上面 👆 ‘github-deploy-key’ （私钥）的名称
      - name: 5. hexo deploy ...
        run: |
          mkdir -p ~/.ssh/
          echo "${{ secrets.DEPLOY_PRI }}" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts

          git config --global user.name "chivesssss"
          git config --global user.email "ismartgoo@gmail.com"

          hexo clean && hexo deploy

注意： 执行 hexo deploy 命令之前，需要对 hexo 配置文件中的 deploy 字段进行配置

deploy:
  type: 'git'
  repo: git@github.com:yourGithubUsername/deploy.git
  branch: [gh-pages]

自有静态网页（以 NUXT 项目为例）

在 source-code 仓库根目录下创建 .github/workflows/deploy.yml 文件

name: CI

# 当代码推送到main分支时触发Action工作流
on:
  push:
    branches:
      - main

jobs:
  build:
    name: Nuxt Project Auto-Deploy by GitHub Actions
    runs-on: ubuntu-latest

    steps:
      # 切换分支，使用checkout@v2插件
      - name: 1. git checkout...
        uses: actions/checkout@v2

      # 设置node环境，使用setup-node@v1插件
      - name: 2. setup nodejs...
        uses: actions/setup-node@v1

      # 安装依赖包
      - name: 3. install npm packages...
        run: |
          npm install

      # 生成静态文件
      - name: 4. nuxt generate dist files...
        run: |
          npm run generate

      # 利用插件 peaceiris/actions-gh-pages@v3 进行部署， “DEPLOY_PRI” 为上面 👆 ‘github-deploy-key’ （私钥）的名称
      - name: 5. nuxt deploy ...
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.DEPLOY_PRI }}
          external_repository: yourGithubUsername/deploy
          publish_dir: ./dist # 打包后的静态文件所在的目录
          keep_files: false # 删除已经存在的文件夹
          publish_branch: gh-pages # 部署的分支
          commit_message: ${{ github.event.head_commit.message }}