Copicode 日本語トップ

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

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

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

先に確認：GitHub Pagesは「静的ファイル公開」専用

GitHubにpushしたファイルがすべてWebサイトとして動くわけではありません。GitHub Pagesで公開されるのは、指定したブランチとフォルダにある静的ファイルです。PHP、MySQL、サーバー側メール送信が必要なら、ロリポップなどのPHP対応サーバーを使います。

どの公開方法を選ぶ？判断表

公開したいもの 向いている場所 理由
HTML/CSS/JavaScriptだけのデモ GitHub Pages 静的ファイルだけで動くため。
PHPの問い合わせフォーム ロリポップなど サーバー側でPHP実行が必要。
MySQLを使うサイト ロリポップなど GitHub PagesにはDBがない。
READMEや制作物の説明ページ GitHub Pages 無料で共有しやすい。

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

種類GitHub Pagesロリポップなどのレンタルサーバー
HTML動く動く
CSS動く動く
JavaScriptブラウザ側で動くブラウザ側で動く
PHP動かない動く
MySQLなどのDB使えない契約内容により使える
お問い合わせフォーム送信外部サービス連携が必要PHPで実装できる

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

GitHub Pagesが向いている用途

逆に、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 を用意するのがポイントです。

GitHub Pagesで公開する手順

  1. GitHubで公開したいリポジトリを開く
  2. Settings を開く
  3. 左メニューの Pages を開く
  4. Build and deployment の Source を Deploy from a branch にする
  5. Branch を main、フォルダを /(root) にする
  6. Save を押す

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

公開URLが表示されたら、まずトップページを開き、次にCSS、画像、リンク先の順番で確認します。見た目が崩れている場合は、公開設定よりもパス指定の問題であることが多いです。

docsフォルダから公開する場合

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

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

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

CSSや画像が反映されないとき

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

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

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

404になるときの確認ポイント

確認順としては、まずSettings → Pagesで公開元を確認し、次にリポジトリ上でindex.htmlの場所を確認します。その後、ブラウザのURLがhttps://ユーザー名.github.io/リポジトリ名/の形になっているかを見ます。

pushしたのに反映されないとき

GitHubへの反映自体が不安な場合は、先に GitHubへpushする方法 と git logで履歴を確認する方法 を確認すると原因を切り分けやすくなります。

ロリポップ運用サイトとの使い分け

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

次に読むと作業がつながる記事

ロリポップ公開サイトとの併用チェック

GitHub Pagesは静的サイト向けです。ロリポップでPHPサイトを運営している場合、GitHub Pagesへそのまま置いてもPHPは実行されません。

  • .php はGitHub Pagesでは動かない
  • HTML/CSS/JavaScriptだけのデモならGitHub Pages向き
  • お問い合わせフォームやDB連携はロリポップ側で確認する
  • CSSや画像が崩れる時は相対パスを確認する

関連: FileZillaでロリポップへアップロードする方法、PHPで動的サイトを作る基本

次のステップへ:
GitHub Pagesで公開するなら push手順 と .gitignoreの設定 を先に整えます。PHPサイトを本番公開する場合は ロリポップ公開前チェックリスト へ進んでください。

迷った時の整理入口

この記事だけで判断しにくい時は、症状、PHP保守、AIコード安全、Google公開後確認のどれに近いかを先に分けてください。

次に整理すること

読むだけで止まらず、必要なら柱ページへ戻って確認範囲を分け、AIや人に渡せるメモ、チェックリスト、問い合わせ文へ進めます。

次に読む記事