手把手教你用Flutter搭建属于自己的个人博客

Flutter 2.0以来已经稳定支持web的开发，现在来教大家使用Flutter搭建一个个人的博客网站，使用Github提供的Actions、gh-pages服务，毕竟一时白票一时爽，一直白嫖一直爽。

1. 使用AndoridStuido创建一个Flutter项目

2. Github注册一个账号，并且创建一个Repository

3. 上传创建的Flutter项目到这个Repository的master分支中

4. 获取Github的access token

新建一个access token

保存token，等下要用

5. 配置Actions secrets，name随便填写，value填入刚刚获取的token

6.配置Actions

需要填写的规则

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

aaa-你的邮箱 bbb替-你的名称 xxx-你的git名字 yyy为-Repository名字

然后我们每次提交修改到master上时，Actions都会自动帮我们打包web到gh-pages分支上，完成Actions后，我们可以查看flutter构建的博客网站，一般网址为https://你的git名字.github.io/Repository名字/。

这里记得注意的是需要修改web目录下index.html中

<base href="/">

修改为Repository的名字

<base href="/flutter_blog/">

不然在打开网页的时候会找不到资源。