PNPM Deployment to GitHub Pages

[a2k42]

The current example deployment script generates warnings due to the actions using deprecated versions.

I also use pnpm locally, so an example of how to get started with pnpm as well as npm would be nice.

I'm not sure what the preset does in npx nuxt build --preset github_pages and if that's the same as the Nitro preset?

My own static page could be deployed using pnpm generate with this deploy.yaml script:

# https://github.com/actions/deploy-pages#usage
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

  workflow_dispatch:

# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
  contents: read
  pages: write      # to deploy to Pages
  id-token: write   # to verify the deployment originates from an appropriate source

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup PNPM
        uses: pnpm/action-setup@v3
        with:
          version: 9.0.x
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      # Pick your own package manager and build script
      - name: Install dependencies
        run: pnpm install
      - name: Build nuxt
        run: pnpm generate
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./.output/public

  # Deployment job
  deploy:
    environment:
      name: github_pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

I'm hesitant to update the docs with this example myself when I don't fully understand it all yet, but maybe this could be useful as a starter to someone with more knowledge then me (or future me).

I took some inspiration from the Vitepress example, which is why a couple of things have been moved or reformatted slightly.

---

Edit: remove - run: corepack enable as I don't think its necessary.

[ghost]

name: Deploy to GitHub Pages
on:
  workflow_dispatch:
  push:
    branches:
      - central
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      - run: npm install
      - run: npx nuxt build --preset github_pages
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./.output/public

  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

This is my npm yaml with updated versions of actions.