flutter

flutter webで作ったサイトをgithub pagesに自動でデプロイする

2020/04/19

Introduce

今回はflutter webで作ったサイトをgithub pagesに公開します.buildはgithub actionsを使ってdevopsを実現します.

flutter for webでランディングページを動かしてみた | monkey404
Introduction ども.最近flutter触り始めました.flutter for webがプレビューリリースされたのでサンプルを動かします.サンプルはflutterの公式リポジトリからではなく,flutter for webでランディングページを作っている方がいるのでそれをcloneしました. Requires MacOS

Enviroment

  • MacOS Catalina 10.15.1
  • flutter --version
    Flutter 1.15.4-pre.240 • channel master • https://github.com/flutter/flutter.git
    Framework • revision 32b17974ea (28 hours ago) • 2020-02-29 06:41:00 -0500
    Engine • revision 755e2b559d
    Tools • Dart 2.8.0 (build 2.8.0-dev.10.0 09bbd3cca5)
  • Visual Studio Code

Usage

ソースコードはこちらに置いています.

monkeydaichan/asigar-lp
Contribute to monkeydaichan/asigar-lp development by creating an account on GitHub.

Structure

VScodeで開発 -> master BranchにPush -> github actionsがbuild -> gh-pages branchにデプロイ -> github pagesで公開される.

Settings of github

Create key for devops

Deploy用のkeyを事前に準備します.

できたキーファイルをリポジトリ -> settings のDeploy KeysとSecretsに登録します.
deployファイルがSecretsで,deploy.pubをDeploy Keyに作成してください.keyの名前はどちらもACTIONS_DEPLOY_KEYにします.


Create branch for github pages

対象リポジトリ -> Settings の下の方に github pagesのセクションがあります.
github pagesとして公開するbranchをgh-pagesbranchにします.

Settings of github actions

対象リポジトリに.github/workflow/main.ymlを作成します.

これで準備が出来ました.masterブランチにデプロイしましょう.
初回はサイトが表示されるまでに1時間ほどかかりました.

サイトのURLは http://<githubのユーザ名>.github.io/<リポジトリ名>です.
今回の場合は http://monkeydaichan.github.io/asigar-lp になります.

以上です!

-flutter
-, ,

Translate »