#下準備
##まずは最新版にする。
なにせflutter_webは正式サポートではないので、最新でないと動くかどうかもわからない。devのほうがよいというタイミングすらあります。
flutter channel master
flutter upgrade
##web機能を有効化します
flutter config --enable-web
##flutterプロジェクトのテンプレ状態を作成します。
自分で作成したプロジェクトディレクトリに移動して、flutterプロジェクトのテンプレ状態を作成します。
現在、動作テストできる環境はchromeのみです
※注:すでに存在するiOSやAndoroid用のプロジェクトをwebで使おうとする場合には、それ用のマニュアルがあるそうなので、そちらを参照してください。
cd <あなたのプロジェクトディレクトリ>
flutter create .
##デフォルトの画面がchrome上に出てくるはずです
flutter run -d chrome
##web用のビルドを行います
flutter build web
##ビルド結果はこの位置にできます
プロジェクトフォルダの直下にbuildその中にwebができているはずです。
#Githubにデプロイ
##ログインしてレポジトリ作成
https://github.com/
にログインしてレポジトリを作成します。このとき、username.github.io の用になるようにしてください。
GitHub Pagesについての細かい話は公式を参照ください。https://pages.github.com/
##web公開するものを配置するディレクトリを作る
空っぽで構いません。とりあえずローカルにディレクトリを作ります。
ディレクトリを作成したら、そのディレクトリにデプロイ先をクローンします。
多分なにもないか、README.MDがあるかくらいだと思います。
cd <web公開するものを配置するディレクトリ>
git clone https://github.com/ClozedJP/ClozedJP.github.io.git
##クローンしたレポジトリのフォルダ内に公開したい内容を配置
buildフォルダ内のwebのフォルダごと投入します。
このときにwebのフォルダの名前を自分のプロジェクトの名前などに変更しておくと後でわかりやすいかもしれませんね
##配置した内容をpushする
配置した内容をGithub側にプッシュします。
※注:Github Desktopなどでpushする人もいると思いますので、その場合はGithub Desktopでpushしてください。
git add --all
git commit -m "Initial commit"
git push -u origin master
##Github側の状態を確認する
私がデプロイした先はこんな感じになります。
デプロイしたWeb App のURLは
https://username.github.io/フォルダ名
私の作成したappの動作状態はこちら。みなさんのURLも似たような形になると思います。
https://clozedjp.github.io/adventure/