Deploy npm build output to GitHub pages

Using GitHub actions to deploy the result of npm build has never been simpler. Following these steps should have you up and running with a static page in no time!

Step 1 - Create a github action

In your project add a YAML file at .guthub/workflows lets call it pages.yml.

Step 2 - Add the config for the action

In your newly created pages.yml file add the following content:

# Workflow for building with npm and deploying artifact to GitHub Pages
name: Deploy site to GitHub Pages

on:
	# Runs on pushes targeting the default branch
	push:
		branches: ['main']

	# Allows you to run this workflow manually from the Actions tab
	workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
	contents: read
	pages: write
	id-token: write

# Allow one concurrent deployment
concurrency:
	group: 'pages'
	cancel-in-progress: true

# Default to bash
defaults:
	run:
		shell: bash

jobs:
	# Build job
	build:
		name: Build
		runs-on: ubuntu-latest
		steps:
			- name: Checkout
				uses: actions/checkout@v4
				with:
					submodules: recursive
			- name: Setup Pages
				id: pages
				uses: actions/configure-pages@v1
			- name: Build with npm run build
				run: |
					npm ci
					npm run build
			- name: Upload artifact
				uses: actions/upload-pages-artifact@v1
				with:
					path: ./build

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

Step 3 - Push your project to GitHub

Push your project to GitHub. This should automatically start the build process.