GitHub Actions 部署 VuePress 文档，零门槛上手教程

序言

在当今快速发展的技术领域，拥有详细、易于访问的文档至关重要。对于使用 VuePress 创建的文档，GitHub Actions 提供了一种无缝且高效的自动化部署解决方案。在本教程中，我们将引导您完成使用 GitHub Actions 自动将 VuePress 文档部署到 GitHub Pages 的整个过程。

先决条件

在开始之前，确保您满足以下先决条件：

• GitHub 帐户
• VuePress 应用程序
• GitHub Actions 启用（有关如何启用 GitHub Actions 的说明，请参阅 GitHub 文档）

设置 GitHub Actions

1. 创建 GitHub 仓库： 创建一个新仓库或将您的 VuePress 应用程序克隆到现有仓库。
2. 创建 .github/workflows/main.yml 文件： 在仓库的根目录下创建此文件。此文件将包含 GitHub Actions 工作流的定义。
3. 添加以下内容到 main.yml 文件：

name: Deploy VuePress Docs

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
      - run: npm install
      - run: npm run docs:build
      - uses: JamesIves/github-pages-deploy-action@4.3.3
        with:
          BRANCH: gh-pages # 部署到的分支
          FOLDER: docs/.vuepress/dist # 要部署的文件夹
          CLEAN: true # 部署前清除分支

了解工作流文件

• name： 定义工作流的名称。
• on： 指定触发工作流的事件（在本例中为向主分支推送）。
• jobs： 包含要执行的作业。
• deploy： 作业的名称。
• runs-on： 指定要运行作业的操作系统。
• steps： 作业中要执行的一系列步骤。

部署过程

以下是部署过程的工作方式：

1. 当您向主分支推送时，GitHub Actions 将触发工作流。
2. 工作流将执行一系列步骤，包括：
   • 签出您的代码。
   • 设置 Node.js 环境。
   • 安装依赖项。
   • 构建您的 VuePress 文档。
   • 将构建的文档部署到 GitHub Pages 的 gh-pages 分支。

自定义工作流

您可以根据需要自定义工作流文件。以下是一些常见的自定义：

• 修改部署分支： 更改 BRANCH 值以将文档部署到不同的分支。
• 指定部署文件夹： 更新 FOLDER 值以指定要部署的文件夹。
• 添加额外的步骤： 可以在步骤数组中添加其他步骤，例如运行测试或发送通知。

结语

使用 GitHub Actions 自动化 VuePress 文档部署过程，可以节省大量时间和精力。这使您可以专注于创建高质量的文档，同时确保它们始终在 GitHub Pages 上最新更新。通过遵循本教程中的步骤，您可以轻松设置工作流并享受自动化部署的好处。如果您有任何问题或需要进一步的指导，请随时发表评论。