VitePress + Github Pages + Github Actions 自动化部署静态站点前言不知道是第几

前言

不知道是第几次捣鼓 Github Pages + Github Actions 了。之前每次都是花了不少时间才成功跑通，今天也不例外，整了好几个小时才跑起来。所以，这次直接记录下来，下次直接 CV 大法。

准备工作

建一个 Github 仓库，也可以随便写点什么，就当测试用。

这里我是准备使用 VitePress 写 Vue3 的源码分析的文章，然后部署到 Github Pages。

地址在这里

创建工作流

关于 Github Actions 的各种概念和知识点咱也不讲了，主要我也不太懂，有兴趣的可以掘金搜下相关的知识点，这里就直接上配置。

在项目根目录新建 .github/workflows 目录，在该目录下新建 deploy.yml (文件名可以任意起)文件，Github Actions 会自动识别该工作流。

name: Build and Deploy Docs
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    # 安装 pnpm 包管理工具 (如果用 npm 就不需要这个)
    - uses: pnpm/action-setup@v2
      with:
        version: 8

    # 安装依赖和打包
    - name: Install and Build
      run: pnpm install && pnpm run docs:build

    # 部署到 GitHub Pages
    - name: Deploy vitepress docs
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        # 要部署的文件夹 (最终会被拷贝到 gh-pages 分支下)
        FOLDER: docs/.vitepress/dist
        # 部署的分支，默认 gh-pages
        BRANCH: gh-pages