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


相关推荐
wzfj1234512 分钟前
ssh 远程pc如何不用每次都输入密码
github
行百里er3 小时前
代码跑得慢?让Spring的StopWatch告诉你真相!
java·后端·github
无限进步_7 小时前
【C语言&数据结构】相同的树:深入理解二叉树的结构与值比较
c语言·开发语言·数据结构·c++·算法·github·visual studio
CoderJia程序员甲8 小时前
GitHub 热榜项目 - 日榜(2026-1-10)
ai·开源·大模型·github·ai教程
通义灵码18 小时前
Qoder 支持通过 DeepLink 添加 MCP Server
人工智能·github·mcp
数据大魔方1 天前
【期货量化实战】跨期套利策略:价差交易完整指南(TqSdk源码详解)
数据库·python·算法·github·程序员创富
数据大魔方1 天前
【期货量化实战】螺纹钢量化交易指南:品种特性与策略实战(TqSdk完整方案)
python·算法·github·程序员创富·期货程序化·期货量化·交易策略实战
Cx330❀1 天前
Git 多人协作全攻略:从入门到高效协同
大数据·elasticsearch·搜索引擎·gitee·github·全文检索·gitcode
CoderJia程序员甲1 天前
GitHub 热榜项目 - 日榜(2026-1-9)
开源·大模型·llm·github·ai教程
lpfasd1231 天前
系统、详细地介绍 GitHub 官方 API 的能力边界
github