Hosting Flet website on GitHub Pages

This guide shows how to build a Flet static web app and deploy it to GitHub Pages with GitHub Actions.

Setup

1. Open your repository root.
2. Create this folder if it does not exist: .github/workflows/
3. Create a workflow file in that folder, for example: .github/workflows/build-deploy.yml - must have the .yml or .yaml file extension.
4. Copy the workflow configuration below into that file and adjust to your needs.
5. Commit and push to GitHub.
6. Open the Actions tab to monitor build/deploy progress.

Repository settings

In GitHub, open Settings → Pages and make sure deployment source is GitHub Actions.

Workflow

name: Web Build + Deploy to GitHub Pages

on:
  push:
  pull_request:
  workflow_dispatch:

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

env:
  UV_PYTHON: 3.12

  # https://flet.dev/docs/reference/environment-variables
  FLET_CLI_NO_RICH_OUTPUT: 1

jobs:
  build:
    name: Build web app
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup uv
        uses: astral-sh/setup-uv@v6

      - name: Build app
        shell: bash
        run: |
          uv run flet build web --yes --verbose --base-url ${GITHUB_REPOSITORY#*/} --route-url-strategy hash

      - name: Upload Pages Artifact
        uses: actions/upload-pages-[email protected]
        with:
          path: build/web
          name: web-build-artifact
          retention-days: 20

  deploy:
    name: Deploy to GitHub Pages
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    needs: build
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

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

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-[email protected]
        with:
          artifact_name: web-build-artifact

See it in action here.