Github 自动化部署到GitHub Pages-Toy模板网

这篇具有很好参考价值的文章主要介绍了Github 自动化部署到GitHub Pages。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

github仓库示例: automated-deployment

1.准备工作

新建仓库

Github 自动化部署到GitHub Pages,github,github,自动化,运维

新建项目

Github 自动化部署到GitHub Pages,github,github,自动化,运维

配置 vite.config.ts

base: './',

部署应用包时的基本URL，例：vue-cli 5.x 配置 publicPath

Github 自动化部署到GitHub Pages,github,github,自动化,运维

推送到远程仓库

Github 自动化部署到GitHub Pages,github,github,自动化,运维

2.配置 GitHub Token

点击 Settings -> Actions -> General

Github 自动化部署到GitHub Pages,github,github,自动化,运维

找到 Workflow permissions，选中第一项并保存

工作流默认是没有推送代码的权限，配置选中第一项，工作流才具有读取和写入权限

Github 自动化部署到GitHub Pages,github,github,自动化,运维

3.配置 Actions 工作流

点击 Actions -> set up a workflow yourself

Github 自动化部署到GitHub Pages,github,github,自动化,运维

新建的 main.yml 文件名可以自定义，例：ci.yml

Github 自动化部署到GitHub Pages,github,github,自动化,运维

将以下配置填充到 ci.yml

name: Build and Deploy
# 监听 master 分支上的 push 事件
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    # 构建环境使用 ubuntu
    runs-on: ubuntu-latest
    steps:
      # 官方action, 将代码拉取到虚拟机
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      # 安装node.js
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18.18.2"

      # 下载依赖、打包项目
      - name: Install and Build
        run: |
          yarn install
          yarn build

      # 部署
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:
          # 项目配置的打包目录名称
          folder: dist
          # 部署后提交到的分支
          branch: static-pages