はじめに
「GitHubでホームページって作れるの？」
「無料で公開できるって聞いたけど、実際どうなの？」
「難しそうで途中で止まりそう…」
そんなふうに感じていませんか。
GitHub Pagesを使えば、サーバー契約をしなくても、ファイルをアップロードするだけでホームページを公開できます。費用もかからず、作ったページをそのままインターネット上に表示できる仕組みです。
ただ、「何から始めればいいのか」「どの順番で進めればいいのか」が分からないと、手が止まりやすいのも事実です。
この記事では、GitHub Pagesの仕組みを整理しながら、ホームページ公開までの流れを順番にわかりやすくお伝えします。はじめての方でも安心して進められるように、ひとつずつ確認していきましょう。
GitHubでホームページは作れる？
GitHubでホームページが作れるのかを判断するには、「どの機能が無料で使えるのか」と「実際にどこまでのサイトが作れるのか」をセットで理解する必要があります。
まずはGitHub Pagesで公開できる仕組みを確認し、そのうえで実現できることと制限されるポイントを具体的に見ていきます。
GitHub Pagesを使えば無料で公開できる
GitHub Pagesを使えば、サーバー契約や月額料金なしでホームページを公開できます。
GitHubのアカウントを作成し、HTMLファイルをリポジトリにアップロードして公開設定をオンにするだけで
https://ユーザー名.github.io/リポジトリ名
のURLで誰でもアクセスできる状態になります。
公開後の更新も、ファイルを上書きして数十秒〜数分待てば反映されるため、追加費用をかけずに継続的に運用できます。
GitHubでできることとできないこと
GitHubでは、HTML・CSS・JavaScriptで作成した静的なページを公開でき、会社紹介やブログ、ポートフォリオのような構成であれば1ページから複数ページまでそのまま表示できます。
一方で、PHPやデータベースを使うお問い合わせフォームやログイン機能のように、サーバー側で処理が必要な仕組みは動作しません。
これはGitHub Pagesがファイルをそのまま配信する仕組みで、サーバープログラムを実行できないためです。
GitHubでホームページ公開までの流れ
GitHubでホームページを公開するには、アカウント作成から公開設定までを順番どおりに進める必要があります。
作業自体は難しくありませんが、手順を飛ばすと表示されない状態になるため、全体の流れを3〜5ステップで把握したうえで進めることが重要です。
ホームページを公開する全体の手順（3〜5ステップ）
GitHubでホームページを公開する手順は
①GitHubアカウントを作成して新規リポジトリを作る
②index.htmlなどのHTMLファイルを用意する
③そのファイルをリポジトリにアップロードする
④SettingsからGitHub Pagesを有効にする
の4ステップで完了します。
これらを順番どおりに進めることで、アップロードしたファイルがそのまま公開され、指定のURLにアクセスすればページが表示される状態になります。
GitHub Pagesの仕組みを理解する
GitHub Pagesを正しく使うには、「どのリポジトリがどのURLに公開されるのか」と「どんな仕組みでページが表示されているのか」をセットで理解する必要があります。
まずはリポジトリと公開URLの対応関係を整理し、そのうえで静的サイトとして表示される仕組みを具体的に確認していきます。
リポジトリと公開URLの関係
GitHub Pagesでは、リポジトリにアップロードしたファイルがそのまま公開URLに対応します。
ユーザー名.github.ioという名前のリポジトリを作成した場合はhttps://ユーザー名.github.io/ でトップページが表示され、それ以外のリポジトリ名の場合はhttps://ユーザー名.github.io/リポジトリ名/ というURLになります。
これはリポジトリ名がそのままURLのパスとして使われる仕組みのためで、どのリポジトリに配置したかによってアクセス先のURLが決まります。
静的サイトとして公開される
GitHub Pagesでは、リポジトリに置いたHTML・CSS・JavaScriptファイルがそのままサーバーから配信され、アクセスしたURLに対応するファイルが直接表示されます。
たとえばhttps://ユーザー名.github.io/ にアクセスすると、リポジトリ内のindex.htmlが自動的に読み込まれ、ブラウザに表示されます。
これはサーバー側でプログラムを実行せず、保存されているファイルをそのまま返す仕組みのため、アップロードした内容がそのままページとして公開されます。
GitHubでホームページを公開する手順
GitHubでホームページを公開するには、リポジトリの作成から公開設定の有効化までを順番どおりに進める必要があります。
途中でファイル名や設定を間違えるとページが表示されないため、各ステップで何をするのかを具体的に確認しながら進めていきましょう。
①リポジトリを作成する
GitHubにログインした状態で画面右上の「＋」から「New repository」を選び、リポジトリ名を入力して作成します。
GitHub Pagesで公開する場合は、ユーザー名.github.ioという名前で作成するとトップページ用のURLになり、それ以外の名前にするとサブページとして公開されます。
リポジトリを作成すると、その中にファイルを置ける状態になるため、このあとHTMLファイルをアップロードできるようになります。
②HTMLファイルを用意する
公開するページのHTMLファイルを用意し、トップページとして表示させるためにファイル名を必ずindex.htmlにします。
メモ帳やエディタでHTMLコードを入力して保存し、拡張子が.htmlになっていることを確認します。
GitHub PagesではURLにアクセスしたときにindex.htmlが自動的に読み込まれるため、このファイルを準備しておくことで正しくページが表示される状態になります。
③GitHubにアップロードする
作成したリポジトリの画面を開き、「Add file」から「Upload files」を選択して、用意したindex.htmlをドラッグまたは選択してアップロードします。
アップロード後に「Commit changes」を押して保存すると、そのファイルがリポジトリに反映されます。
リポジトリ内にindex.htmlが配置されることで、GitHub Pagesで公開したときにその内容が表示される状態になります。
④公開設定を有効にする
リポジトリの「Settings」を開き、「Pages」メニューから公開設定を行います。
「Branch」をmainに設定し、フォルダを「/ (root)」に指定して保存すると、その時点でGitHub Pagesが有効になります。
設定後に表示されるURLにアクセスすると、リポジトリ内のindex.htmlが読み込まれ、ページが公開された状態になります。
GitHubでホームページを公開後に確認するポイント
GitHub Pagesで公開設定を完了しても、すぐに正しく表示されるとは限らないため、公開後に確認すべきポイントを押さえておく必要があります。
まずは実際のURLにアクセスして表示状態を確認し、そのうえで反映されない場合にどこをチェックすればよいかを具体的に見ていきます。
URLにアクセスして表示を確認する
公開設定後に表示されたURLをそのままブラウザのアドレスバーに入力してアクセスし、index.htmlの内容が表示されるかを確認します。
表示されない場合は、URLのスペルがユーザー名.github.ioまたはユーザー名.github.io/リポジトリ名/の形式になっているかを確認します。
正しいURLでアクセスできれば、アップロードした内容がそのまま公開されている状態になります。
反映されないときのチェック項目
ページが表示されない場合は、まずindex.htmlがリポジトリのルート直下に配置されているかを確認します。
次にSettingsのPagesでBranchがmain、フォルダが「/ (root)」に設定されているかを確認します。
さらに、アップロード後すぐは反映まで30秒〜2分ほどかかるため、時間をおいてからURLに再アクセスします。
これらが正しく設定されていないと、GitHub Pagesがファイルを読み込めずページが表示されない状態になります。
初心者がGitHubでホームページを公開するときにつまずきやすいポイント
GitHubでホームページを公開する作業は4つ前後の手順で進められますが、初心者は公開設定そのものよりも、ファイル名やリポジトリ名、反映タイミングのような細かい条件で止まりやすいです。
ここでは特に表示されない原因になりやすい3つのポイントに絞って、事前に確認しておきたい点を整理していきます。
リポジトリ名のルールに注意する
GitHub Pagesではリポジトリ名によって公開URLが変わるため、名前の付け方を間違えると想定した場所にページが表示されません。
トップページとして公開する場合はユーザー名.github.ioという完全一致の名前で作成する必要があり、1文字でも違うとhttps://ユーザー名.github.io/リポジトリ名/ の形式になりURLが変わります。
このルールを理解せずに名前を付けると、正しいURLにアクセスしてもページが見つからない状態になります。
index.htmlがないと表示されない
GitHub PagesではURLにアクセスしたときに最初に読み込まれるファイルがindex.htmlに固定されているため、このファイルがリポジトリ内にないとページは表示されません。
たとえばhome.htmlやtop.htmlという名前でアップロードしても自動では読み込まれないため、URLにアクセスしても空白ページやエラーになります。
これはトップページとして読み込むファイル名がindex.htmlに決められているためで、正しく表示させるにはファイル名をindex.htmlにする必要があります。
反映まで時間がかかる場合がある
GitHub Pagesではファイルをアップロードしても即時に反映されるわけではなく、反映まで30秒〜2分程度かかることがあります。
アップロード直後にURLへアクセスしても古い内容が表示されたり、ページが表示されないことがありますが、これはサーバー側で公開処理が完了していないためです。
時間をおいてから再度アクセスすることで、更新した内容が正しく表示される状態になります。
まとめ
GitHubを使えば、サーバー契約や月額費用をかけずにホームページを公開できます。
リポジトリを作成し、index.htmlを用意してアップロードし、公開設定を有効にするだけで、https://ユーザー名.github.io/ または https://ユーザー名.github.io/リポジトリ名/ のURLでページが表示されます。
ただし、HTML・CSS・JavaScriptのみがそのまま表示される仕組みのため、PHPやデータベースを使う機能は動作しません。
また、リポジトリ名の付け方やindex.htmlの配置、公開設定の指定が正しくないとページは表示されず、反映にも30秒〜2分程度かかるため、設定と時間の両方を確認することが重要です。
