GitHub Pagesは静的サイト専用｜フォームは置けるが“受信”はできない理由

結論：GitHub Pagesは「静的ホスティング」。フォームは置けるが“受信処理”がないので、外部サービス（Formspree等）かNetlifyへ寄せる

「GitHub Pagesでポートフォリオを作ったけど、お問い合わせフォームからメールが届かない……」
「HTMLの<form>を書いたのに、送信しても何も起きない」

これは初心者が必ず一度つまずくポイントです。結論から言うと、GitHub Pagesは静的サイトホスティングであり、フォーム送信を受け取って保存したり、メール通知したりするバックエンド機能を持っていません。だから、フォームの見た目だけ作っても動かないのが通常です。

ただし、諦める必要はありません。解決策は大きく2つあります。

GitHub Pagesのまま：フォーム受信を外部サービスに任せる（例：Formspree、Googleフォーム、Newt、SSGform）
フォームごと移す：フォーム機能付きホスティング（例：Netlify）を使う

この記事では、GitHub Pagesのできること・できないことを整理し、「GitHub Pagesのままフォームを動かす」具体策までまとめます。

GitHub Pagesでできること：静的サイトの公開（ポートフォリオ・LP・ドキュメント）

GitHub Pagesは、リポジトリ内のHTML/CSS/JavaScriptなどを配信して公開できるサービスです。向いている用途は次のとおりです。

ポートフォリオ：自己紹介、作品一覧、実績ページ
静的LP：サービス紹介、キャンペーンページ（※フォーム受信は別で用意）
ドキュメント：README拡張、説明サイト
静的ブログ：静的サイトジェネレーターで生成したファイルの公開

「とにかく早くURLがほしい」「サーバー不要でOK」なら、GitHub Pagesは強い選択肢です。

GitHub Pagesでできないこと：サーバー処理・DB・API・フォーム受信

GitHub Pagesは静的ホスティングのため、サーバー側で動く処理ができません。よく問題になる“できないこと”は次の領域です。

フォーム送信の受信：送信内容を保存／通知する仕組みがない
ログイン／会員機能：ユーザー管理・セッション管理ができない
データベース：問い合わせ保存、投稿管理などの永続化ができない
APIのホスト：/api のようなエンドポイントは置けない

この前提を押さえると、「フォームが動かない理由」が一発で理解できます。

「GitHub Pages フォーム」で混乱するポイント：フォーム不可ではなく“受信不可”

厳密には、GitHub Pagesでもフォームの見た目（入力欄）は作れます。問題は、送信を受け取る先がないことです。

<form>
  <label>お名前 <input name="name" required></label>
  <label>内容 <textarea name="message" required></textarea></label>
  <button type="submit">送信</button>
</form>

このままだと、どこにも送られません。フォームを機能させるには、次のどちらかが必要です。

actionで外部の受信サービスへ送る
JavaScriptで外部API（サーバーレス等）へ送る

GitHub Pagesの制限：サイズ・帯域・ビルド回数は“目安（ソフトリミット）”がある

ポートフォリオ用途なら通常は気にしなくてOKですが、運用が大きくなると制限に当たる可能性があります。

公開サイトのサイズ：1GBまで（目安）
帯域：月100GBの目安
ビルド：1時間あたり10ビルドの目安
デプロイのタイムアウト：10分

画像・動画を大量に置く、頻繁にビルドを回す、といった運用をするなら、先に知っておくと移行判断がラクです。

GitHub Pagesのままフォームを動かす方法（おすすめ順）

「指定でGitHub Pagesを使わないといけない」「今のまま最短で動かしたい」という人向けに、現実的な選択肢をまとめます。

方法1：外部フォーム受信サービスを使う（最短・定番）

フォーム送信の受け取り（保存・通知）を、外部サービスに任せます。初心者の最短ルートです。

例：Formspree、Newt、SSGform など

ここでは定番のFormspreeを例に、最小構成を示します（細部は各サービスの最新ドキュメントに従ってください）。

<form action="https://formspree.io/f/xxxxx" method="POST">
  <label>お名前 <input type="text" name="name" required></label>
  <label>メール <input type="email" name="email" required></label>
  <label>内容 <textarea name="message" required></textarea></label>
  <button type="submit">送信</button>
</form>

メリット：GitHub Pagesのまま実装できる／サーバー不要／最短で動く
注意点：無料枠や機能制限、スパム対策（reCAPTCHA等）の有無はサービスごとに違うので、用途に合うか確認する

方法2：Googleフォームを埋め込む（最短だが見た目が合いにくい）

「とにかく受け取れればOK」なら最短です。デザインの統一感は落ちますが、運用は安定します。

メリット：設定が簡単／通知も作りやすい
デメリット：UIがGoogleフォーム寄りになる（ポートフォリオだと好みが分かれる）

方法3：サーバーレスに送る（伸びるが初心者にはやや重い）

Cloudflare Workers、Firebase FunctionsなどにPOSTして、メール送信や保存を実装する方法です。自由度は高いですが、最初のポートフォリオではやることが増えがちです。

フォームを“できるだけラクに”やるならNetlify（フォーム機能あり）

フォームの目的が「お問い合わせを受けたい」なら、最初からフォーム機能が用意されているホスティングに寄せるのが早いです。代表例がNetlifyです。

Netlifyフォームの最小例（静的HTML）

html  <form name="contact" method="POST" data-netlify="true"> <input type="hidden" name="form-name" value="contact" /> <label>お名前 <input type="text" name="name" required></label> <label>メール <input type="email" name="email" required></label> <label>内容 <textarea name="message" required></textarea></label> <button type="submit">送信</button> </form>

このように、data-netlify=”true” を付けたフォームをデプロイすると、Netlify側がフォーム送信を受け取れる仕組みです（通知などは管理画面で設定）。

GitHub PagesとNetlifyの使い分け：迷ったらこの基準

やりたいこと	GitHub Pages	Netlify
静的サイトを無料で公開（ポートフォリオ/資料）	◎	◎
フォームを“追加開発なし”で受け取りたい	×（受信先がない）	◎（フォーム機能あり）
GitHub Pages指定で動かしたい	◎（外部サービス併用）	—

初心者の結論はシンプルです。

フォーム不要：GitHub PagesでOK
フォーム必要：Netlifyへ移す、またはGitHub Pages＋Formspree等で受信を外部化

よくある失敗5選と回避策

失敗1：フォームを置いただけで「届く」と思い込む

回避策：フォームは受信先が必要。GitHub Pages単体では受け取れないので、外部受信（Formspree等）かNetlifyにする。

失敗2：APIやDBもGitHub Pagesで何とかしようとする

回避策：GitHub Pagesは静的ホスティング。サーバー処理は別サービス（サーバーレス等）で用意する。

失敗3：スパム対策を忘れる

回避策：フォーム受信サービスのスパム対策を使う（reCAPTCHA等）。自作で頑張りすぎない。

失敗4：フォーム用のメールアドレスを公開してしまう

回避策：メール直書きはスパムが増えやすい。フォームか、スパム対策された連絡導線に寄せる。

失敗5：あとから「やっぱり管理画面が欲しい」となる

回避策：最初から“問い合わせの運用”を想定。増えそうならNetlifyや別CMS/フォーム管理に寄せる。

まとめ：GitHub Pagesの限界を理解すれば、フォーム問題は解決できる

GitHub Pagesは静的サイトの公開に強い一方、フォーム送信の受信（保存・通知）などのバックエンド処理は持っていません。だから、フォームは「見た目は作れるが、受信は別で用意する」が正解です。

GitHub Pagesのまま動かしたいなら、Formspreeなどの外部フォーム受信か、最短ならGoogleフォーム埋め込み。フォームをラクに運用したいなら、Netlifyのフォーム機能へ寄せると迷いが減ります。

次にやること（3ステップ）

ステップ1：目的を決める（問い合わせを受けたい？ただ連絡先が欲しい？）
ステップ2：GitHub Pages指定なら「Formspree等の外部受信」か「Googleフォーム埋め込み」を選ぶ
ステップ3：フォーム運用が増えそうなら、Netlify等へ移行して“受信まで一体化”する