【初心者向け】GitHub Pagesで無料でサイトを公開する方法 ― 10分で完了

この記事で解決すること

「作ったWebページをインターネットに公開したいけど、サーバー代がかかるのは嫌」

GitHub Pagesなら、完全無料でHTMLサイトを公開できます。

GitHub Pagesとは

GitHubが提供する無料のWebホスティングサービスです。

料金: 完全無料
URL: https://ユーザー名.github.io/リポジトリ名/
対応: HTML, CSS, JavaScript（静的サイト）
制限: サーバーサイドの処理（PHP, データベースなど）は使えない

ポートフォリオサイト、ブログ、ドキュメントサイトなどに最適です。GitHubのアカウントをまだ持っていない方は、GitHubとは？アカウント作成から最初の使い方ガイドを先に読んでおくとスムーズです。

手順

ステップ1: リポジトリを作成する

GitHubにログイン
右上の「+」→「New repository」をクリック
以下を設定:
- Repository name: my-website（好きな名前）
- Public を選択（Privateだと有料プランが必要）
- 「Add a README file」にチェック
「Create repository」をクリック

ステップ2: HTMLファイルをアップロードする

方法A: GitHub上で直接作成する場合

リポジトリページで「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 Website</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>GitHub Pagesで公開した最初のサイトです。</p>
</body>
</html>

「Commit changes」をクリック

方法B: gitコマンドで push する場合

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

# index.htmlを作成（上のHTMLを保存）

# プッシュ
git add .
git commit -m "Add index.html"
git push

ステップ3: GitHub Pagesを有効にする

リポジトリの「Settings」タブをクリック
左メニューの「Pages」をクリック
「Source」で以下を設定:
- Branch: main
- Folder: / (root)
「Save」をクリック

ステップ4: 公開を確認する

1〜2分待つと、以下のURLでサイトが公開されます。

https://ユーザー名.github.io/my-website/

SettingsのPagesページにURLが表示されるので、クリックして確認しましょう。

サイトを更新する方法

ファイルを編集してcommit & pushするだけで、自動的にサイトが更新されます。

# ファイルを編集した後
git add .
git commit -m "Update content"
git push

反映まで1〜2分かかることがあります。pushでエラーが出た場合は、git pushでrejectedエラーが出たときの対処法を参考にしてください。

よくあるトラブル

404エラーが表示される

index.html のファイル名が正しいか確認（大文字小文字に注意）
Pagesの設定でBranchとFolderが正しいか確認
有効化してから数分待つ

CSSやJSが読み込まれない

パスの指定を確認してください。

<!-- NG: 絶対パス -->
<link rel="stylesheet" href="/css/style.css">

<!-- OK: 相対パス -->
<link rel="stylesheet" href="./css/style.css">

HTMLの基本的な構造については最低限のHTMLファイルの書き方 ― コピペで使えるテンプレート付きで解説しています。CSSのレイアウトで困ったときはCSSで中央揃えができないときの解決パターン集も参考にしてみてください。

更新が反映されない

ブラウザのキャッシュをクリア（Ctrl + Shift + R）
GitHubのActionsタブでデプロイが完了しているか確認
ターミナル操作に不安がある方はコマンドラインが怖い人へ ― 最初に覚える10コマンドも参考にしてください

独自ドメインを設定する（オプション）

お名前.comなどで取得したドメインを使うこともできます。

Settings → Pages → Custom domain にドメインを入力
ドメイン管理画面でCNAMEレコードを設定:
- ホスト: www
- 値: ユーザー名.github.io

よくある質問（FAQ）

Q: GitHub Pagesは本当に完全無料ですか？

A: はい、パブリックリポジトリであれば完全無料です。プライベートリポジトリでGitHub Pagesを使う場合は、GitHub Proプラン（有料）が必要になります。

Q: GitHub PagesでWordPressのようなブログは作れますか？

A: WordPressは動的サイト（サーバーサイド処理が必要）なので、GitHub Pagesでは動きません。代わりに、Hugo、Jekyll、Astroなどの静的サイトジェネレーターを使えば、ブログを構築できます。

Q: 独自ドメインを設定するとHTTPS（SSL）は使えますか？

A: はい、GitHub Pagesは独自ドメインでも無料でHTTPSを提供しています。Settings → Pages → 「Enforce HTTPS」にチェックを入れるだけで有効になります。

Q: 1つのアカウントで複数のサイトを公開できますか？

A: はい、リポジトリごとにGitHub Pagesを有効にできます。URLは https://ユーザー名.github.io/リポジトリ名/ の形式になります。また、ユーザー名.github.io という名前のリポジトリを作ると、https://ユーザー名.github.io/ でアクセスできるメインサイトになります。

Q: GitHub Pagesにアクセス制限（パスワード保護）をかけられますか？

A: GitHub Pages自体にはアクセス制限の機能はありません。パブリックリポジトリのGitHub Pagesは誰でもアクセスできます。アクセス制限が必要な場合は、別のホスティングサービスを検討してください。

まとめ

GitHub Pagesは完全無料の静的サイトホスティング
リポジトリ作成 → HTMLアップロード → Pages有効化の3ステップ
index.htmlがあれば公開できる
更新はpushするだけで自動反映