Github Actions 自动化部署

Github actions 简介

科普还得看阮一峰,先看看阮一峰的博文,科普一下.

看归看,但是这篇文章老了,里面的配置目前没法用了.了解一下概念,我们开工

部署流程

图 1

这里需要做些准备

准备一套秘钥,用于自动化脚本提交代码时使用,参考文档

bash

# -f 后面是文件名
# 注意修改 email 地址
ssh-keygen -f my_blog -t rsa -m pem -b 4096 -C "[email protected]" -N ""

1
2
3

生成两个文件,一个 my_blog,一个my_blog.pub
将my_blog.pub的内容复制下来,添加到{username}.github.io这个仓库的 deploy key 中
将my_blog的内容复制下来,添加到 blog代码这个仓库的 secrets中,这里取名DEPLOY_KEY,在脚本中用 secrets.DEPLOY_KEY 来读取这个值

添加打包脚本

在blog代码这个仓库,新建文件夹.github/workflows
在.github文件夹中添加一个yml文件,文件名随意
添加脚本

name: Blog Deploy
permissions:
  contents: write
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install and Build 🔧
        run: |
          npm install
          npm run build

      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: docs/.vitepress/dist # 如果 vitepress 没有配置 outDir,这里就是这个值,如果配置了 outDir ,这里就填写打包输出目录
          clean: true
          ssh-key: ${{ secrets.DEPLOY_KEY }} # 这里就是第四步添加的参数
          branch: main
          repository-name: ************************ # 替换成自己 blog 仓库,如 username/username.github.io

      - name: Invoke Cloudflare Webhook
        uses: distributhor/workflow-webhook@v2
        env:
          webhook_url: ${{ secrets.CLOUDFLARE_WEBHOOK_URL }}
          webhook_secret: "Y0uR5ecr3t"

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

脚本解析:

在推送main分支时触发
在 ubuntu-latest 上运行
首先拉取代码
安装依赖,buid
把buid的结果推送到repository-name配置的仓库中
触发cloudflare的webhook,同步更新cloudflare的pages

触发cloudflare webhook

我在cloudflare上做了一个备份,而且cloudflare的pages服务速度更快,为了同步,我在脚本的结尾加了一步,触发cloudflare 的webhook,这样就能保证同步了

在加一个评论功能,Blog就全了,下一篇,我们来通过 Gitalk 加上评论功能

Github Actions 自动化部署 #

Github actions 简介 #

部署流程 #

这里需要做些准备

添加打包脚本

Github Actions 自动化部署

Github actions 简介

部署流程