当前位置: 首页 > news >正文

vitepress项目使用github的action自动部署到github-pages中,理论上可以通用所有

使用githubaction自动部署到github-pages

创建部署的deploy.yml文件,在项目的根目录下面

.github\workflows\deploy.yml
请添加图片描述
完整的代码:使用的是pnpm进行依赖安装。

name: 部署VitePresson:push:branches:- docs # 这段是在推送到 docs 分支时触发该命令jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2with:ref: docs # 这一步检查 docs 代码- name: Setup Node.js and pnpmuses: actions/setup-node@v3with:node-version: '20.10.0' # 设置 nodejs 的版本- name: Install pnpmrun: npm install -g pnpm # 全局安装 pnpm- name: Install dependenciesrun: pnpm install # 使用 pnpm 安装依赖- name: Build VitePressrun: pnpm run docs:build # 这里是打包 vitepress 命令- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.PAT_TOKEN }} # 这一步很重要,单独看下面的大步骤,主要是用来给该脚本一些仓库权限publish_dir: .vitepress/dist # 指定该文件夹中的 dist publish_branch: gh-pages # 推送到关联仓库的 gh-pages 分支dotfiles: true  # 包括在提交中,即使被 .gitignore 文件忽略

这段 YAML 文件定义了一个 GitHub Actions 工作流,用于在推送到 docs 分支时构建和部署 VitePress 项目。

  • on: 定义触发工作流的事件,这里是在推送到 docs 分支时触发。

  • jobs: 定义工作流中的任务。

    • build-and-deploy: 任务的名称,表示构建和部署。

      • runs-on: 指定任务运行的操作系统,这里是 ubuntu-latest

      • steps: 定义任务的一系列步骤。

        • name: 步骤的名称。

        • uses: 使用的 GitHub Action。

        • with: 配置项,用于传递参数给 Action。

        • run: 执行的脚本命令。

其中,具体步骤解释如下:

  1. 检出代码:使用 actions/checkout Action 将代码检出到工作目录。

  2. 设置 Node.js 和 pnpm:使用 actions/setup-node Action 设置 Node.js 和安装 pnpm。

  3. 安装 pnpm:全局安装 pnpm。

  4. 安装依赖:使用 pnpm 安装项目依赖。

  5. 构建 VitePress:运行 pnpm 命令构建 VitePress 项目。

  6. 部署到 GitHub Pages:使用 peaceiris/actions-gh-pages Action 部署生成的静态文件到 GitHub Pages。配置中包括 GitHub Token、发布目录、发布分支以及是否包括 dotfiles(即使在 .gitignore 中也提交)等。

仓库说明

请添加图片描述

以下创建私人token和pages详细的步骤截图

如果看不清楚,可以右键打开到新窗口预览

请添加图片描述

github_token: ${{ secrets.PAT_TOKEN }}创建

  1. 先点击个人头像,进入设置页面
    请添加图片描述

  2. 进入 Developer Settings 设置
    请添加图片描述

  3. 生成个人token Personal access tokens (classic)
    请添加图片描述

  4. 设置token
    请添加图片描述

  5. 保存生成的token
    请添加图片描述

  6. 进入仓库添加该仓库的token
    请添加图片描述
    请添加图片描述
    请添加图片描述

4. 创建githubpages

请添加图片描述
请添加图片描述

http://www.lryc.cn/news/266674.html

相关文章:

  • Python爬虫---解析---JSONPath
  • 路由器介绍和命令操作
  • Hadoop——分布式计算
  • LaTeX引用参考文献 | Texstudio引用参考文献
  • 如何在Go中使用模板
  • 云原生之深入解析基于FunctionGraph在Serverless领域的FinOps的探索和实践
  • 电子电器架构(E/E)演化 —— 主流主机厂域集中架构概述
  • Python常用的几个函数
  • 【Linux系统基础】(2)在Linux上部署MySQL、RabbitMQ、ElasticSearch等各类软件
  • HarmonyOS4.0系统性深入开发01应用模型的构成要素
  • 线下终端门店调研包含哪些内容
  • 倾斜摄影三维模型数据在行业应用分析
  • Apache Flink 进阶教程(七):网络流控及反压剖析
  • k8s学习 — (DevOps实践)第十三章 DevOps 环境搭建
  • Java_Stream流
  • delphi中,tstringlist使用方法示例
  • 【飞凌 OK113i-C 全志T113-i开发板】视频编解码测试
  • 全部没有问题 (一.5)
  • C++归并排序详解以及代码实现
  • springboot整合JPA 多表关联 :一对多 多对多
  • Python 数据分析 Matplotlib篇 plt.rcParams 字典(第5讲)
  • DeamonSet详解
  • TwIST算法MALTLAB主程序详解
  • Flutter 三: Dart
  • redis基本用法学习(C#调用FreeRedis操作redis)
  • Postman接口测试(超详细整理)
  • 【深入解析spring cloud gateway】12 gateway参数调优与分析
  • Java继承,父类没有无参构造方法时,子类必须要显式调用父类的构造方法
  • Ubuntu 20.04使用Livox Mid-360
  • C语言之冒泡排序