github使用workflow工作流git push后自动打包部署github pages

一时失言乱红尘 2024-03-22 12:01 42阅读 0赞

### workflows介绍 ###

根目录新建.github/workflows/docs.yml

.github/workflows/ 目录是用于存放 GitHub Actions 工作流程文件的目录，该目录的文件名必须以 .yml 或 .yaml 为后缀名，否则 GitHub 将无法识别该文件为工作流程文件。这些工作流程文件可用于自动化执行项目中的各种任务，例如构建、测试、部署等。

工作流程文件是 GitHub Actions 的核心组成部分之一，可以帮助开发人员自动化执行各种任务，从而提高生产力、加速开发流程、提高代码质量等。

name: Docs
    
    on:
      push:
        branches:
          - master
        paths:
          - src/**
      pull_request:
        paths:
          - src/**
      workflow_dispatch:
        branches:
          - master
        inputs:
          deploy:
            description: Deploy ?
            required: true
            default: false
            type: boolean
    
    jobs:
      docs:
        name: Docs
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v3
    
          - name: Setup Node.js
            uses: actions/setup-node@v3
            with:
              node-version: 18
    
          - name: Install pnpm
            id: pnpm-install
            uses: pnpm/action-setup@v2
            with:
              version: 7
              run_install: false
    
          - name: Get pnpm store
            id: pnpm-store
            shell: bash
            run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
    
          - name: Setup pnpm cache
            uses: actions/cache@v3
            with:
              path: ${
        {
         steps.pnpm-store.outputs.STORE_PATH }}
              key: ${
        {
         runner.os }}-pnpm-store-${
        {
         hashFiles('**/pnpm-lock.yaml') }}
              restore-keys: ${
        {
         runner.os }}-pnpm-store-
    
          - name: Install dependencies
            run: pnpm i --frozen-lockfile
    
          - name: Build docs
            run: pnpm run build
    
          - name: Deploy docs
            if: ${
        {
         github.event_name == 'push' || inputs.deploy }}
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${
        {
         secrets.GITHUB_TOKEN }}
              publish_dir: dist

这是一个 GitHub Actions 的工作流程文件，用于在项目中自动化构建和发布文档。以下是文件中包含的主要部分：

name：定义工作流程名称为 “Docs”。

on：定义工作流程触发条件，包括在 master 分支上推送或合并 Pull Request 时构建，以及手动触发的工作流程。

jobs：定义工作流程中的工作。

docs：定义一个名为 “docs” 的工作，用于构建和发布文档。

runs-on：定义使用的操作系统为 ubuntu-latest。

steps：定义构成工作流程的一系列步骤。

Checkout：将代码检出到工作目录。

Setup Node.js：安装 Node.js 运行时环境。

Install pnpm：安装依赖管理工具 pnpm。

Get pnpm store：获取 pnpm 仓库路径并存储到环境变量 GITHUB\_OUTPUT 中。

Setup pnpm cache：使用 GitHub Actions 缓存功能设置 pnpm 缓存。

Install dependencies：安装项目依赖。

Build docs：构建文档。

Deploy docs：发布文档到 GitHub Pages 上，前提是代码已经推送到 master 分支或手动触发工作流程，并且在输入参数中指定了 deploy=true。

uses：使用的 GitHub Actions 功能，包括代码检出、安装 Node.js、安装 pnpm、缓存、部署到 GitHub Pages 等。这些功能是通过 GitHub Actions Marketplace 中的 Action 进行实现的。

### 使用github pages ###

上方工作流，会创建一个gh-pages分支，选择该分支作为github pages使用的分支即可，以后只要更新src目录下的代码并git push推送，github就会自动打包部署项目到github pages上  
![在这里插入图片描述][b65576cda3484a1c94fc9c0409e057e0.png]

### 工作流常见报错：工作流缺乏权限 ###

如果没有写入权限的话，工作流是不能正常创建gh-pages分支  
![在这里插入图片描述][92bd503533a940089784f86a38bc67f2.png]  
![在这里插入图片描述][eb8d5f78df164fd0a939a0dc14ed0bdf.png]

[b65576cda3484a1c94fc9c0409e057e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/59462fb4120a491784ae70dd74ebddc9.png
[92bd503533a940089784f86a38bc67f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7aee7fb76d9544abb15bcc1f52f97fa2.png
[eb8d5f78df164fd0a939a0dc14ed0bdf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fb022536e04a4762b0b43c254444dc36.png