手把手教你用Flutter搭建属于自己的个人博客-Gstory's Blog

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/">

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

目录CONTENT

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