解放双手：如何用 Github Actions 部署 VuePress 博客

2023-11-11 15:29:46

前言

作为一名技术博客开发者，我时常需要在本地开发环境中修改和更新我的 VuePress 博客。传统的部署方式需要我手动将打包好的项目上传到 Github，这不仅耗时，而且容易出错。

为了解决这个问题，我开始探索使用 Github Actions 来自动化部署我的博客。Github Actions 是一个强大的持续集成和持续交付（CI/CD）平台，可以帮助开发者在每次代码提交时自动构建、测试和部署他们的项目。

在本教程中，我将详细介绍如何使用 Github Actions 部署 VuePress 博客。我们将从配置 Github Actions 开始，然后逐步讲解如何构建和部署您的项目。

配置 Github Actions

首先，您需要在您的 VuePress 博客项目中创建一个 .github/workflows 目录。在这个目录中，创建一个新的 YAML 文件，并将其命名为 main.yml。

name: Deploy VuePress Blog

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build VuePress blog
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

这个 YAML 文件定义了一个名为 Deploy VuePress Blog 的工作流。这个工作流将在每次推送到 main 分支时触发。

工作流包含一个名为 build-and-deploy 的作业。这个作业将在 Ubuntu 最新版本的虚拟机上运行。

作业包含以下步骤：

签出代码：此步骤将从 Github 仓库中签出代码。
安装依赖项：此步骤将安装 VuePress 博客的依赖项。
构建 VuePress 博客：此步骤将使用 npm run build 命令构建 VuePress 博客。
部署到 Github Pages：此步骤将使用 peaceiris/actions-gh-pages Action 将构建好的 VuePress 博客部署到 Github Pages。