静的サイトを無料で公開する方法 — このサイトの構成を例に

「ポートフォリオサイトやアプリの紹介ページを作りたいけど、サーバー代はかけたくない」——実は、HTML・CSS・JavaScriptだけのサイトなら、完全無料で独自ドメインのサイトを公開できます。この記事では、いま読んでいるこのサイト（okojo-it.com）の実際の構成を例に、手順を解説します。

静的サイトとは、サーバー側でプログラムを動かさず、あらかじめ用意したHTML・CSS・JavaScript・画像をそのまま配信するサイトのことです。ブログやポートフォリオ、アプリの紹介ページ（ランディングページ）のように「見せること」が目的のサイトは、ほとんどが静的サイトで十分です。

静的サイトには次のメリットがあります。

• 無料で運用できる：静的ホスティングは無料枠が非常に充実している
• 速い：世界中のCDNから配信されるので表示が高速
• 安全：サーバー側で動くプログラムがないため、攻撃対象が少ない
• 管理が楽：サーバーの保守やアップデート作業が不要

1. HTML・CSS・JavaScriptのファイル一式（エディタは何でもOK）
2. GitHubアカウント（無料）
3. 静的ホスティングサービスのアカウント（無料）
4. （任意）独自ドメイン — これだけは年間コストがかかります

まず、サイトのファイル一式をGitHubのリポジトリに置きます。Gitに不慣れでも、GitHub Desktopやブラウザ上のアップロードで十分です。

GitHubで管理する最大の理由は、後述のホスティングサービスと連携すると「pushしたら自動で公開される」仕組みが作れることです。FTPでファイルを上げる時代のような手作業がなくなります。

Gitの基本操作は「実務で使うGitコマンド集」にまとめているので、あわせてどうぞ。

静的サイトの無料ホスティングには、主に次の選択肢があります。

• Cloudflare Pages：無料枠が広く、独自ドメインとの相性が良い（このサイトはこれ）
• GitHub Pages：GitHubだけで完結する手軽さが魅力
• Netlify / Vercel：フォームやプレビュー機能など付加機能が豊富

どれもやることはほぼ同じで、「GitHubリポジトリを選ぶ → ビルド設定（静的サイトなら不要）を確認 → デプロイ」の3ステップです。数分で「〇〇.pages.dev」のようなURLでサイトが公開されます。

無料のサブドメインのままでも運用できますが、ポートフォリオとして人に見せるなら独自ドメインがおすすめです。ドメインはレジストラで取得し（年間千円台〜）、ホスティング側の管理画面でカスタムドメインとして追加します。

DNSの設定は難しく感じますが、ホスティング側の画面に「このレコードを追加してください」と表示される通りに設定するだけです。HTTPS証明書も自動で発行されるので、特別な作業は要りません。

セキュリティヘッダーの設定

Cloudflare Pagesなら、リポジトリに _headers というファイルを置くだけでセキュリティヘッダーを設定できます。このサイトでは、Content-Security-Policy（読み込めるリソースの制限）、X-Frame-Options（iframe埋め込みの禁止）、Strict-Transport-Security（HTTPS強制）などを設定しています。静的サイトでも設定しておいて損はありません。

検索エンジン対策の基本

• 各ページに <title> と meta description を書く
• sitemap.xml と robots.txt を置く
• Google Search Console にサイトを登録して、サイトマップを送信する

ここまでやっておくと、サイトが検索結果に載りやすくなります。

• ホスティング：0円（無料枠で十分）
• HTTPS証明書：0円（自動発行）
• 独自ドメイン：年間1,000〜2,000円程度（任意）

つまり、ドメイン代以外は完全無料です。個人開発アプリのプライバシーポリシー置き場や紹介ページとしても、この構成は最適だと思います。

静的サイトの公開は、「GitHubに置く → 無料ホスティングにつなぐ → ドメインを設定する」の3ステップで完結します。サーバーの知識がなくても、半日あれば独自ドメインのサイトが持てます。アプリ開発者にとっては、App Store提出に必要なプライバシーポリシーのURLをすぐ用意できるのも大きな利点です。まずは1ページだけでも公開してみてください。