一、实现原理

Github仓库收到代码push后,执行GithubAction,自动打包构建,并将生成的静态资源文件推送到腾讯云COS存储桶内,借助腾讯云COS的静态网站功能,完成博客的自动构建。

image-20240121135625977

二、相关概念

2.1 什么是GithubAction?

Github Actions 是 GitHub 推出的持续集成 (Continuous integration , 简称 (CI) 服务 , 它提供了配置虚拟服务器环境 , 基于它可以进行构建 、 测试 、 打包 、 部署项目 。

GitHub Actions 为每个任务 (job) 都提供了一个虚拟机来执行 , 每台虚拟机都有相同的硬件资源 :

2-core CPU
7 GB RA M 内存
14 GB SSD 硬盘空间
(实测硬盘总容量为 90G 左右 , 可用空间为 30G 左右)

使用限制:

每个仓库只能同时支持 20 个 workflow 并行 。
每小时可以调用 1000 次 GitHub API 。
每个 job 最多可以执行 6 个小时
免费版的用户最大支持 20 个 job 并发执行 , macOS 最大只支持 5 个
私有仓库每月累计使用时间为 2000 分钟( 超过后 $ 0 , 008 / 分钟 , 公共仓库则无限制 )
配置
核心概念与层次关系:workflow/job/step/action

img

配置路径:项目根目录/.github/workflow/*.yml

触发条件 : 仓库事件 、 定时触发 、 手动 、 API

原文链接:https://blog.csdn.net/qq_42933340/article/details/13111 0762

2.2 什么是COS?

COS就是腾讯云提供的对象存储服务,此外阿里的OSS、华为云的OBS都是对象存储,只是各家取的名字不同。

对象存储可以简单理解为一个容量相对无限大的静态资源托管服务器,主要用于存放静态资源,例如作为图床、或用于静态网站部署。

三、具体操作步骤

1. 注册一个腾讯云账号,创建COS存储桶

访问腾讯云对象存储控制台=>创建存储桶=>基础配置=>静态网站,开启静态网站功能

2. 获取COS接入所需的参数

  1. 进入访问管理=>密钥管理=>【新增密钥】=>获取 SecretId 和 SecretKey 这里建议可以新增子用户,并设置权限,获取子用户的密钥。

  1. 存储桶列表 => 进入刚刚新建的存储桶 => 概览

3. 配置GitHub Actions环境变量

在Hexo博客代码仓库设置Action环境变量

SECRET_ID 腾讯云的SecretID
SECRET_KEY 腾讯云的SecretKey
BUCKET COS存储桶名称
REGION COS存储桶区域

Alt text

4.在项目根目录.github/workflows下添加deploy.yml文件,定义Action的工作流

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
name: 部署到Github Pages和腾讯云COS

on:
push: # push时触发
branches:
- main # default branch

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
token: ${{ secrets.GITHUB_TOKEN }}
# If your repository depends on submodule, please see: https://github.com/actions/checkout
submodules: recursive
- name: 安装Node环境
uses: actions/setup-node@v2
with:
node-version: '16' #指定node版本16
- name: Cache NPM dependencies #缓存npm依赖
uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.OS }}-npm-cache
restore-keys: |
${{ runner.OS }}-npm-cache
- name: Install Dependencies #安装依赖
run: npm install
- name: Build #打包构建
run: npm run build
- name: Upload Pages artifact # 上传构件用于GithubPages部署
uses: actions/upload-pages-artifact@v2
with:
path: ./public
- name: Create artifact # 上传构件用于腾讯云COS部署
uses: actions/upload-artifact@v3
with:
name: buildPakage
path: ./public

uploadToCOS: #上传build后的文件到对象存储
needs: build
runs-on: ubuntu-latest
steps:
- name: Download artifact # 下载构件
uses: actions/download-artifact@v3
with:
name: buildPakage
path: ./dist #将构件下载到当前工作目录
- name: Install coscmd #下载COS操作插件
run: sudo pip install coscmd
- name: Configure coscmd #配置环境变量
env:
SECRET_ID: ${{ secrets.TENCENT_CLOUD_SECRET_ID }}
SECRET_KEY: ${{ secrets.TENCENT_CLOUD_SECRET_KEY }}
BUCKET: myblog-1314096013
REGION: ap-chengdu
run: coscmd config -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION
- name: Upload #推送到COS
run: coscmd upload -rfs --delete ./dist/ /

#下面的代码用于部署到Github Pages,如无需要可以注释掉
deploy:
needs: build
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: 部署到GitHubPages
id: deployment
uses: actions/deploy-pages@v2

5.验证结果

推送代码后,会触发Action的工作流,可以在仓库中的Action模块中查看工作流的执行情况

点击具体的job,可以查看详细的执行情况和报错,便于根据错误信息进行调试。

四、参考文章