Host with GitHub Pages

You can deploy your game as a website using GitHub Pages. GitHub Pages allows you to host your HTML, CSS, and JavaScript files for free. Also, GitHub actions enable you to automatically update your game whenever you push changes to your GitHub repo.

Here's a step-by-step guide for how to set up deployment to GitHub Pages with automatic deployment using GitHub Actions.

Steps

Step 1: Setup GitHub Actions

Create a file with the following contents in your repository with the path .github/workflows/deploy.yaml

name: GitHub Pages Deploy
on: 
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - name: Install dependencies
        working-directory: ./
        run: |
          npm ci
      - name: Compile
        working-directory: ./
        run: |
          npx tsc && npx vite build --base=./
      - uses: actions/upload-artifact@main
        with:
          name: page
          path: dist
          if-no-files-found: error
  deploy:
    runs-on: ubuntu-latest
    # Add a dependency to the build job
    needs: build

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

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/download-artifact@main
        with:
          name: page
          path: .
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 2: Enable GitHub Pages

Before pushing your changes, you need to enable GitHub pages. On your repository in GitHub, go to settings, pages, and select GitHub Actions as a source under Build and deployment.

Step 3: Push your code

Next time you now push any commit in the branch called main, the GitHub Action will run, build your project and deploy to GitHub Pages.

Step 4: Setup a domain

While not necessary, you can setup a custom domain name for your game. You can read more about this at this link.

About custom domains and GitHub Pages - GitHub DocsGitHub Docs