作る

GitHub Pagesで無料公開する方法

作ったファイルは、自分のPCの中だけだと友達に送れません。GitHub Pages は、そのファイルを世界のURLにする無料の棚です。

そもそもGitHub Pagesとは?

GitHub Pagesは、GitHub(コードを保管するクラウドサービス)の一機能で、リポジトリ(フォルダ)に置いたHTMLファイルをそのままWebサイトとして公開できます。静的サイトなら無料で使いやすく、広告も入りません。「username.github.io」というURLが付与され、独自ドメインの設定もできます。世界中のエンジニアがポートフォリオやドキュメントを公開する場所として使っています。

公開までの全体像

公開までの累積時間(合計約30分) バー幅=各ステップの目安時間に比例/★=難易度(5段階)/PCがある前提 ①アカウント ②リポジトリ ③ファイル準備 ④Pages 5分 7分 15分 3分 ★ ★ ★★★ ★★ 0分 15分 30分 github.com メール認証 2段階認証 名前を username. github.io index.htmlを アップロード Commit Settings →Pages main選択 GitHub猫 Octocat ※公開後、URL(username.github.io)が世界中からアクセス可能に ※2025年現在、無料・無広告。トラフィック制限あり(月100GB目安)
図1:合計約30分。一番時間がかかるのはファイル準備(HTML作成)

① GitHubアカウントを作る

github.com にアクセスして、メールアドレスとパスワードで無料アカウントを作ります。13歳以上が利用可能(13歳未満は保護者同意が必要)。ユーザー名はそのまま公開URLに使われるので、本名フルネームではなくニックネームがおすすめです。

② リポジトリを作る

「New repository」ボタンから新しいリポジトリ(フォルダのようなもの)を作ります。リポジトリ名を「username.github.io」にすると、特別なURL(https://username.github.io/)が付与されます。それ以外の名前でも公開できますが、URLは少し長くなります(https://username.github.io/repo-name/)。

③ index.htmlをアップロード

リポジトリの「Add file」→「Upload files」から、自分のindex.htmlとCSSファイルをドラッグして保存(コミット)します。コマンド操作が分かる人はgit pushでも同じことができます。

④ Pages設定を有効化

Settings → Pages タブで、公開元のブランチ(mainなど)を選んで保存。1〜2分待つと、URLにアクセスして自分のサイトが表示されます。これで世界中の誰でも見られる状態です。

公開後に表示されないときは、まず `index.html` の名前、リポジトリ名、Pagesの公開元ブランチを確認します。GitHub Pagesはファイル名の大文字小文字を区別するため、`Image.png` と `image.png` の違いでも画像が出ないことがあります。更新直後は反映に少し時間がかかることもあります。

本名、学校名、住所、顔写真などを公開する前には、必ず保護者や先生に相談しましょう。GitHub Pagesは練習に便利ですが、公開したページは検索やSNS経由で広がる可能性があります。最初は架空のプロフィールや作品紹介だけで練習するのが安全です。

GitHub Pagesでできること・できないこと

GitHub Pages:実機能と制限値(公式ドキュメント概算) 緑バー=できる量・赤バー=制限値/2025年公開情報・要最新確認 公開料金 無料(広告なし) SSL(HTTPS) 自動・無料 独自ドメイン 設定可(自分でドメイン購入) リポジトリ容量 1GBまで(推奨) 月間転送量 100GB/月(ソフト制限) ビルド回数 10回/時間まで PHP・Node実行 不可(静的のみ) データベース 不可(外部API連携で代替) できる できない ※動的処理が必要なら Vercel・Netlify・Cloudflare Pages を検討(同じく無料枠あり) ※Privateリポジトリで使うには有料プラン(GitHub Pro等)が必要
図2:静的サイトは全てOK・サーバー処理は全てNG。練習用なら制限内に収まる

気をつけたい落とし穴

GitHub Pages運用での3つの注意
  • リポジトリは「Public(公開)」にしないとPages機能が無料では使えない(コードも見られる)。Privateで使うには有料プラン必要
  • パスワード・APIキー・個人情報をコードに書いてpushしない。公開リポジトリだと全世界に見られる
  • ファイル名の大文字小文字に注意。自分のPCでは動いてもGitHubでは404になることがある

将来どう役立つ?

GitHubの操作は、ITエンジニアの世界で「読み書きそろばん」レベルの基礎スキルです。GitHub Pagesでサイトを公開する経験は、そのままGitとGitHubの使い方の入門にもなり、将来のチーム開発や就活にも直結します。「自分のGitHubアカウント」は、エンジニアの世界では履歴書以上に見られる場所です。

作品を公開すると、コードを書く力だけでなく、説明文を書く力、更新履歴を残す力、リンク切れを直す力も育ちます。将来ポートフォリオを作るとき、完成品のURLとGitHubのリポジトリを並べて見せられると、作ったものを実際に動かして確認してもらえます。

今日からできること

今日の課題:URLを1つ作る
  1. 保護者とGitHubアカウントの年齢条件を確認する
  2. index.html をリポジトリに置く
  3. Pages を有効にして、出たURLをノートに書く

まとめ

GitHub Pagesは、HTML・CSS・JavaScriptで作ったサイトを無料で公開できる定番サービスです。アカウント作成からURL公開まで、慣れれば10分でできます。動的処理ができないなどの制約はありますが、ポートフォリオ・ブログ・部活サイトの公開先として子どもに最適。「自分のサイトを世界に出した」体験は、その後の学習スピードを大きく変えます。

確認 GitHub Pages の役割は?