Deploy Static Site to GitHub Pages

Deploying to GitHub Pages with Actions

GitHub Pages deployment via Actions gives you full control over the build process, supporting any static site generator — React, Next.js (static export), Vue, Hugo, Jekyll, Astro, and more.

Workflow YAML

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

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

How It Works

1. Permissions: The workflow needs pages: write and id-token: write permissions to deploy to GitHub Pages using the modern OIDC-based deployment method.
2. Concurrency: The concurrency block ensures only one deployment runs at a time, preventing race conditions.
3. Two-job pipeline: The build job creates the static files and uploads them as an artifact. The deploy job downloads the artifact and publishes it to Pages.
4. Environment URL: The deploy step outputs the deployment URL, which appears in the Actions UI and pull request checks.

Customization

• Change ./dist to match your framework's output directory (./build for CRA, ./out for Next.js static export, ./public for Hugo).
• Enable GitHub Pages in your repository settings under Settings > Pages > Source > GitHub Actions.
• For custom domains, add a CNAME file to your build output directory.