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

使用githubaction自动部署到github-pages

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

.github\workflows\deploy.yml

完整的代码:使用的是pnpm进行依赖安装。

yml 复制代码
name: 部署VitePress

on:
  push:
    branches:
      - docs # 这段是在推送到 docs 分支时触发该命令

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          ref: docs # 这一步检查 docs 代码

      - name: Setup Node.js and pnpm
        uses: actions/setup-node@v3
        with:
          node-version: '20.10.0' # 设置 nodejs 的版本
          
      - name: Install pnpm
        run: npm install -g pnpm # 全局安装 pnpm

      - name: Install dependencies
        run: pnpm install # 使用 pnpm 安装依赖

      - name: Build VitePress
        run: pnpm run docs:build # 这里是打包 vitepress 命令

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          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


相关推荐
峰向AI8 小时前
Superpower 不是最「聪明」的,这个开源项目让模型学会资深工程师的肌肉记忆
github
YuePeng8 小时前
卖了几年的 BI 模块突然免费:24 种图表,一条 SQL 一张图
github
dong_junshuai8 小时前
每天一个开源项目#82 9.2K星God's Eye View:公开信号3D地球
开源·github
简创AIGC陶先生9 小时前
第1章:项目全景与架构总览
github
怕浪猫9 小时前
ZCode 周末送额度活动开启:3 亿 Token 免费领取
github
P1Browser10 小时前
指纹浏览器安全吗?从浏览器环境隔离、数据存储到安全风险解析
网络·tcp/ip·安全·网络安全·github·php
todoitbo13 小时前
用蓝耘元生代做 GitHub 热榜解读:Dify Chatflow 接入和真实项目分析
ai·github·api·dify·蓝耘
猫头虎13 小时前
GitHub 入门教程:如何加入并为开源项目贡献代码
gitee·开源·gitlab·github·开放原子·开源协议·gitcode
樱花落木兰13 小时前
Git 超全零基础教程|三区原理、全套命令、分支协作、冲突解决、IDEA 集成(面试必备)
ide·git·json·github
TunerT_TQ15 小时前
IBM |css-gridish 源码分析:4 个 JavaScript 文件背后的 CSS Grid 可视化工具
开源·github·资讯