Flutter前几天发布的1.12版本支持了构建web和MacOS应用，Github Actions也发布一年了，我却最近才尝试它们。
那么怎样用flutter创建一个免费的个人网站呢？
本地及远程仓库配置
首先，要创建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仓库：
现在我们返回本地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密码也能提交代码:
选择repo：status和public_repo部分以提交公共存储库。
注意：如果您的存储库是私有的，则还需要选择私有部分。
创建access token后，将其复制并保留在某个地方，因为您再也看不到它，稍后需要用到。
配置secret：
起个名字commit_secret与access token作用匹配，将前面获取的access token密钥添加到下方输入框
Github Actions配置
开启GitHub Actions：
配置你的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 config --enable-web
- run: flutter pub get
- run: flutter build web --release
- run: |
cd build/web
git init
# 改成你的提交邮箱
git config --global user.email [email protected]
# 改成你的提交用户名
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即可。
欣赏一下自动工作流及成果
我们可以从“Actions”标签中看到正在执行或已完成的操作：
当我们单击Actions名称（比如上图加粗的Flutter Web这俩单词）时，我们可以看到有关它的详细信息：
完成Actions后，我们可以查看flutter构建的web网站： onatcipli.github.io/flutter_web（例子）
格式是：https://YOUR_GITHUB_NAME.github.io/YOUR_REPO_NAME
下面是我山寨的苹果官网demo，右边是原生页面，可以看到用flutter同时适配PC和手机宽度都不是问题(点我去github看渣渣代码)：
了解更多？你可以看看其他人跟flutter有关的Actions，也可以看看阮一峰的GitHub Actions 入门教程
原文来自：Flutter Web — Github Actions-Github Pages ，有删减
SEO关键词测试：flutter web 教程 、flutter 网页、flutter web app、flutter web 开发