GitHub Pagesで無料でWebサイトを公開する方法【初心者向け】

はじめに

自分で作ったWebページを、インターネット上に公開してみたいと思いませんか？GitHub Pages（ギットハブ ページズ）を使えば、無料で自分のWebサイトを世界中に公開できます。

この記事では、GitHubアカウントの作成からWebサイトの公開まで、初心者向けにステップごとに解説します。HTMLファイルが1つあれば始められます。

ステップ1：GitHubアカウントを作成する

GitHub（ギットハブ）は、プログラムのコードを保存・管理できるサービスです。世界中のエンジニアが使っています。

1. github.com にアクセス
2. 「Sign up」をクリック
3. メールアドレス・パスワード・ユーザー名を入力
4. メールで届く確認コードを入力して完了

ユーザー名がそのままサイトのURLの一部になります（例：username.github.io）。半角英数字で短い名前がおすすめです。

ステップ2：リポジトリを作成する

リポジトリ（repository）とは、ファイルを保存する「フォルダ」のようなものです。

1. GitHubにログインし、右上の「+」→「New repository」をクリック
2. Repository name に my-website と入力
3. 「Public」を選択（無料プランではPublicのみGitHub Pagesが使えます）
4. 「Create repository」をクリック

📖 詳しくはGitHub Pagesで無料公開する方法で解説しています。

ステップ3：ファイルをアップロードする

1. 作成したリポジトリのページで「Upload files」をクリック
2. 自分のパソコンから index.html と style.css をドラッグ＆ドロップ
3. 「Commit changes」をクリックして保存

👉 HTMLで初めてのWebページを作る方法も参考にしてください。

ステップ4：GitHub Pagesを有効化する

1. リポジトリの「Settings」タブをクリック
2. 左メニューの「Pages」をクリック
3. 「Source」で「Deploy from a branch」を選択
4. 「Branch」で「main」を選び、「Save」をクリック

数分待つと、https://ユーザー名.github.io/my-website/ でサイトが公開されます！

🔗 あわせてポートフォリオの作り方もチェックしてみましょう。

GitHub Pagesでよくあるトラブルと対策

GitHub Pagesでサイトを公開したとき、うまく表示されないことがあります。よくあるトラブルと対策を紹介します。

トラブル1：404エラーが表示される

ページにアクセスしたのに「404 - File not found」と表示される場合、ファイル名が間違っている可能性があります。トップページのファイル名は必ず「index.html」にしましょう。「Index.html」や「home.html」ではGitHub Pagesが認識しません。大文字と小文字も区別されるので注意してください。

トラブル2：更新が反映されない

ファイルを更新してプッシュしたのに、サイトの表示が変わらないことがあります。GitHub Pagesの反映には数分かかることがあります。5分ほど待ってからブラウザを強制リロード（Ctrl + Shift + R）してみましょう。それでも変わらない場合は、リポジトリのSettingsでPagesの設定が正しいか確認してください。

トラブル3：CSSや画像が読み込まれない

HTMLは表示されるのに、CSSが効かない・画像が表示されないという場合、パスの書き方が間違っている可能性があります。GitHub Pagesではリポジトリ名がURLに含まれるため、相対パスで書くのが安全です。「./style.css」や「./images/photo.jpg」のように、ドットスラッシュから始めましょう。

トラブル4：Settingsに「Pages」が見つからない

リポジトリがプライベート（非公開）の場合、無料プランではGitHub Pagesを使えません。リポジトリをパブリック（公開）に変更するか、GitHub Proプランにアップグレードする必要があります。学習用のコードなら、パブリックで問題ありません。

トラブル5：カスタムドメインを設定したい

GitHub Pagesでは独自ドメイン（例：mysite.com）を設定することもできます。SettingsのPagesセクションで「Custom domain」にドメイン名を入力し、ドメインのDNS設定でGitHubのサーバーを指定します。ただし、最初は「ユーザー名.github.io」のままで十分です。慣れてから挑戦しましょう。

GitHub Pagesで公開したサイトは、ポートフォリオとして活用できます。作品を増やしていけば、自分のスキルを証明する場になります。ポートフォリオの作り方は「プログラミング学習の成果をポートフォリオにまとめる方法」で詳しく解説しています。

HTMLの基本がまだ不安な人は「HTMLで最初のページを作ろう」から始めましょう。ページの作り方を学んでから公開に進むとスムーズです。

GitHub Pagesは無料で使えて、設定も簡単です。最初はうまくいかないこともありますが、上のトラブル対策を参考にすれば必ず解決できます。自分の作品をインターネットに公開する体験は、プログラミング学習の大きなモチベーションになります。ぜひ挑戦してみてください。

サイトの見た目を整えたい人は「最初のCSS」でCSSの基本を学べます。

まとめ

自分のWebサイトがインターネットに公開されました！URLを友達に共有してみましょう。