Deploy Flutter Web Application to GitHub Pages using GitHub Actions.

Here we are going to take advantage of GitHub pages and GitHub actions to deploy a web version of a flutter application for free. If you have not installed Flutter yet, follow the instructions in their web.

First of all we need to create a new flutter project:

    flutter create flutter_to_ghpages_example

Onces the project is created:

    cd flutter_to_ghpages_example/
    flutter run -d chrome

With those commands we are going to run the example application on chrome (if you want to run it in a different browser you could execute: flutter devices to list all the available devices and choose one).

Now that we checked that everything works great on our computer is time for checking the source to git.

    git init
    git add .
    git commit -m "Initial Commit"
    git branch -M main
    git remote add origin git@github.com:[UserName]/[RepositoryName].git
    git push -u origin main

Our initial code should be in our GitHub repository.

Before creating our workflow we need to create an empty branch named gh-pages:

    git switch --orphan gh-pages
    git commit --allow-empty -m "Initial commit on orphan branch"
    git push origin gh-pages

With this branch pushed, and action will trigger to deploy our webpage:

But as we don't have any code, the web will have an error:

Lets deploy our initial web, for this we create a workflow that each time we push changes to main it will update one branch called gh-pages with the web build on it:

.github/workflows/CD-to-gh-pages.yml

name: CD to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  cd:
    runs-on: ubuntu-20.04
    env:
      JAVA_VERSION: "11.0"
      FLUTTER_VERSION: "2.10.4"
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-java@v1
        with:
          java-version: ${{env.JAVA_VERSION}}
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: ${{env.FLUTTER_VERSION}}
      - run: flutter pub get
      - run: flutter analyze
      - run: flutter test
      # Build the project on release web mode, also change the base-href to the repository name
      # because when you create a github page this is included on the url.
      - run: flutter build web --release --base-href="/${{ github.event.repository.name }}/"
      - run: |
          git config --global user.name '${{github.event.pusher.name}}'
          git config --global user.email '${{github.event.pusher.email}}'
          git add -f build/web
          git commit -m '[automated commit] releasing new web version.'
          git push origin `git subtree split --prefix build/web main`:gh-pages --force

This workflow will:

1. Checkout the main branch.
2. Install Java 11.0.
3. Install Flutter 2.10.4
4. Get the dependencies, analyze and test the code.
5. Build the project on release web mode. It is important to change the base-href because the default value is / and on GitHub pages, the base URL is your repository name.
6. Configure git with the credential of the person who made the push to main.
7. Even though build folder is excluded on .gitignore we need to add build/web so we force it.
8. A commit is created with the content on build/web.
9. We are only interested on the content of build/web folder, so we create a subtree and push it to gh-pages branch.

After committing and pushing this changes to Github, a new Action run should be triggered:

When the execution of the workflow finishes, a new GitHub Pages deployment action will be running.

Now our code should be shown on the web:

Apparently everything is working properly, but lets demonstrate making a small change to the web. Lets change the title on lib/main.dart line 27:

Add the changes, commit and push to main.

All the code is available on this repository.