概要
こちらの記事の制作日は2022年04月11日です。
Blazor Wasmで制作したアプリケーションをGithubPagesに登録する手順を紹介します。
※Blazor ServerはGithubPageには登録できません。
環境
- .Net6
- VisualStudio2022
- C#10
- Blazor Wasm
前提
- Githubのアカウントを所有していること
- ローカル環境でGitを使用できること
- TortoiseGitをインストール済みであること
※TortoiseGitのダウンロードはこちらのページを参考にしてください。
全部で5ステップです！まったり設定していきましょう！
Step1、Githubにリポジトリを作成する。
ページを公開するためのリポジトリを作成します。
こちらのページからリポジトリを作成できます。
サイトにアクセスしたら下記画像の画面になりますのでRepository nameにリポジトリ名を入れてリポジトリを作成します。
- リポジトリ名はサイトへのアクセスURLになります。
- 無料アカウントでの利用はリポジトリをPublicにする必要があります。
Step2、gh-pagesブランチを作成する。
GithubPagesに登録する用のブランチを作成します。Githubではgh-pagesという名前のブランチをGithubPagesの表示データと認識します。(設定でmainブランチをGithubPagesの表示データと認識させることも可能です。)
下記画像の手順でgh-pagesブランチを作成します。
Step3、リポジトリをローカルにクローンする。
Github上に作成したリポジトリをローカルにクローンします。ここではTortoiseGitを使用した方法を記載します。
まず、作成したリポジトリのURLを下記画像の手順で取得します。
次に、ローカル上でクローンをしたいフォルダをエクスプローラで開き右クリックします。
今回、私はC:\Project\HomePageにクローンすることにします。
開いたTortoiseGitのクローンウィンドウを下記画像の手順で実行します。
これでクローンの作成が完了しました。
ブランチをgh-pagesに切り替えておきます。
ローカルリポジトリを右クリック→TortoiseGit→切り替え/チェックアウトをクリックします。
gh-pagesブランチを選択してOKを押します。
これで現在のブランチをgh-pagesに変更できました！
Step4、公開するデータを作成する。
GithubPageに公開したいBlazorWasmのプロジェクトをVisualStudio2022で開いてNugetからPublishSPAforGitHubPages.Buildをインストールします。
※今回のプロジェクト例はHelloWorld(初期状態)です。
次に.csproj内のPropertyGroupに<GHPages>true</GHPages>を追加します。
<PropertyGroup>
<GHPages>true</GHPages>
</PropertyGroup>
index.htmlのBaseタグをリポジトリ名に変更します。(相対パスをリポジトリ名からにするためです。設定しないとCSS等の相対パスで指定しているURLが読み込まれません。)
5月5日追記
index.htmlのBASEタグ内はライブラリによって自動書き換えしてくれるので手作業での修正は不要です。
↓下記の画像は実施しなくて大丈夫です。
プロジェクトの発行ページを開きます。ビルド→〇〇の発行をクリックします。
プロジェクトを発行するフォルダを選択します。
発行ボタンを押してプロジェクトを発行します。
Step5、GitHubにページをプッシュする。
Step4で発行したフォルダ内にあるwwwrootフォルダ内の全てのデータをローカルリポジトリにコピーします。
ローカルリポジトリを右クリックしてコミット＆プッシュします。
アクセスできるか確認する。
アクセスURLはhttps://ユーザー名.github.io/リポジトリ名/となります。
今回の例で作成したページは下記URLになっています。
https://rikuyamaguchi.github.io/HomePage/
おわりに
Githubにプッシュする度にGithub上で自動的にビルドして公開(デプロイ)してくれる方法もあります！参考記事をご確認頂ければわかるかと思いますので是非チェックしてみてください！
参考記事