サマリ
NetlifyでWebページを公開し、
さらに内容の変更をgit pushして、それが反映されるところまで確認しました。
背景
過去の自分の記事で、GitHubPagesでWebページ公開をしたという内容を書きました。
ただ、GitHubPagesは1アカウントで1サイト分しか公開できず、
将来的にいくつかWebサービス公開するという夢を勝手に見ている身としては、
複数公開したいなぁ～（無料で）と思っていたら、
なんと無料で複数サイト公開できるNetlifyというサービスがあるとのこと！
それは試すしかない、ということでやってみました。
またCIやCDって言葉聞いてはいたんですが、
Netlifyで体感できる（？）ということだったので、併せてやってみました。
ゴール
- NetlifyでWebページを公開
- git pushして、それがNetlifyの公開済みサイトに反映されることを確認
対象読者
- Webページを無料で公開したい方
- Netlifyに興味がある方
前提
必須：インターネット環境
推奨：公開するWebページ（HTMLファイルなど）の用意
環境
- OS：Window11 Home 24H2
実際にやってみる
そもそも（Netlifyとは）
無料で静的サイト（ざっくり、訪問者や時間に関わらず常に同じ内容が表示される、事前に作られたファイルで構成されるウェブサイト）を公開できるサービスです。
公式ページは以下です。
Netlifyの概要は以下が感覚つかみやすかったです。
他の似たサービスとの比較はこちらがわかりやすかったです。
前準備編
それでは実際に進めていきます。
【前準備1】プロジェクト作成（公開したいWebページの準備）
今回は公開したいWebページを先に準備します。
ローカルPCの適当な場所に今回のプロジェクト用のフォルダを作成します。
ポートフォリオサイト用のフォルダを作成しました。
そのフォルダにアップしたいファイル（HTMLやCSSやJavaScript、などなど…）を作成します。
【前準備2】GitHubにリポジトリ作成
前項で必要なファイルの用意が出来たら、
そのプロジェクトフォルダに移動し（自分の場合はsanbay3_portfolio）
git initコマンドを実行し、Gitの管理対象にします。
git add .、git commit -m "メッセージ"などで、作成済みのファイルをローカルリポジトリに更新しておきます。
その上でGitHubにサインインし、ローカルと紐づける用の新たなリポジトリを作成します。
（具体的な手順は割愛します）
↑作成した状態
紐づけるために、プロジェクトフォルダにて以下のコマンドを実行します。（https以降は実際に入れるURLに合わせていただければと思います）
とりあえずGitHubにプッシュできました！
（ここまででGit関連で単語・言葉の使い方に不正確なところがあったらすみません・・）
今回初めて知ったのですが、最初のpush時に-uオプションを付けると、
今後いちいちgit push origin mainと打たなくても、
git pushだけでプッシュできるんですね～勉強になりました。
ここまでの流れは下記の記事を参考にしていただければわかりやすいかと思います。
Netlifyのアカウント作成～公開
いよいよNetlifyを使っていきます。
公式ページにアクセスします。
右上Sign Upをクリック
Sign UP with GitHubをクリック
Authorize netlifyをクリック
必要な情報を入力します。
今回はGitHubを選択します。
別ウィンドウが開きます。
公開するリポジトリだけでいいのかと思い、下の方を選択し、今回公開するリポジトリを選択しました。
Installをクリックしたら、以下の画面に戻りました。
Let's deploy your projectと出てくるので、そのまま進めます。（わくわく
デプロイ処理が進みます。
Open Production Deployをクリックすると・・
デプロイしたWebページが閲覧できました～！
（今後は今回作成されたURLにアクセスすることでいつでもサイト閲覧が可能です）
こ、これがデプロイか～！（漠然
実際に公開したWebページはこちら
git pushでの自動反映
少しだけ文言を変えて、git pushしたら・・
少し時間がたったのち、
本番環境にもそのまま反映されました。
これがCI/CDか～（よくわかっていない
結果
無事、Webページが公開でき、さらにgit pushで変更も自動で反映されることも確認できました。
まとめ
一足飛び感がありまだ理解しきれていないのが正直なところですが、
学習してから実践だと今までと変わらないと痛感しているので、
実践してから学習というスタンスで許してください（誰への許可
また使っていく中で気になる点があれば更新したいと思います。
動的なコンテンツはVercel等もあるようなので、将来的にはトライしてみたいと思います。