提示

You can refer to the official documentation for more details.

The Workflow

Currently, this site is deployed to GitHub Pages through the workflow defined below. It is more practical than the default workflow provided by VuePress.

详情

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches: [main] # Deploy on push to main branch
  workflow_dispatch: # Allow manual triggering

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Needed for page update histories

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 9
          run_install: true # Install with pnpm

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20 # Node.js version
          cache: pnpm # Cache pnpm

      - name: Build VuePress site
        run: pnpm build # Build VuePress site

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vuepress/dist # The directory where the built VuePress site is located

  deploy:
    needs: build

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

The Configuration

Repository Settings

You simply need to enable the GitHub Pages feature on your repository in the settings.

1. Go to Settings > Pages > Build and deployment.
2. From Source, select GitHub Actions.

Known Issues

Vue Router

Vue Router won't work properly on GitHub Pages sites unless they are deployed to the repository <USERNAME>.github.io directly, which means, it cannot handle a base option beyond /.

This is unfixable as it also happens in single page applications that use Vue Router. I recommend using a custom domain or using VitePress instead.