技術・開発 更新日: 2025年1月15日

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

📅 公開日: 2025年1月15日 🔄 最終更新: 2025年1月15日
記事のアイキャッチ画像

「自分のWebサイトを公開したいけど、サーバー代がかかるのは嫌だな...」そんな悩みを解決するのがGitHub Pagesです。完全無料で、独自ドメインも使えて、しかもHTTPSにも対応。この記事では、プログラミング初心者の方でもわかるように、アカウント作成からサイト公開まで、実際の画面を見ながら詳しく解説します。

GitHub Pagesとは？なぜ無料なのか

GitHub Pagesは、GitHubが提供する静的サイトホスティングサービスです。「静的サイト」とは、HTMLやCSS、JavaScriptだけで動くサイトのこと。データベースやサーバーサイドのプログラムを使わないシンプルなサイトなら、完全無料で公開できます。

GitHub Pagesの特徴

  • 完全無料：アカウント作成も、サイト公開も、維持費も一切かかりません
  • 独自ドメイン対応：自分で取得したドメイン（例：example.com）を使えます
  • HTTPS対応：セキュアな通信が標準で使えます
  • Git連携：ファイルをアップロードするだけで自動公開されます
  • 高速配信：CDN（コンテンツ配信ネットワーク）で世界中どこからでも高速アクセス

どんなサイトが作れる？

GitHub Pagesで公開できるのは「静的サイト」です。具体的には：

  • 個人ブログ（このブログもGitHub Pagesで公開できます）
  • ポートフォリオサイト（作品集、プロフィール）
  • プロジェクトのドキュメントサイト
  • Webアプリケーション（データベース不要のもの）
  • ランディングページ

逆に、ログイン機能やデータベースが必要なサイト（TwitterやInstagramのようなSNS）は作れません。

実際にGitHub Pagesでサイトを公開する手順

セクション画像

ここからは、実際に手を動かしながらサイトを公開していきます。所要時間は約30分です。

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

まず、GitHubのアカウントが必要です。すでにアカウントを持っている方はステップ2へ進んでください。

  1. GitHub公式サイトにアクセス
  2. 「Sign up」（無料登録）をクリック
  3. メールアドレス、パスワード、ユーザー名を入力
  4. メール認証を完了

ポイント：ユーザー名は後で変更できますが、サイトのURLに使われるので、シンプルでわかりやすい名前にしましょう。例えば、私のユーザー名が「mechatora」なら、デフォルトのサイトURLは「mechatora.github.io」になります。

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

GitHubでは、ファイルを保存する場所を「リポジトリ」と呼びます。サイトを公開するためのリポジトリを作りましょう。

  1. GitHubにログイン後、右上の「+」アイコンをクリック
  2. 「New repository」を選択
  3. リポジトリ名に「[あなたのユーザー名].github.io」と入力
    例：ユーザー名が「mechatora」なら「mechatora.github.io」
  4. 「Public」（公開）を選択
  5. 「Add a README file」にチェック
  6. 「Create repository」をクリック

重要：リポジトリ名は必ず「ユーザー名.github.io」という形式にしてください。これが特別なルールで、この名前にすることで自動的にGitHub Pagesが有効になります。

ステップ3: HTMLファイルを作成してアップロード

シンプルなHTMLファイルを作って、サイトを公開してみましょう。

方法A: GitHub上で直接作成（初心者向け）

  1. 作成したリポジトリのページで「Add file」→「Create new file」をクリック
  2. ファイル名に「index.html」と入力
  3. 以下のHTMLコードを貼り付け：
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私のサイト</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }
        h1 { color: #2563eb; }
    </style>
</head>
<body>
    <h1>GitHub Pagesへようこそ！</h1>
    <p>これは私の最初のWebサイトです。</p>
</body>
</html>
  1. 下の「Commit new file」をクリック

方法B: ローカルで作成してアップロード（慣れている方向け）

パソコン上でHTMLファイルを作成し、Git Desktopやコマンドラインでアップロードする方法もあります。この方法は、複数のファイルを一度に管理したい場合に便利です。

ステップ4: サイトが公開されたか確認する

ファイルをアップロードしてから1〜2分待ちます。その後、ブラウザで以下のURLにアクセスしてください：

https://[あなたのユーザー名].github.io

先ほど作成したHTMLページが表示されれば成功です！おめでとうございます、あなたのサイトが世界中に公開されました。

独自ドメインを設定する方法

「github.io」ではなく、自分で取得したドメイン（例：mechatora.com）を使いたい場合は、以下の手順で設定できます。

事前準備：ドメインを取得

ドメインは、お名前.comやムームードメインなどのドメイン登録サービスで取得できます。年間1,000〜2,000円程度です。

GitHub側の設定

  1. リポジトリの「Settings」タブをクリック
  2. 左メニューの「Pages」を選択
  3. 「Custom domain」欄に取得したドメイン（例：mechatora.com）を入力
  4. 「Save」をクリック
  5. 「Enforce HTTPS」にチェック（HTTPSを強制）

DNS側の設定

ドメイン管理画面で、以下のDNSレコードを追加します： 

Type: A
Name: @
Value: 185.199.108.153

Type: A
Name: @
Value: 185.199.109.153

Type: A
Name: @
Value: 185.199.110.153

Type: A
Name: @
Value: 185.199.111.153

サブドメイン（例：blog.mechatora.com）を使う場合は、CNAMEレコードを設定します： 

Type: CNAME
Name: blog
Value: [ユーザー名].github.io

DNS設定が反映されるまで、数分〜24時間かかることがあります。気長に待ちましょう。

実際に運用してわかった、つまずきやすいポイント

セクション画像

私がMechaToraサイトを運用する中で、よくある失敗と解決策をまとめました。

ポイント1: ファイル名の大文字・小文字に注意

GitHub Pagesは大文字・小文字を区別します。「About.html」と「about.html」は別のファイルとして扱われます。リンク切れの原因になりやすいので、すべて小文字で統一することをおすすめします。

ポイント2: 404エラーページを作成する

存在しないページにアクセスされたとき、デフォルトの404ページは味気ないです。ルートディレクトリに「404.html」というファイルを作成すると、カスタム404ページを表示できます。

ポイント3: 更新が反映されない場合

ファイルを更新したのに変更が反映されない場合は、以下を試してください：

  • 1〜2分待つ（ビルド処理に時間がかかることがあります）
  • ブラウザのキャッシュをクリア（Ctrl+F5）
  • 「Actions」タブでビルド状況を確認

ポイント4: HTTPSが有効にならない

独自ドメインでHTTPSを有効にするには、DNS設定が正しく反映されている必要があります。「Enforce HTTPS」にチェックできない場合は、DNSの設定を再確認してください。

GitHub Pagesの制限事項

無料で使える反面、いくつかの制限があります：

  • リポジトリサイズ：1GB以下が推奨
  • 月間帯域幅：100GB以下が推奨
  • ビルド回数：1時間に10回まで
  • サイトサイズ：1GB以下

個人ブログやポートフォリオサイトなら、これらの制限に引っかかることはまずありません。

次のステップ：サイトを充実させる

基本的なサイトが公開できたら、次は内容を充実させましょう：

  • CSSで見た目を整える：Bootstrap や Tailwind CSS などのフレームワークを使うと簡単
  • 複数ページを作る：about.html、contact.html などを追加
  • Google Analyticsを導入：アクセス解析で訪問者を把握
  • SEO対策：metaタグ、sitemap.xml、robots.txtを設定

まとめ

GitHub Pagesを使えば、サーバー代0円でWebサイトを公開できます。この記事で解説した手順をまとめます：

  • GitHubアカウントを作成
  • 「ユーザー名.github.io」という名前でリポジトリを作成
  • index.htmlをアップロード
  • https://ユーザー名.github.io にアクセスして確認
  • （オプション）独自ドメインを設定

私自身、MechaToraサイトをGitHub Pagesで運用して3年以上になりますが、一度もトラブルなく安定稼働しています。完全無料でこのクオリティのサービスが使えるのは、本当にありがたいですね。

これからWebサイトを作りたいと考えている方は、ぜひGitHub Pagesを試してみてください。無料なのでリスクゼロです。失敗しても何も失いません。まずは小さく始めて、徐々にサイトを育てていきましょう！

📚 関連記事

この記事が役に立ったら、ぜひシェアしてください！