この記事の対象

・Githubでリポジトリを使って作業している
・VisualStudio2022を使用している
・Webサイトを作りたいがWeb系の言語を知らない
・C#なら知ってる
・楽にWebサイトを作りたい！

キッカケ

周りにサイトを自作する人がいたのとカッコイイポートフォリオサイトを作っているUnityエンジニアを見かけて憧れたため。

最終的に必要なものは、
・公開するWebサイト
・Azureのアカウント
です。

Blazor(ブレイザー)を使って作っていきましょう！Blazorのメリットとデメリットは以下の通りです。

メリット
・C#が使える。
デメリット
・サイトを開いたとき、ロードに時間がかかる

あれ、メリット薄くない...と思ったあなた！
この後使うAzureStaticWebAppsを使うことで公開までが爆速でできるようになります！

以下のサイトにアクセスして「Use this templete」をクリック。

これをクリックして表示される「create new repository」を選択、リポジトリ作成画面が表示されるのでリポジトリ名などを適当に記入。公開設定はどちらでも大丈夫ですので、privateにしておきましょう。

するとあら不思議！もうWebサイトができてしまいました！

はい、これでひとまずサイトの作成は完了です。あとはここから自身で好きなようにテンプレートサイトをいじることで思いのままにしてみましょう！

以下はテンプレートを改造した私のサイトです。サイドバーにアクセスできるページを追加したり背景を差し替えたりしてみました。サイトの表示を変える場合はHTMLやCSSを触る必要があるのでChatGPTに聞きながら作成してみましょう。興味があれば、HTMLやCSSを学習するのもいいかもしれません。

ここからは作成したWebサイトを公開してみましょう。まずは以下のサイトにアクセスしてログイン/サインアップしましょう。

静的Webアプリの設定前にサブスクリプションを設定する必要があります。設定は以下を参照。

リソースの作成から静的Webアプリを選択。作成を押す。

基本タブから先ほど作成したサブスクリプションを選択。名前を入れて、ホスティングプランにはFreeを選択。

自身のGithubアカウントを選択し、先ほど作成したリポジトリを選択。自動でブランチやビルドの詳細などは入力されます。

「確認及び作成」を押した後に「作成」を押すことで後は自動的にデプロイしてくれます。
その後表示される画面でブラウザーにアプリを表示を押すことで実際に公開されているサイトを見ることができるようになります。

完了！

自分の思う通りの表示をするのにHTMLやCSSをいじる必要があった。しかも思い通りにするのは結構大変。
そんな中最初に挙げた憧れてた人のサイトを参考にするために見にいったらこのような文言が。

さらに調べた感じWordPress×お名前ドットコムが手軽にサイトを作るには良さそうだと分かりました。
次回はWordPress×お名前ドットコムで作ってみようと思います。