🔧

GitHub Pagesで静的サイトをデプロイする

2024/06/17に公開

✒ はじめに

皆様こんにちは。JS勉強中のAK666です。
今回はGitHub Pageで静的サイトをデプロイしてみたいと思います。
皆様のお役に立てたらうれしいです。


✒ GitHub Pagesとは

以下、公式Document引用。

GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。 GitHub Pages サイトの例は、GitHub Pages サンプル コレクションで確認できます

GitHubのリポジトリ管理ページから、簡単に静的サイトをホスティングできるサービスのようです。

■参考資料

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages


✒ デプロイ前の事前準備

  • GitHubアカウント
  • デプロイしたいWebプロジェクトのリポジトリ

■参考資料

https://zenn.dev/hidaka/articles/compare-github-plans


✒ GitHub Pagesで静的サイトをホスティングしてみる

いよいよ、GitHub Pagesでサイトをデプロイしてみようと思います。
以下、今回デプロイするサイトです。

input項目にテキストを入力し、生成ボタンを押下すると、文字化けした文字が出力されるサイトです。


Step1.GitHubでデプロイしたいプロジェクトのリポジトリを開く


Step2.「Setting」を押下


Step3.「Pages」を押下


Step4. Branchを「main」に変更


Step5. 「Save」を押下


Step6. 生成されたURLに飛ぶ


最終Step. デプロイされたサイトを確認


✒ コミット&プッシュ後に変更がデプロイされたサイトに反映されるかチェック

修正した内容をコミット&プッシュ


GitHubを確認

※ビルド中のマーク


修正した内容が反映(デプロイ成功)


✒ まとめ

今回はGitHub Pagesを使ってサイトをデプロイしてみました。
こんなに簡単にデプロイできるとは思いませんでした(笑)
GitHubさいこー!!


✒ 今回デプロイしたサイト

https://ak-dev-github.github.io/proj-txet-change/

Discussion