初心者でも分かるGitHub Pagesでの無料サイト公開｜完全ガイド

GitHub Pagesとは？

GitHub Pagesは、GitHubが提供する無料の静的サイトホスティングサービスです。HTMLファイルをGitHubリポジトリにアップロードするだけで、誰でも簡単にWebサイトを公開できます。

GitHub Pagesの主な特徴

完全無料：容量制限はありますが、個人サイトなら十分
独自ドメイン対応：カスタムドメインを設定可能
HTTPS対応：無料でSSL証明書を取得
高速配信：CDNで世界中どこからでも高速アクセス
簡単デプロイ：GitHubにpushするだけで自動更新

                💡 こんな人におすすめ

                ポートフォリオサイト、ブログ、プロジェクトのドキュメント、個人の趣味サイトなどを無料で公開したい方に最適です！

【ステップ1】GitHubアカウントの作成

まだGitHubアカウントを持っていない方は、最初にアカウントを作成しましょう。

GitHub公式サイトにアクセス
「Sign up」をクリック
メールアドレス、パスワード、ユーザー名を入力
メール認証を完了

ユーザー名は後からWebサイトのURLに使われるので、わかりやすい名前にしましょう（例：mechatora → mechatora.github.io）。

【ステップ2】リポジトリの作成

GitHubにログインしたら、Webサイト用のリポジトリを作成します。

1リポジトリ名の決定

GitHub Pagesには2種類の公開方法があります。

ユーザーサイト：ユーザー名.github.io（例：mechatora.github.io）
プロジェクトサイト：ユーザー名.github.io/プロジェクト名（例：mechatora.github.io/portfolio）

今回は個人サイトを作るので、ユーザーサイトの方法で進めます。リポジトリ名は必ずユーザー名.github.ioにしてください。

2リポジトリの設定

GitHubのトップページで「New repository」をクリック
Repository nameに「ユーザー名.github.io」と入力
「Public」を選択（無料版はPublicのみ）
「Add a README file」にチェック（任意）
「Create repository」をクリック

⚠️ よくあるミス
リポジトリ名のスペルミスに注意！「ユーザー名.github.io」と完全一致しないとGitHub Pagesとして認識されません。

【ステップ3】HTMLファイルをアップロード

リポジトリができたら、実際にWebサイトのファイルをアップロードします。

方法1：GitHub Web UIで直接アップロード（初心者向け）

リポジトリのページで「Add file」→「Create new file」をクリック
ファイル名に「index.html」と入力
以下のサンプルコードを貼り付け

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First GitHub Pages</title>
</head>
<body>
    <h1>Hello, GitHub Pages!</h1>
    <p>私の最初のWebサイトです。</p>
</body>
</html>
            

「Commit new file」をクリック
数分待つと、https://ユーザー名.github.ioでサイトが公開されます

方法2：Gitコマンドを使う方法（経験者向け）

# リポジトリをクローン
git clone https://github.com/ユーザー名/ユーザー名.github.io.git

# ディレクトリに移動
cd ユーザー名.github.io

# index.htmlを作成（エディタで編集）
# ファイルをステージング
git add index.html

# コミット
git commit -m "Initial commit"

# GitHubにプッシュ
git push origin main
            

【ステップ4】公開確認

ブラウザでhttps://ユーザー名.github.ioにアクセスして、サイトが表示されているか確認しましょう。

                ⏱️ 反映に時間がかかる場合

                初回公開時は最大10分程度かかることがあります。404エラーが出ても焦らず、少し待ってから再度アクセスしてみてください。

【応用】カスタムドメインの設定

独自ドメイン（例：mechatora.com）を持っている場合、GitHub Pagesと連携できます。

設定手順

リポジトリの「Settings」→「Pages」に移動
「Custom domain」にドメイン名を入力（例：mechatora.com）
ドメイン管理サービス（お名前.comなど）でDNS設定を変更

DNSレコードの設定例

# Aレコード（GitHub PagesのIPアドレス）
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

# CNAMEレコード（wwwサブドメインの場合）
www → ユーザー名.github.io
            

DNS設定の反映には最大48時間かかる場合がありますが、通常は数時間で完了します。

                🔒 HTTPS化も自動

                カスタムドメインでも、GitHub Pagesが自動でSSL証明書を発行してHTTPS対応してくれます（Let's Encrypt）。

実際に使ってみた感想

私自身、mechatora.comをGitHub Pagesでホスティングしています。以下が実際に使ってみて感じたメリットとデメリットです。

✅ メリット

完全無料：サーバー代が一切かからない
高速・安定：GitHubのインフラを使えるので信頼性が高い
デプロイが簡単：GitHubにpushするだけで自動更新
バージョン管理ができる：Gitで過去の状態に戻せる

⚠️ デメリット・制約

静的サイトのみ：PHP、Node.js、Pythonなどのサーバーサイド処理は不可
容量制限：リポジトリサイズは1GB推奨、帯域幅は月100GB
商用利用の制約：大規模なビジネスサイトには向かない
リポジトリが公開：無料版はコードが全世界に公開される

よくあるトラブルと解決法

❓ サイトが表示されない（404エラー）

リポジトリ名が「ユーザー名.github.io」と完全一致しているか確認
index.htmlがリポジトリのルートディレクトリにあるか確認
Settings → Pagesで「Source」がmainブランチになっているか確認
初回公開時は10分程度待つ

❓ 更新が反映されない

ブラウザのキャッシュをクリア（Ctrl + F5）
GitHubのActionsタブでデプロイ状況を確認
数分待ってから再度アクセス

❓ CSSやJavaScriptが読み込まれない

ファイルパスが正しいか確認（絶対パス vs 相対パス）
ファイル名の大文字・小文字が一致しているか確認
ブラウザの開発者ツールでエラーをチェック

まとめ

GitHub Pagesは、初心者でも簡単に無料でWebサイトを公開できる素晴らしいサービスです。ポートフォリオサイトや個人ブログ、プロジェクトのドキュメントサイトなど、幅広い用途に活用できます。

                🎯 次のステップ

                基本的なサイトが公開できたら、デザインをカスタマイズしたり、複数ページを追加したりして、自分だけのWebサイトを作ってみましょう！

このブログが、あなたのWeb公開の第一歩の参考になれば幸いです。わからないことがあれば、GitHubのドキュメントやコミュニティも活用してみてください！