無料でWebサイトを公開する方法は？

✅ 回答

HTML/CSS/JavaScriptだけで作った静的サイトなら、完全無料で公開できるサービスが複数あります。代表的な3つを比較します。

3サービス比較

サービス	特徴	向いている人	制限
GitHub Pages	GitHubにpushするだけ	Git学習中の人	リポジトリ公開が必要（無料プラン）
Netlify	フォーム機能・リダイレクト設定あり	フォーム付きサイトを作りたい人	月100GBの帯域制限
Cloudflare Pages	表示速度が速い・帯域無制限	アクセスが多いサイト	ビルド500回/月

迷ったらGitHub Pages — 選ぶ基準

• 学園祭サイト・ポートフォリオ → GitHub Pages（Gitの練習にもなる）
• お問い合わせフォーム付きサイト → Netlify（フォーム機能が無料で使える）
• ブログやドキュメントサイト → Cloudflare Pages（表示速度重視）

GitHub Pagesで公開する手順（最短）

1. GitHubでリポジトリを作成する
2. HTMLファイルをpushする（index.htmlが必須）
3. Settings → Pages → Branch を「main」に設定
4. 数分待つと https://ユーザー名.github.io/リポジトリ名/ で公開される

独自ドメインは必要？

学習段階では不要です。github.io のURLで十分。AO入試のポートフォリオとして提出する場合も、GitHub PagesのURLで問題ありません。独自ドメインが欲しくなったら、年間1,000〜2,000円程度で取得できます。

「動的サイト」は無料で公開できる？

データベースやサーバー処理が必要なサイト（ログイン機能付きなど）は、上記3サービスだけでは動きません。その場合はRender（無料枠あり）やSupabase（データベース）を組み合わせます。ただし、HTML/CSS/JSの学習段階では静的サイトで十分です。

GitHub Pagesでの公開手順

# 1. GitHubでリポジトリを作成（READMEなし）
# 2. ローカルでgit init → push
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/ユーザー名/my-site.git
git push -u origin main

# 3. GitHubのSettings → Pages → Source: main → Save
# 4. 数分後に https://ユーザー名.github.io/my-site/ で公開！

index.htmlがリポジトリのルートにあれば、それがトップページとして表示されます。

3サービスの使い分けまとめ

迷ったらGitHub Pagesから始めましょう。Git学習にもなり、ポートフォリオとしても使えます。フレームワーク（React/Next.js等）を使い始めたらVercelに移行するのがスムーズです。

Netlifyでの公開手順

GitHubにpushするだけで自動デプロイされます。netlify.comでGitHubアカウントと連携し、リポジトリを選択するだけ。ビルドコマンドの設定も自動検出されます。カスタムドメインの設定もダッシュボードから簡単にできます。