GitHub Pagesで無料公開する方法【初心者向け】

GitHub Pages とは？

「作ったページをネットに公開したい」「サーバー代がかかりそう…」——そんな悩みを解決します。実は完全無料でウェブページを公開する方法があります。

GitHub Pages（ギットハブ ページズ）は、GitHubが提供する無料のウェブサイト公開サービスです。HTMLファイルをアップロードするだけで、インターネット上に公開できます。サーバーの契約やドメインの購入は不要です。

この記事では、GitHub Pages の使い方を初心者向けにステップごとにわかりやすく解説します。プログラミング初心者でも10分で自分のページを公開できます。

準備するもの

• GitHubのアカウント（無料で作れます）
• 公開したいHTMLファイル（index.html）
• パソコンとブラウザ

GitHubのアカウントは https://github.com から無料で作れます。メールアドレスがあれば登録できます。ユーザー名は公開URLの一部になるので、覚えやすい名前にしましょう（例：tanaka-taro）。

まだHTMLファイルを作っていない場合は、最初のHTMLページを作るを参考に簡単なページを作ってみましょう。

📖 詳しくはHTMLレッスン1で解説しています。

STEP 1：リポジトリを作る

リポジトリ（repository）とは、ファイルを保存する「フォルダ」のようなものです。GitHubではプロジェクトごとにリポジトリを作って管理します。

1. GitHubにログインする
2. 右上の「+」ボタン → 「New repository」をクリック
3. Repository name（リポジトリ名）を入力する（例：my-portfolio）
4. 「Public」を選ぶ（公開設定。Privateだと GitHub Pages が使えません）
5. 「Create repository」ボタンをクリック

リポジトリ名はURLの一部になるので、英数字とハイフンで短くわかりやすい名前にしましょう。日本語は使えません。

👉 実践チャレンジも参考にしてください。

STEP 2：HTMLファイルをアップロードする

1. 作成したリポジトリのページを開く
2. 「uploading an existing file」リンクをクリック
3. 公開したい index.html をドラッグ＆ドロップ
4. ページ下部の「Commit changes」ボタンをクリック

🔥 問題ドリルで実践してみましょう。

STEP 3：GitHub Pagesを有効にする

1. リポジトリの「Settings」タブをクリック
2. 左メニューの「Pages」をクリック
3. 「Branch」のドロップダウンで「main」を選ぶ
4. 「Save」ボタンをクリック
5. 数分待つと、ページ上部に公開URLが表示される

公開URLは https://ユーザー名.github.io/リポジトリ名/ の形式になります。このURLを友達に共有すれば、誰でもあなたのページを見られます。

反映には通常1〜3分かかります。「Actions」タブでデプロイの進行状況を確認できます。緑のチェックマークが表示されたら公開完了です。

ファイルを更新するには

ページの内容を更新したいときは、リポジトリに新しいファイルをアップロードするだけです。

1. リポジトリのページを開く
2. 更新したいファイルをクリック
3. 鉛筆アイコン（Edit）をクリックして編集、または新しいファイルをアップロード
4. 「Commit changes」をクリック
5. 数分後に反映される

複数のファイルを一度に更新したい場合は、「Add file」→「Upload files」から複数ファイルをまとめてドラッグ＆ドロップできます。CSSファイルや画像ファイルも同じ方法でアップロードしましょう。

よくある質問

Q. 公開したページが表示されない

GitHub Pagesの反映には数分かかることがあります。少し待ってからブラウザを更新してみてください。

Q. CSSや画像が反映されない

CSSファイルや画像ファイルも同じリポジトリにアップロードする必要があります。HTMLファイルからの相対パスが正しいか確認してください。たとえば、CSSファイルが css/style.css にある場合、HTMLでは <link rel="stylesheet" href="css/style.css"> と書きます。パスの先頭に / をつけると、リポジトリのルートからの絶対パスになるので注意しましょう。

Q. 独自ドメインは使える？

はい、使えます。Settings → Pages の「Custom domain」に自分のドメインを入力すると設定できます。ドメインは別途購入が必要です。

カスタムドメインの設定

独自ドメインを使う場合の手順：

1. リポジトリのルートに CNAME ファイルを作成し、ドメイン名を記入
2. ドメインのDNS設定でCNAMEレコードを ユーザー名.github.io に向ける
3. Settings → Pages で「Enforce HTTPS」にチェック

HTTPSは自動で有効化されます。

トラブルシューティング

404エラーが出る

index.html がリポジトリのルートにあるか確認してください。

更新が反映されない

デプロイには数分かかります。ブラウザのキャッシュをクリアして再読み込みしましょう。

CSSや画像が表示されない

ファイルパスが正しいか確認しましょう。パスの書き方を参考にしてください。

活用アイデア

• ポートフォリオサイト — ポートフォリオの作り方
• 自由研究の発表ページ — 夏休みにホームページを作る
• 文化祭サイト — クラスや部活の紹介ページを公開

📖 最初のHTMLページを作るで公開するページの作り方を学べます。

🔗 GitHub Pagesデプロイ手順・VS Codeのインストールも参考にしてください。

まとめ

GitHub Pagesを使えば、自分で作ったポートフォリオや作品を世界中に公開できます。まずはHTMLを学んで、公開するページを作ってみましょう。友達に「自分のサイトだよ」とURLを共有できるのは、プログラミング学習の大きなモチベーションになります。

GitHub Pagesの制限と注意点

• 静的サイトのみ：HTML・CSS・JavaScriptのみ対応。PHPやデータベースは使えません。ただし、フロントエンドの学習には十分です。
• 容量制限：リポジトリのサイズは1GB以下が推奨。大きな動画ファイルはYouTubeに置いてiframeで埋め込みましょう。
• 公開設定：無料プランではPublicリポジトリのみGitHub Pagesが使えます。コードが公開されることを意識しましょう。
• 反映時間：ファイルを更新してから反映されるまで1〜5分かかることがあります。すぐに反映されなくても焦らず待ちましょう。

これらの制限はありますが、ポートフォリオサイトや学習成果の公開には十分すぎる機能です。無料でHTTPS対応のサイトが持てるのは大きなメリットです。プログラミング学習の成果を公開する場所として、GitHub Pagesは最適な選択肢です。作品を公開することで、学習のモチベーションが上がり、ポートフォリオとしても活用できます。まずは簡単な自己紹介ページから公開してみましょう。「自分のサイトがインターネットに公開されている」という体験は、プログラミング学習の大きなモチベーションになります。さあ、あなたも今日からGitHub Pagesでサイトを公開してみましょう。世界中の人があなたの作品を見られるようになります。