How to Use GitHub Pages to Deploy Flutter Websites

Making your project available to a larger audience requires deploying a Flutter web application. A simple and cost-free method of hosting static webpages straight from a GitHub repository is provided by GitHub Pages. This article will show you how to use GitHub Pages to deploy your Flutter web application.

Knowing the Fundamentals

Flutter for Web: Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. While Flutter started as a mobile framework, its web support has matured, allowing developers to create rich, interactive web applications.

GitHub Pages: This static site hosting service pulls HTML, CSS, and JavaScript files directly from a GitHub repository, publishes a website, and optionally runs the files through a build process. The service works well for hosting basic project websites, blogs, and documentation.

The deployment procedure includes building your Flutter project for the web, setting up a GitHub repository, and configuring the GitHub Pages service to deliver your files.

Step-by-Step Deployment Process

Step 1: Build Your Flutter Web Application

Building your Flutter project for the web platform is the first step. Your Dart code and assets are compiled by this command into a collection of static files (HTML, CSS, JavaScript, etc.) that a web server can serve.

1. Launch the command prompt or terminal.

2. Go to your Flutter project's root directory.

3. Run the following command:

    flutter build web
   

In your project, this command creates a build/web. All of the static files needed to run your web application are in this directory. We will be deploying this folder to GitHub Pages.

Step 2: Create a GitHub repository and Set up pages

To host your web app files, you must next create a new GitHub repository or use an already-existing one.

1. Make a Repository: Create a new public repository by logging into your GitHub account.

2. Initialize Git: In your project's root directory, initialize a Git repository if you haven't already.

    git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git
   

3. Add Remote Origin: Link your local repository to the GitHub repository you just created.

4. Set up GitHub Pages: On GitHub, go to your repository's Settings tab.

   • In the left sidebar, click on Pages.

   • Under "Build and deployment", select Deploy from a branch.

   • From the dropdown menu, choose the branch you will be pushing to (e.g., main or master).

   • From the directory dropdown, select the folder where your static files are located. You will need to create a gh-pages branch to host your files.

Note: Having a specific branch, usually referred to as gh-pages, to house the static files for GitHub Pages is standard procedure. This keeps the deployable website files and your source code apart.

Step 3: Deploy to GitHub Pages

You must push the contents of your build/web directory to the gh-pages branch of your GitHub repository in order to deploy your web application. Using a GitHub Action or a tool like gh-pages is the simplest way to automate this process.

Using the gh-pages package:

By pushing the contents of a designated directory to thegh-pages branch, this package automates the deployment process.

1. Install the package: Install gh-pages as a dev dependency or globally.

    npm install --save-dev gh-pages
   

2. Include a deploy script: Add a deploy script to your package.json file (if you have one) or pubspec.yaml file (if you wish to run it using Flutter's build process). Using the command directly is a more straightforward method.

    npx gh-pages -d build/web

This command will manage all of the Git commands for you, take the contents of the build/web directory, and push them to the gh-pages branch.

Using GitHub Actions:

You can use GitHub Actions for a more reliable and automated solution. When you push changes to your repository using this method, your app is automatically deployed.

1. Make a file for the workflow: Make a new directory in your repository .github/workflows.

2. Make a new YAML file, such as deploy.yml , favourTy.yml😅 inside this directory.

3. To the deploy.yml file, add the following code. This is a simple process that creates your Flutter application and uploads it to GitHub Pages.

    name: Flutter Web Build and Deploy
   
    on:
      push:
        branches:
          - main  # Trigger the workflow on pushes to the `main` branch
   
    jobs:
      build:
        runs-on: ubuntu-latest  # Use the latest Ubuntu runner
   
        steps:
          - name: Checkout code
            uses: actions/checkout@v3  # Check out the repository code
   
          - name: Set up Flutter
            uses: subosito/flutter-action@v2  # Set up Flutter
            with:
              channel: stable  # Use the stable Flutter channel
   
          - name: Install dependencies
            run: flutter pub get  # Install Flutter dependencies
   
          - name: Build Flutter web
            run: flutter build web  # Build the Flutter web app
   
          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3  # Deploy to GitHub Pages
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}  # Use the default GitHub token
              publish_dir: ./build/web  # Publish the `build/web` directory
   

This workflow will:

• Checkout your code.

• Set up Flutter.

• Build your web application.

• Deploy the build/web directory to the gh-pages branch.

The workflow will launch your website automatically after you push this file to your main branch.

Conclusion

It's easy to deploy a Flutter web app to GitHub Pages because Flutter can develop the app and GitHub can host it. You can simply get your web app up and running by following the instructions in this article. You can do it by hand using the gh-pages package or automatically with GitHub Actions. Have fun coding😎