簡単な自己紹介ページやポートフォリオなどを公開したいだけの時に、サーバー契約や複雑な環境構築を行うのは気が引けるという方に便利なのが、GitHubが提供する「GitHub Pages」です。
無料で使えて、ブラウザの操作だけでWebサイトを公開できるため、初心者でも手軽に始められるのが大きなメリットです。
GitHub Pagesとは？無料でWebサイトを公開できるGitHubの機能
GitHub Pagesとは、GitHubが提供する静的Webサイトのホスティングサービスです。
リポジトリに保存したHTMLやCSSなどのファイルを、Webコンテンツとして公開できる機能のことを言います。
通常、Webサイトを公開するには、作成したファイルをWebサーバーに配置して、インターネットからアクセスできるようにする必要があります。
一方、GitHub Pagesの場合、Webサーバーの契約やサーバーへのファイル転送などを行う必要がないため、個人のポートフォリオや小規模なWebサイトを公開したい場合に向いています。
また、GitHub Pagesは静的サイトを対象としているため、基本的にはHTML、CSS、JavaScriptなどを使って構成されたWebサイトの公開に適しています。
詳しい仕様は、公式ドキュメントの「GitHub Pages とは」で確認できます。
GitHubとは？初心者向けにメリットや知識、機能を解説
▶
GitHub Pagesでできること・できないこと
GitHub Pagesでは、HTMLやCSS、JavaScriptを使った静的Webサイトを公開できます。
例えば、次のような用途が考えられます。
- 自己紹介ページやプロフィールサイトの公開
- ポートフォリオサイトの作成
- HTMLやCSSの学習成果の公開
- 生成AIで作成したHTMLページの公開
- プロジェクトの紹介ページやドキュメントの公開
- イベントやサービスの案内ページの作成
一方で、GitHub Pagesは一般的なWebサーバーとは異なり、サーバー側でプログラムを実行する仕組みには対応していません。
そのため、PHPやPythonなどを使ったサーバーサイド処理や、データベースへの接続、ユーザー登録・ログイン機能などを実装したい場合は、外部のAPIやバックエンドサービスを組み合わせる必要があります。
GitHub Pagesを使うメリット
GitHub Pagesには、主に次のようなメリットがあります。
- 無料で使える：サーバー代や公開費用がかからない
- サーバーの準備が不要：ファイルをリポジトリに保存するだけで公開できる
- ブラウザだけで完結：ファイルの作成から公開設定まで、GitHubの画面上で操作できる
- 更新が簡単：ファイルを編集してコミットするだけで、公開中のサイトに反映される
- HTTPSに対応：github.ioのURLは、標準でHTTPSによる暗号化通信に対応している
特に、費用をかけずに、サーバーの知識がなくてもWebサイトを公開できる点は、初めてWebサイトを公開する人にとって大きな魅力です。
料金と無料で使うための条件
GitHub Pagesは、GitHubの無料プラン(GitHub Free)でも利用可能です。
個人で簡単なWebサイトを公開する程度であれば、有料プランに加入する必要はありません。
ただし、無料プランでGitHub Pagesを利用する場合、公開元となるリポジトリをPublic(公開)に設定する必要があります。
Publicリポジトリのファイルは、Webサイトとして表示していないものも含めて誰でも閲覧できるため、パスワードや個人情報などはリポジトリに置かないようにしましょう。
プランごとの機能は、公式ドキュメントの「GitHubのプラン」で確認できます。
【実践】ブラウザだけで自己紹介ページを公開する
ここからは、実際にGitHub Pagesを使って自己紹介ページを公開してみましょう。
今回はHTMLとCSSを使ったシンプルなWebサイトを作成します。
ファイルの作成から公開設定まで、すべてGitHubのブラウザ画面上で操作できるため、事前に開発環境を構築する必要はありません。
事前準備：GitHubにログインして完成形を確認する
まずは、GitHubの公式サイトにアクセスしてログインします。
GitHubのアカウントを持っていない場合は、画面の案内に従ってアカウントを作成してください。
今回は、次のような内容を掲載する自己紹介ページを作成します。
ページの構成はシンプルですが、HTMLで文章や見出しを配置し、CSSで背景色や文字の大きさなどを調整することで、基本的なWebサイトの作り方を確認できます。
公開用のリポジトリを作成する
最初に、Webサイトのファイルを保存するリポジトリを作成します。
GitHubにログインしたら、画面右上の＋ボタンをクリックし、「New repository」を選択してください。
リポジトリの作成画面が表示されたら、次のように設定します。
入力が完了したら、「Create repository」をクリックしてリポジトリを作成しましょう。
【画像付き】GitHubの使い方｜設定・基本操作
▶
index.htmlとstyle.cssを作成する
続いて、Webサイトの表示内容を記述するHTMLファイルと、デザインを設定するCSSファイルを作成します。
GitHubのリポジトリ画面を開き、「Add file」から「Create new file」を選択してください。
最初に、Webサイトのトップページとして使用する index.html ファイルを作成します。
Webサイトでは、URLにアクセスしたときにフォルダ内の index.html が最初に表示されるため、トップページのファイル名は index.html にします。
ファイルの内容には、以下のコードを入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="profile">
<h1>自己紹介</h1>
<section>
<h2>プロフィール</h2>
<p>こんにちは！山田太郎です。</p>
<p>Web開発について勉強しています。</p>
</section>
<section>
<h2>趣味</h2>
<p>プログラミング、読書、ゲーム</p>
</section>
<section>
<h2>連絡先</h2>
<p>example@example.com</p>
</section>
</main>
</body>
</html>このHTMLでは、ページのタイトルや見出し、プロフィールなどの文章を定義しています。
また、linkタグによって、後ほど作成する style.css を読み込むように設定しています。
入力が終わったら、「Commit changes」をクリックしてファイルを保存しましょう。
コミットとは、ファイルの変更内容を確定してリポジトリに記録する操作のことです。
続いて、同じ手順で新しいファイルを作成し、ファイル名を「style.css」に設定します。
CSSファイルには、次のコードを入力します。
body {
font-family: sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 40px 20px;
}
.profile {
max-width: 600px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 12px;
}
h1 {
text-align: center;
color: #2563eb;
}
h2 {
border-bottom: 2px solid #2563eb;
padding-bottom: 8px;
}
section {
margin-top: 30px;
}
p {
line-height: 1.8;
}このCSSでは、ページの背景色や文字のフォント、見出しの色などを設定しています。
max-width でコンテンツの最大幅を指定し、margin: 0 auto で中央に配置することで、読みやすいレイアウトにしています。
入力が終わったら、こちらも「Commit changes」をクリックして保存します。
GitHub Pagesを有効化する（ブランチ・フォルダの設定）
次に、作成したファイルをWebサイトとして公開するため、GitHub Pagesを有効にします。
リポジトリの画面から「Settings」をクリックし、左側のメニューにある「Pages」を選択してください。
「Build and deployment」という項目が表示されたら、次のように設定します。
- Sourceで「Deploy from a branch」を選択する
- Branchで「main」を選択する
- フォルダで「/(root)」を選択する
- 「Save」をクリックする
今回は、リポジトリの最上位にHTMLとCSSを保存しているため、フォルダは「/(root)」を選択します。
この設定によって、mainブランチに保存されているファイルを公開対象として、GitHub PagesがWebサイトを生成するようになります。
公開元の設定方法は、公式ドキュメントの「GitHub Pages サイトの発行ソースの構成」でも解説されています。
公開URLにアクセスして表示を確認する
設定を保存すると、GitHub PagesによるWebサイトの公開処理が始まります。
公開処理が完了すると、Settingsの Pages画面に公開URLが表示されます。
表示されたURLをクリックし、作成したページが表示されれば成功です。
なお、公開設定を保存してから実際にWebサイトが表示されるまでには、少し時間がかかる場合があります。
すぐにアクセスして表示されない場合は、数分程度待ってから再度確認してみましょう。
【実践】ページを修正して更新を反映する
GitHub Pagesでは、公開したWebサイトの内容を変更したい場合も、GitHub上のファイルを編集するだけで更新できます。
試しに、作成した自己紹介ページに新しい情報を追加し、変更内容を公開サイトに反映してみましょう。
ブラウザでファイルを編集してコミットする
まずは、リポジトリ内にある index.html をクリックし、ファイルの内容を表示します。
画面右上にある鉛筆マークの「Edit this file」をクリックすると、ブラウザ上でファイルを編集できるようになります。
今回は、自己紹介ページに「得意な技術」という項目を追加してみましょう。
既存のHTMLコードにある「趣味」のセクションの下に、次のコードを追加します。
<section>
<h2>得意な技術</h2>
<p>HTML、CSS、JavaScript</p>
</section>編集が終わったら、「Commit changes」をクリックして変更内容をコミットします。
これにより、追加内容がリポジトリに反映されます。
反映状況を確認する
ファイルの変更をコミットしたら、GitHub Pagesの公開サイトにも変更が反映されているか確認しましょう。
GitHub Pagesでは、公開元に指定したブランチやフォルダの内容が更新されると、それをもとにWebサイトの再公開処理が実行されます。
今回の設定では、mainブランチのルートフォルダを公開元にしているため、mainブランチへのコミットが公開処理の対象になります。
公開処理の状況は、リポジトリの「Actions」タブから確認できます。
公開処理が正常に完了していることを確認したら、サイトへアクセスして追加した項目が表示されているか確認しましょう。
このように、GitHub Pagesではファイルを編集してコミットするだけで、公開済みのWebサイトを更新できます。
GitHub Actionsとは？活用事例・使い方をエンジニアが実際の画面で解説
▶
公開できない・反映されないときの対処法
GitHub Pagesを利用していると、公開URLにアクセスしてもページが表示されなかったり、ファイルを修正したのに変更が反映されなかったりする場合があります。
ここでは、よくある原因と対処法を紹介します。
【公開URLにアクセスしても404エラーになる】
404エラーが表示される場合は、公開設定やファイルの配置場所に問題がある可能性があります。
まずは、次の項目を確認しましょう。
- GitHub Pagesが有効になっているか
- 公開元のブランチが正しく指定されているか
- 公開対象のフォルダに index.html が存在するか
- アクセスしているURLが正しいか
特に注意したいのが、index.html の配置場所です。
公開対象とは異なるフォルダに保存していると、トップページとして正しく認識されない可能性があります。
また、ユーザーサイトとプロジェクトサイトの場合でURLの形式が異なるため、URLの入力ミスがないかも確認してください。
そのほかの原因は、公式ドキュメントの「GitHub ページ サイトの 404 エラーのトラブルシューティング」で確認できます。
【CSSが反映されずデザインが崩れる】
HTMLは表示されるものの、CSSが反映されず、文字や背景が意図したデザインにならない場合もあります。
この場合は、HTMLからCSSを読み込むパスが正しいか確認しましょう。
今回の例では、HTMLファイルとCSSファイルを同じフォルダに配置しているため、次のように指定しています。
<link rel="stylesheet" href="style.css">一方、CSSファイルを別のフォルダに配置している場合は、その場所に合わせてパスを変更する必要があります。
また、大文字と小文字は異なる文字列として区別されるため、ファイル名が正確に指定されているかも確認してください。
【変更をコミットしたのに反映されない】
ファイルを編集してコミットしたにもかかわらず、公開サイトの表示が変わらない場合は、公開処理が完了していない可能性があります。
次の項目を順番に確認してみましょう。
- Actionsの実行状況：処理中なら完了を待ち、失敗していればログを確認する
- 公開元のブランチ：設定と異なるブランチにコミットしていないか確認する
- ブラウザのキャッシュ：強制再読み込みやシークレットウィンドウで表示を確認する
- ファイルの保存先やパス：ファイル名や場所を変えた場合は、HTML側の参照先も修正する
特に、公開処理の完了前にアクセスしているケースが多いため、まずはActionsタブで処理が終わっているかを確認しましょう。
ユーザーサイトとプロジェクトサイトの違い（URLの決まり方）
GitHub Pagesには、大きく分けて「ユーザーサイト」と「プロジェクトサイト」の2種類があります。
どちらもWebサイトを公開するための機能ですが、公開用リポジトリの名前やURLの決まり方が異なります。
ユーザーサイトとは、GitHubの個人アカウントに紐づけて公開するWebサイトです。
ユーザーサイトを作成する場合、リポジトリ名を次の形式にする必要があります。
ユーザー名.github.ioこのリポジトリを使ってGitHub Pagesを有効にすると、次のURLでWebサイトにアクセスできます。
https://ユーザー名.github.io/ユーザーサイトは、アカウントごとに1つだけ作成できます。
なお、URLにはGitHubのユーザー名が含まれるため、ユーザー名を変更すると公開URLも変わる点に注意しましょう。
一方、プロジェクトサイトは、特定のリポジトリに紐づけて公開するWebサイトです。
プロジェクトサイトの場合、リポジトリ名に特別な指定はありません。
また、公開URLは次のような形式になります。
https://ユーザー名.github.io/リポジトリ名/プロジェクトサイトはリポジトリごとに1つ作成できるため、複数のプロジェクトでそれぞれ別のWebサイトを公開することも可能です。
今回作成した「my-profile」リポジトリのサイトも、このプロジェクトサイトにあたります。
GitHub Pagesの制限と注意点
GitHub Pagesは、無料で利用できる一方で公開できるファイルの容量や利用方法などに制限があります。
主な制限は次のとおりです。
| 項目 | 制限 |
|---|---|
| 公開サイトの容量 | 1GB以下 |
| 公開元リポジトリの容量 | 1GB以下を推奨 |
| デプロイ処理の時間 | 10分以内 |
| 月間の通信量 | 100GBが目安（ソフトリミット） |
| ビルド回数 | 1時間あたり10回が目安（ソフトリミット） |
最新の制限は、公式ドキュメントの「GitHub ページの制限」で確認できます。
制限の関係上、大量の画像や動画などを掲載する大規模なWebサイトや、アクセス数が非常に多いサービスの運用には向いていないため、注意が必要です。
また、オンラインショップや商取引を主な目的とするWebサイトや、商用SaaSなどのホスティング用途として利用することは、GitHubの利用規約で認められていません。
パスワードやクレジットカード番号などの機密情報をやり取りするサイトにも使わないようにしましょう。
ビジネスの基盤となるWebサイトを運用したい場合は、用途に合ったホスティングサービスを選択するようにしましょう。
Netlifyとは？Webサイトの公開手順を実践解説
▶
GitHub Pagesに関するよくある質問
Q. GitHub Pagesを利用するためにプログラミングの知識は必要？
A. 必ずしも必要であるとは限りません。
ただし、Webサイトの内容やデザインを自由に変更したい場合は、HTMLやCSSの基本的な知識があると便利です。
Q. GitHub PagesでWordPressを利用できる？
A. GitHub Pages上でWordPressをそのまま動かすことはできませんが、作成したWebサイトを静的HTMLとして書き出し、そのファイルをGitHub Pagesで公開する方法はあります。
Q. GitHub Pagesで公開したWebサイトは検索エンジンに登録される？
A. GitHub Pagesで公開したWebサイトも、一般的なWebサイトと同様に検索エンジンに登録されます。
Q. GitHub Pagesで公開したWebサイトを非公開にできる？
A. GitHub Pagesは基本的に公開を前提としたサービスであり、特定のユーザーだけに閲覧させるためのアクセス制限機能は提供されていません。
そのため、Webサイトを非公開にしたい場合は、GitHub Pagesの公開を停止するなどの対応が必要です。
公開を停止する場合は、Pages設定画面の「Unpublish site」から操作できます（参考：GitHub Pages サイトの公開を停止する）。
まとめ
GitHub Pagesは、Webサーバーの契約や複雑な環境構築が不要であり、GitHubのブラウザ画面からファイルの作成や編集、公開設定まで行えるため、初心者でも比較的簡単に利用できます。
一方で、サーバーサイドの処理には対応していないことや、公開できる容量・通信量などに制限があることには注意が必要です。
