Build and Deploy to GitHub Pages workflow (react-grid-layout/react-draggable)

The Build and Deploy to GitHub Pages workflow from react-grid-layout/react-draggable, explained and optimized by Latchkey.

CI health: C - fair

Point runs-on at Latchkey and get run de-duplication, job timeouts, SHA-pinned actions, self-healing for flaky steps, and up to 58% lower cost, applied automatically.

Grade your own workflow free or run it on Latchkey →

Source: react-grid-layout/react-draggable.github/workflows/gh-pages.ymlLicense MITView source

What it does

This is the Build and Deploy to GitHub Pages workflow from the react-grid-layout/react-draggable 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: Build and Deploy to GitHub Pages
permissions:
  contents: write
on:
  push:
    tags:
      - "*"
  workflow_dispatch:
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build
        run: |
          yarn
          yarn build
          yarn build-example

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: example # The folder the action should deploy.

The same workflow, on Latchkey

Removes redundant runs and caps runaway jobs. Added and changed lines are highlighted.

name: Build and Deploy to GitHub Pages
permissions:
  contents: write
on:
  push:
    tags:
      - "*"
  workflow_dispatch:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 
jobs:
  build-and-deploy:
    timeout-minutes: 30
    runs-on: latchkey-small
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4
 
      - name: Install and Build
        run: |
          yarn
          yarn build
          yarn build-example
 
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: example # The folder the action should deploy.

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.
Cancel superseded runs when a branch or PR gets a newer push.
Add a job timeout so a hung step cannot burn hours of runner time.

1 third-party action is referenced by a movable tag. Pin it to the commit SHA (Latchkey resolves and applies this automatically) so a repointed tag cannot change what runs.

This workflow runs 1 job 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