GitHub PagesでWebサイトを無料公開する方法：PHPサイトとの違いも解説

GitHub Pagesは、HTML、CSS、JavaScriptだけでできた静的サイトを無料で公開できる仕組みです。ポートフォリオ、LP、制作物のデモ、説明ページにはとても便利です。

一方で、ロリポップで動かしているような .php ファイルやデータベースを使うサイトは、そのままでは動きません。この記事では、GitHub Pagesでできること、できないこと、公開手順、よくある失敗を実用目線で整理します。

GitHub Pagesで動くもの・動かないもの

つまり、GitHub Pagesは「完成した静的ファイルを置く場所」です。PHPの共通ヘッダー読み込みやDB接続を使っているサイトは、静的HTMLへ書き出すか、PHP対応サーバーで公開します。

逆に、WordPress、PHP製サイト、ログイン機能、DB検索、サーバー側メール送信が必要なものは、GitHub Pagesだけで完結させるのは難しいです。

いちばん単純な構成はこれです。リポジトリの一番上に index.html がある状態にします。

my-site/
├─ index.html
├─ assets/
│  ├─ css/
│  │  └─ style.css
│  └─ js/
│     └─ script.js
└─ images/
   └─ main.jpg

index.php ではなく index.html を用意するのがポイントです。

少し待つと、公開URLが表示されます。反映まで数十秒から数分かかることがあります。

コード本体と公開用ページを分けたい場合は、docs フォルダに公開ファイルを置く方法もあります。

my-project/
├─ src/
├─ README.md
└─ docs/
   ├─ index.html
   └─ assets/
      └─ css/
         └─ style.css

Pages設定では、フォルダを /docs にします。

プロジェクトサイトは、URLが https://ユーザー名.github.io/リポジトリ名/ の形になります。このため、先頭が /assets/css/style.css のような絶対パスだと、意図しない場所を見に行くことがあります。

GitHub Pagesでは、まず相対パスで書くのが安全です。

<link rel="stylesheet" href="./assets/css/style.css">
<img src="./images/main.jpg" alt="メイン画像">

すでに独自ドメインとロリポップでPHPサイトを動かしているなら、本番はロリポップ、静的なデモや小さなツールはGitHub Pages、という使い分けが現実的です。