この記事の対象
・Githubでリポジトリを使って作業している
・VisualStudio2022を使用している
・Webサイトを作りたいがWeb系の言語を知らない
・C#なら知ってる
・楽にWebサイトを作りたい！
キッカケ
周りにサイトを自作する人がいたのとカッコイイポートフォリオサイトを作っているUnityエンジニアを見かけて憧れたため。
作ろう！
最終的に必要なものは、
・公開するWebサイト
・Azureのアカウント
です。
公開するWebサイトの作成
Blazor(ブレイザー)を使って作っていきましょう！Blazorのメリットとデメリットは以下の通りです。
メリット
・C#が使える。
デメリット
・サイトを開いたとき、ロードに時間がかかる
あれ、メリット薄くない...と思ったあなた！
この後使うAzureStaticWebAppsを使うことで公開までが爆速でできるようになります！
手順1 テンプレートを用いてリポジトリを作る
以下のサイトにアクセスして「Use this templete」をクリック。
これをクリックして表示される「create new repository」を選択、リポジトリ作成画面が表示されるのでリポジトリ名などを適当に記入。公開設定はどちらでも大丈夫ですので、privateにしておきましょう。
手順2 ローカル環境で実行してWebサイトを確認する
ここまででひとまずテンプレートを使ったリポジトリができました。この時点でWebサイトの原型はできているので自分のPCにクローンして動くか確認してみましょう。
クローンはCLIやSourceTree,Github Desktopでも可能ですが、今回はvisualStudioで開くので以下のようにVisualStudioで開くを選択するのが楽かもしれません(Codeを押して出てきた「Open with Visual Studio」を選択)。
クローンする画面が出てくるのでクローンを押しましょう。
その後以下のような画面になると思います。そうしたらビルドボタンを押しましょう！
するとあら不思議！もうWebサイトができてしまいました！
はい、これでひとまずサイトの作成は完了です。あとはここから自身で好きなようにテンプレートサイトをいじることで思いのままにしてみましょう！
以下はテンプレートを改造した私のサイトです。サイドバーにアクセスできるページを追加したり背景を差し替えたりしてみました。サイトの表示を変える場合はHTMLやCSSを触る必要があるのでChatGPTに聞きながら作成してみましょう。興味があれば、HTMLやCSSを学習するのもいいかもしれません。
手順3 AzureStaticWebAppsを利用してデプロイ(公開)する
ここからは作成したWebサイトを公開してみましょう。まずは以下のサイトにアクセスしてログイン/サインアップしましょう。
静的Webアプリの設定前にサブスクリプションを設定する必要があります。設定は以下を参照。
リソースの作成から静的Webアプリを選択。作成を押す。
基本タブから先ほど作成したサブスクリプションを選択。名前を入れて、ホスティングプランにはFreeを選択。
自身のGithubアカウントを選択し、先ほど作成したリポジトリを選択。自動でブランチやビルドの詳細などは入力されます。
「確認及び作成」を押した後に「作成」を押すことで後は自動的にデプロイしてくれます。
その後表示される画面でブラウザーにアプリを表示を押すことで実際に公開されているサイトを見ることができるようになります。
完了！
やった後気づいたこと
自分の思う通りの表示をするのにHTMLやCSSをいじる必要があった。しかも思い通りにするのは結構大変。
そんな中最初に挙げた憧れてた人のサイトを参考にするために見にいったらこのような文言が。
さらに調べた感じWordPress×お名前ドットコムが手軽にサイトを作るには良さそうだと分かりました。
次回はWordPress×お名前ドットコムで作ってみようと思います。