Deploy to GitHub Pages

GitHub Actions workflow

Use LikeC4 GitHub Action to build and deploy static website to GitHub Pages.

# Sample workflow for building and deploying a website to GitHub Pages
name: Deploy Pages

on:
  # Runs on pushes targeting the default branch and c4 files
  push:
    branches: ["main"]

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

# Allow only one concurrent deployment, skipping runs queued between the run in progress and the latest queued.
# However, do NOT cancel in-progress runs, as we want to allow these production deployments to be completed.
concurrency:
  group: "pages"
  cancel-in-progress: false

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

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

      - name: Build
        uses: likec4/actions@v1
        with:
          action: build
          output: dist
          # required if you don't set a custom domain for the repository
          # https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
          base: ${{ steps.pages.outputs.base_path }}
          likec4-version: latest

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

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

Use LikeC4 CLI

You can use LikeC4 CLI, example of build-pages job:

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

      - name: Setup node
        uses: actions/setup-node@v4

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

      - name: Build
        run: |
          npx likec4 build \
            --base ${{ steps.pages.outputs.base_path }} \
            --output dist

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