使い倒し研究所
サイト制作・公開

Netlifyで静的サイトを公開する手順｜4サイト運用して分かった落とし穴つき

公開 2026-08-22検証日 2026-08-22 カズト
PR本記事にはプロモーション（アフィリエイト広告）が含まれます。

Netlifyで実際に4つのサイトを本番運用しています。コマンド1行で公開するまでの手順と、独自ドメイン設定、そして公開フォルダの設定で実際にヒヤッとした落とし穴をまとめました。

この記事でできるようになること

前提

現在、学習アプリ2本・ポートフォリオサイト・本サイトの計4つをNetlifyで運用しています。

手順

1. CLIを入れる

npm install -g netlify-cli

2. ログインする

netlify login

ブラウザが開いて認証されます。

3. 公開する

公開したいフォルダに移動して、次の1行です。

netlify deploy --dir . --prod

初回は「新しいサイトを作るか、既存サイトに紐づけるか」を聞かれます。サイト名を決めると、https://<サイト名>.netlify.app で即座に公開されます。

--prod を付けないと本番ではなくプレビュー用のURLに出ます。確認してから本番に上げたいときは、あえて --prod を外すのが便利です。

4. 更新する

2回目以降は同じコマンドだけです。設定は .netlify/state.json に保存されているので、サイトの選択を毎回聞かれることはありません。

netlify deploy --dir . --prod

5. 独自ドメインを設定する

Netlifyの管理画面で、対象サイトの Domain management から独自ドメインを追加します。

そのあと、ドメインを取得したサービス側でDNSを向けます。

設定するもの 内容
ルートドメイン（example.com） NetlifyのIPアドレス、またはNetlify DNSへの切り替え
wwwサブドメイン Netlifyが指定するホスト名へのCNAME

SSL証明書は自動で発行されます。 DNSの反映を待つ必要があるので、追加直後に証明書エラーが出ても、しばらく待てば解消します。

つまずきやすい点

publish = "." は「フォルダの中身を全部公開する」という意味

これが一番危ない設定です。netlify.toml に次のように書いた場合、

[build]
  publish = "."

そのフォルダに置いたものは全部そのまま配信されます。 作業用のスクリプト、元データ、メモ書きを同じフォルダに置いていると、URLを直接叩けば誰でも見られる状態になります。

実際に学習アプリを作ったとき、オープンデータの元ファイルを一時的に公開フォルダに置いていて、公開前に気づいて移動しました。

対策はシンプルで、公開するフォルダと作業するフォルダを分けることです。 本サイトも、公開するのは site/ だけにして、Markdownの原稿やビルドスクリプトはその外に置いています。

公開前に何が配信されるか必ず確認する

netlify deploy --dir . --prod --dry-run

--dry-run を付けると、実際には送信せずに「何がアップロードされるか」だけを確認できます。公開フォルダを共用しているなら、毎回これを挟むのが安全です。

大きな画像を置くと初回表示が明確に遅くなる

デプロイ自体は通ります。ただしスマホ回線での初回表示に差が出ます。以前、画像の合計が12MBあったものを3.7MBまで圧縮したところ、体感が変わりました。アップロードする前に圧縮しておくほうが確実です。

フォームを使うならHTMLに属性を足すだけ

問い合わせフォームは、バックエンドを用意しなくてもNetlifyの機能で受け取れます。

<form name="contact" method="POST" data-netlify="true">

この属性を付けてデプロイすると、送信内容が管理画面に届きます。スパム対策の netlify-honeypot 属性も併せて設定できます。

よくある質問

Netlifyは無料で使えますか？

使えます。実際に4サイトを本番運用していますが、無料プランのまま上限に達したことはありません。ただし帯域やビルド時間には上限があるため、最新の条件は公式サイトでご確認ください。

デプロイ前に何が公開されるか確認できますか？

できます。デプロイコマンドに --dry-run を付けると、実際には送信せずアップロード対象のファイル一覧だけを確認できます。公開フォルダに作業ファイルが混ざっていないかの確認に使えます。

独自ドメインのSSL証明書は自分で用意する必要がありますか？

不要です。独自ドメインを追加してDNSが反映されると、証明書は自動で発行されます。反映待ちの間は一時的に証明書エラーが出ることがあります。

まとめ

Netlifyの公開自体は netlify deploy --dir . --prod の1行で終わります。難しいのは公開作業ではなく、「何を公開フォルダに置くか」の管理でした。

この3つを最初に決めておけば、事故は起きません。

この記事を書いた人
カズト（ETERNAL d.c.t）

ETERNAL d.c.t 代表。Web制作・生成AI導入支援・ライバー事務所運営を手がける。Claude Code / Codex CLI / n8n / Google Apps Script を実務で毎日使い、自社サイト・学習アプリ・業務自動化を内製している。このサイトでは、実際に自分が金を払って使ったツールだけを扱う。