本地及远程仓库配置

首先，要创建Flutter Web应用程序，我们需要启用flutter web功能，了解更多？

#让flutter仓库处于beta或Master或dev通道（实质是切换git当前分支到beta分支）
flutter channel beta
#升级
flutter upgrade
#启用web
flutter config --enable-web

然后创建一个带有Web支持的新项目：

#创建一个flutter项目并进入（名字叫 flutter_blog）
flutter create flutter_blog && cd flutter_blog

或者您也可以在您的项目根目录中启用 web 构建功能

flutter create .

现在，我们有了一个可以在Web上运行的Flutter本地项目。要使用gh-pages发布或托管它，我们需要新建一个github仓库：

new_repo.png

现在我们返回本地web项目 flutter_blog 的根目录

git init
git add --all
git commit -m "first commit"
#YOUR_NAME是你自己的github用户名
git remote add origin https://github.com/YOUR_NAME/flutter_blog.git
git push -u origin master

现在，我们已经将flutter项目的初始状态推到了远端的github master分支

Github 的 access token 和 secret配置

我们将创建一个Actions来构建和发布Flutter Web项目，但是我们需要设置一个访问令牌（access token），让运行我们的Actions的机器无需github密码也能提交代码:

access_token.png

选择repo：status和public_repo部分以提交公共存储库。

注意：如果您的存储库是私有的，则还需要选择私有部分。

创建access token后，将其复制并保留在某个地方，因为您再也看不到它，稍后需要用到。

配置secret：

secret.png

起个名字commit_secret与access token作用匹配，将前面获取的access token密钥添加到下方输入框

Github Actions配置

开启GitHub Actions：

actions_setting.png

配置你的Actions，修改该改的部分：

actions_commit.png

代码片段如下：（来源于此）

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 config --enable-web
      - run: flutter pub get
      - run: flutter build web --release
      - run: |
          cd build/web
          git init
          # 改成你的提交邮箱
          git config --global user.email onatcipli@outlook.com
          # 改成你的提交用户名
          git config --global user.name onatcipli
          git status
          # 更改此远程URL，例如查看您的远程URL是 https://github.com/onatcipli/flutter_web.git 然后改成以下内容
          git remote add origin https://${{secrets.commit_secret}}@github.com/onatcipli/flutter_web.git
          git checkout -b gh-pages
          git add --all
          git commit -m "update"
          git push origin gh-pages -f

总结一下以上Actions的作用：

服务器检测到master分支有代码提交就会执行flutter build web --release进行构建，此命令构建的web页面会输出到项目根目录的build/web目录，进入此目录，将此目录的编译产物提交到gh-pages分支即可看到你的网站web页面

完成这些更改后，我们以后只需在本地将代码提交、推送到master即可。