はじめに
どうも、最近WEB技術に興味が旺盛な猫背なエンジニアです。
本日は新幹線の中から記事を投稿しています。作業がしずらい（笑）
今回はGitHub Pagesを用いてWebサイトの公開練習をしたので記録します。
GitHub Pages？
■ 概要
GitHubが提供している静的Webサイト専用のホスティングサービスで、
HTML/CSS/JavaScriptでHPを作ることができます。
また、サーバー契約・設定は不要、もちろんサーバ代無料で公開までできる優れものです。
GitHub Pagesは基本的にポートフォリオサイト、技術ブログ、ランディングページなど、
「静的に表示できる Web ページ」全般ができます。
また、GitHub公式が認めてない行為はだめだが、商用利用も一部可能という記事も見たことがあるので、
本格的なサイト作成の練習にもできる。
■ 制約について
GitHub PagesのURLルールとして、https:/ユーザー名.github.io/「github.io」という形の制約があります。
また、GitHub Pagesは静的サイト専用なので、PHP/Python/Node.js, データベース接続, サーバー側での処理。
ただし、JavaScriptでの動的表示、API（外部サービス）との通信は可能です。
NECOZEのGitHub Pages
⬛︎ ホームページの構成
📦 n-necoze.github.io
├─ .github/
│ └─ workflows/
│ └─ deploy.yml
├─ index.html
├─ style.css
├─ assets/
│ ├─ images/
│ └─ icons/
└─ README.md
■ 主要ファイル
〇 index.html
トップページ本体。ヘッダー＋コンテンツ＋フッターなどを記述。
〇 style.css
全体のデザイン用 CSS。
〇 assets/
画像・アイコン・外部スクリプトなどの静的アセット。
※ ファイル名や構成はプロジェクトによって自由ですが、index.htmlがルートにあることがGitHub Pagesでは重要 (エントリポイントとして使われるためらしい)。
⬛︎ GitHub Actionsでの自動デプロイ
GitHub Pagesは静的ファイル公開だけなら手動Pushでも十分です。
ですが、以下のメリットがあるためActionsで自動化しています：
〇 リポジトリに Push するだけでページが更新される
〇 ビルドが必要な静的サイトジェネレーターにも対応可能
〇 更新時の手間・ミスを減らせる
GitHub ActionsによるPages自動デプロイは YAML1つで実現できます。
⬛︎ GitHub Actions の仕組み
GitHub Actions は CI/CD ツールで、特定イベント時に workflows（ワークフロー）を自動実行します。
たとえば main ブランチに Push されたら自動でデプロイする、という流れです。
GitHub Pagesのデプロイワークフローには次の流れが一般的です：
1. Push をトリガーに起動
2. リポジトリをチェックアウト
3. （必要なら）静的サイトをビルド
4. 出力ファイルを Pages にデプロイ
この一連の動作を YAML ファイルに書きます。
⬛︎ 実際の workflow 例
以下は、静的ファイルを GitHub Pages に自動デプロイする最小の例です
name: Deploy NECOZE PORTAL
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# リポジトリの内容を取得
- uses: actions/checkout@v4
# (必要なら) ビルド処理をここに追加
# デプロイ処理
- name: Upload Pages Artifacts
uses: actions/upload-pages-artifact@v1
with:
path: './'
- name: Deploy to GitHub Pages
uses: actions/deploy-pages@v1
〇 actions/checkout@v4
→ リポジトリのコードを取得します。
〇 actions/upload-pages-artifact@v1
→ デプロイ対象となる静的ファイルを一旦アーティファクトとして準備。
〇 actions/deploy-pages@v1
→ GitHub Pages にアップロードします。
⬛︎ 更新の流れ
1. 変更したファイルをコミット
2. main ブランチにプッシュ
3. GitHub Actions が自動実行
4. 成功すると GitHub Pages に反映
Deploy の進行状況やログは Actionsタブから確認できます。
おわりに
〇 手動操作不要でデプロイが完結
〇 CI/CD スタイルで安全・確実
〇 Github 上のファイル更新だけで Web サイト公開
今回作成したものを以下に添付いたします。今後も更新していきたいと思います！