【C#】Blazor WasmをGithubPagesで公開する方法【Blazor Wasm】

# 概要
こちらの記事の制作日は2022年04月11日です。
Blazor Wasmで制作したアプリケーションをGithubPagesに登録する手順を紹介します。
※Blazor ServerはGithubPageには登録できません。

# 環境
- .Net6
- VisualStudio2022
- C#10
- Blazor Wasm

# 前提
- Githubのアカウントを所有していること
- ローカル環境でGitを使用できること
- TortoiseGitをインストール済みであること
※TortoiseGitのダウンロードはこちらのページを参考にしてください。

https://my-web-note.com/tortoisegit-install-and-setup/

### 全部で`5ステップ`です！まったり設定していきましょう！

# Step1、Githubにリポジトリを作成する。

ページを公開するためのリポジトリを作成します。

こちらのページからリポジトリを作成できます。

https://github.com/new

サイトにアクセスしたら下記画像の画面になりますので`Repository name`にリポジトリ名を入れてリポジトリを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/77c0db1a-3ef0-044b-d27f-b1bf1b192143.png)

::: note warn
1. リポジトリ名はサイトへのアクセスURLになります。
1. 無料アカウントでの利用はリポジトリをPublicにする必要があります。
:::

# Step2、gh-pagesブランチを作成する。
GithubPagesに登録する用のブランチを作成します。Githubでは`gh-pages`という名前のブランチをGithubPagesの表示データと認識します。(設定でmainブランチをGithubPagesの表示データと認識させることも可能です。)
下記画像の手順で`gh-pages`ブランチを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/d6c751a3-fdbd-da61-5152-369649f13030.png)

# Step3、リポジトリをローカルにクローンする。

Github上に作成したリポジトリをローカルにクローンします。ここでは`TortoiseGit`を使用した方法を記載します。

まず、作成したリポジトリのURLを下記画像の手順で取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/7bf56162-3a50-c9ab-896f-89f6aeb22757.png)

次に、ローカル上でクローンをしたいフォルダをエクスプローラで開き右クリックします。
今回、私は`C:\Project\HomePage`にクローンすることにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/75f6524a-2c70-4f0a-59f6-97c6d14a561e.png)

開いた`TortoiseGit`のクローンウィンドウを下記画像の手順で実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/2befb4e9-6f94-2098-876c-50e2e6538ff3.png)

これでクローンの作成が完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/07ed9f09-a55b-7822-8583-3883b351d0ba.png)

ブランチを`gh-pages`に切り替えておきます。
ローカルリポジトリを右クリック→TortoiseGit→切り替え/チェックアウトをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/4846cabd-84e4-060f-13b5-f69047af2b86.png)

`gh-pages`ブランチを選択してOKを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/773e2a17-2da5-b587-860d-863075b453b6.png)

これで現在のブランチを`gh-pages`に変更できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/ad9ad2ec-2cae-3e33-e275-7a09f8f11843.png)

# Step4、公開するデータを作成する。

GithubPageに公開したいBlazorWasmのプロジェクトをVisualStudio2022で開いて`Nuget`から`PublishSPAforGitHubPages.Build`をインストールします。
※今回のプロジェクト例はHelloWorld(初期状態)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/daf774c5-b372-401e-bf81-6f6f1c982e2d.png)

次に`.csproj`内の`PropertyGroup`に`<GHPages>true</GHPages>`を追加します。

```C#
<PropertyGroup>
  <GHPages>true</GHPages>
</PropertyGroup>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/98c8a276-37d9-6356-5784-a2eac5ea5ba8.png)

~~`index.html`のBaseタグをリポジトリ名に変更します。(相対パスをリポジトリ名からにするためです。設定しないとCSS等の相対パスで指定しているURLが読み込まれません。)~~

`5月5日追記`
**index.htmlのBASEタグ内はライブラリによって自動書き換えしてくれるので手作業での修正は不要です。**
↓下記の画像は実施しなくて大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/aea26920-9160-fb00-ac0e-8322ffb66732.png)


プロジェクトの発行ページを開きます。ビルド→〇〇の発行をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/cfcfc5f2-8104-9845-348a-10e7419a452b.png)

プロジェクトを発行するフォルダを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/e788fd5e-8ed3-4f1b-d312-15e2093d8902.png)

発行ボタンを押してプロジェクトを発行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/a62d408e-db02-fa22-ec86-20d3a2919c86.png)

# Step5、GitHubにページをプッシュする。
`Step4`で発行したフォルダ内にある`wwwroot`フォルダ内の全てのデータをローカルリポジトリにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/69fc47fa-22f2-588d-ad24-b17597b3fa7b.png)

ローカルリポジトリを右クリックしてコミット＆プッシュします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519245/f97babc4-df0b-5a37-b5bf-669d80d594d7.png)

# アクセスできるか確認する。
アクセスURLは`https://ユーザー名.github.io/リポジトリ名/`となります。
今回の例で作成したページは下記URLになっています。
https://rikuyamaguchi.github.io/HomePage/

# おわりに
Githubにプッシュする度にGithub上で自動的にビルドして公開(デプロイ)してくれる方法もあります！参考記事をご確認頂ければわかるかと思いますので是非チェックしてみてください！

# 参考記事
https://qiita.com/jsakamoto/items/0be0005d9b30acbfe1e4

https://zenn.dev/takunology/scraps/d32c5fd0b0f2b4