概要
ほぼタイトルの通りである。
Flutterで静的なwebページを作成して、自分のポートフォリオページとして使用することが多い<username>.github.io にデプロイすることが目的です。
Flutter Web
Flutter Web についてはこれらで、環境構築してください。
https://flutter.dev/web
https://flutter.dev/docs/get-started/web
とりあえず、Flutter Webが作成できる環境で、Flutterのプロジェクトを作成する。
$ flutter create portfolio
GitHub Actions
以下のモジュールを使用していく。
Github Actionsで Flutter環境を作成するためのモジュール
flutter build web でビルドされたwebディレクトリを<username>.github.ioリポジトリにデプロイするために使用するモジュール
この2つのモジュールを使用すると爆速でできます。
とりあえず、ワークフローファイルを記載します。
github/workflow/main.yml
name: CI
on:
push:
branches:
- source
jobs:
build:
name: Flutter build and deploy
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master
- name: Say start a build
run: echo flutter build web
- uses: subosito/flutter-action@v1
with:
channel: 'dev'
- name: Run a flutter build and deploy
run: |
flutter config --enable-web
flutter pub get
flutter build web
- name: Deploy
uses: peaceiris/actions-gh-pages@v2.5.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: master
PUBLISH_DIR: ./build/web
困ったこと
stableでFlutter Webの環境が使えない？
- Flutter Webが使用できる環境が、
stableになくてビルドできなかったのでdevを設定し解決しました。
<username>.github.io のルートURLが使えない？
-
<username>.github.ioディレクトリのmasterにビルドファイルを置かないとルートURLからページが設定できないっぽいので HugoのビルドをGithub Actionで自動化する にあるようにdevelopブランチのような別ブランチを作成し、そこにFlutterのブロジェクトを作成し解決した。
ちなみに
ちなみに、<username>.github.ioリポジトリ以外でgithub pagesにデプロイしたい場合は以下のようなワークフローです。
github/workflow/gh-pages.yml
name: github pages
on:
push:
branches:
- master
jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master
- name: setup flutter
uses: subosito/flutter-action@v1
with:
channel: 'dev'
- name: install
run: |
flutter config --enable-web
flutter pub get
- name: build
run: flutter build web
- name: deploy
uses: peaceiris/actions-gh-pages@v2.5.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./build/web