Deploy website to GitHub Pages workflow (mdaines/viz-js)

The Deploy website to GitHub Pages workflow from mdaines/viz-js, explained and optimized by Latchkey.

CI health: C - fair

Point runs-on at Latchkey and get caching, job timeouts, self-healing for flaky steps, and up to 58% lower cost, applied automatically.

Grade your own workflow free or run it on Latchkey →

Source: mdaines/viz-js.github/workflows/website-deploy.ymlLicense MITView source

What it does

This is the Deploy website to GitHub Pages workflow from the mdaines/viz-js repository, a real project running GitHub Actions. It is shown here with attribution under its MIT license.

Below, Latchkey shows a faster, safer version produced by its optimization engine.

The workflow

workflow (.yml)

name: Deploy website to GitHub Pages

on:
  workflow_dispatch

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

concurrency:
  group: "pages"
  cancel-in-progress: true

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

      - name: Use Node.js
        uses: actions/setup-node@v6
        with:
          node-version: "24.x"

      - name: Install dependencies
        run: npm clean-install --ignore-scripts
        working-directory: website

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5

      - name: Build website
        run: npm run build -- --public-url "${{ steps.pages.outputs.base_path }}/"
        timeout-minutes: 1
        working-directory: website

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: website/dist

  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

The same workflow, on Latchkey

Estimated ~20% faster on cache hits, plus fewer wasted runs and a safer supply chain. Added and changed lines are highlighted.

name: Deploy website to GitHub Pages
 
on:
  workflow_dispatch
 
permissions:
  contents: read
  pages: write
  id-token: write
 
concurrency:
  group: "pages"
  cancel-in-progress: true
 
jobs:
  build:
    timeout-minutes: 30
    runs-on: latchkey-small
    steps:
      - name: Checkout
        uses: actions/checkout@v5
 
      - name: Use Node.js
        uses: actions/setup-node@v6
        with:
          cache: 'npm'
          node-version: "24.x"
 
      - name: Install dependencies
        run: npm clean-install --ignore-scripts
        working-directory: website
 
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
 
      - name: Build website
        run: npm run build -- --public-url "${{ steps.pages.outputs.base_path }}/"
        timeout-minutes: 1
        working-directory: website
 
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: website/dist
 
  deploy:
    timeout-minutes: 30
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
 
    needs: build
    runs-on: latchkey-small
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

What changed

Run on Latchkey managed runners with one line (runs-on), which apply the fixes below automatically and self-heal transient failures. This example uses latchkey-small; pick the runner size that fits the job.
Cache dependency installs on the setup step so they are served from cache.
Add a job timeout so a hung step cannot burn hours of runner time.

This workflow runs 2 jobs per trigger. On Latchkey the same minutes cost up to 58% less than GitHub-hosted, with zero queue time.

Actions used in this workflow

actions/checkout actions/setup-node actions/upload-pages-artifact actions/deploy-pages