The web has been supported steadily since Flutter 2.0. Now let’s teach you how to build a personal blog with Flutter, using Github’s Actions and GH-Pages services.

1. Create a Flutter project with AndoridStuido

2. Create a Github account and create a Repository

3. Upload the created Flutter project to the Master branch of the Repository

4. Obtain the Github access token

Create an Access tokenSave the token for later

5. Configure Actions secrets. Set Name to the obtained token and value to the newly obtained token

6. The configuration Actions

Rules to be filled in

name: Flutter Web
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build Web
    env:
      my_secret: ${{secrets.commit_secret}}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: subosito/flutter-action@v1
        with:
          channel: 'dev'
      - run: flutter pub get
      - run: flutter build web --release
      - run: |
          cd build/web
          git init
          git config --global user.email aaa
          git config --global user.name bbb
          git status
          git remote add origin https://${{secrets.commit_secret}}@github.com/xxx/yyy.git
          git checkout -b gh-pages
          git add --all
          git commit -m "update"
          git push origin gh-pages -f
Copy the code

Aaa – your mailbox BBB for – your name XXX – your git name yyy for -Repository name

Then every time we submitted our changes to the Master, the Actions automatically packaged the Web for us to the GH-Pages branch. Once the Actions were done, we could look at the blog site that our Flutter had built. Your git name.github. IO /Repository name /.

The important thing to note here is that you need to modify the index.html in the Web directory

<base href="/flutter_blog/"> <base href="/flutter_blog/">Copy the code

Otherwise, when you open the page, you will not find the resources.

Share a simple open source blog site written by yourself,flutter_blog