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

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

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

公開する方法は3つあり、どれを選ぶかで必要な準備がまったく違います。コマンドを使わない方法から順に、8サイトを本番運用して分かった落とし穴つきで書きます。

まず：公開する方法は3つある

Netlifyの解説を読んで難しく感じるとしたら、自分に必要のない方法を読んでいる可能性があります。公開の方法は3つあり、必要な準備がまったく違います。

方法 必要なもの 向いている人
① ドラッグ&ドロップ ブラウザだけ とりあえず公開したい
② GitHub連携 GitHubアカウント 更新を自動化したい
③ CLI（コマンド） Node.js 手元で生成してから上げたい

①はコマンドもGitHubも不要です。 「Netlifyは難しそう」と思って離れる人の多くは、いきなり③の解説を読んでいます。

私は本サイトを③で運用していますが、最初に試すなら①で十分です。

① ドラッグ&ドロップで公開する（最短）

所要時間は3分程度です。

  1. Netlifyにアカウントを作る（メールアドレスまたはGitHubアカウント）
  2. 管理画面で Add new site → Deploy manually を選ぶ
  3. 公開したいフォルダを、表示された枠にドラッグする

これだけで https://<自動生成の名前>.netlify.app として公開されます。

注意点が1つあります。 ドラッグするのはフォルダで、中に index.html が直接入っている必要があります。フォルダをもう一段階挟むと、トップページが表示されません。

◯ mysite/index.html      ← mysite をドラッグする
✗ mysite/public/index.html ← public をドラッグする

更新するときは、同じ画面にもう一度ドラッグします。差分ではなく毎回まるごと置き換わります。

② GitHub連携で自動公開する

GitHubにpushしたら自動で公開される形にできます。更新頻度が高いサイトはこれが楽です。

管理画面で Add new site → Import an existing project を選び、リポジトリを指定します。

静的なHTMLだけのサイトなら、ビルドコマンドは空のままで構いません。 公開ディレクトリ（publish directory）だけ指定してください。

この方法だけ、Netlify側でビルドが動きます。 後述するクレジットを消費するのはこの方法です。

③ CLIで公開する

手元でファイルを生成してから上げる場合は、これが最も速いです。本サイトはこの方法です。

前提（③の場合）

現在、学習アプリ・ポートフォリオサイト・本サイトなど8サイトをNetlifyで運用しています。

手順（③ CLI）

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の反映を待つ必要があるので、追加直後に証明書エラーが出ても、しばらく待てば解消します。

無料枠について

以前は「帯域◯GB・ビルド◯分」でしたが、現在はクレジット制に変わっています。無料プランは月300クレジット・サイト数500で、上限を超えてもビルドが止まるだけ（自動課金なし）です。

③のCLIで上げる場合、Netlify側でビルドが走らないためクレジットをほぼ消費しません。 実際に8サイト運用して消費0でした。

数値の内訳と、消費する場合／しない場合の違いはNetlifyの無料枠はどこまで使えるかにまとめています。

つまずきやすい点

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は無料で使えますか？

使えます。8サイトを本番運用していますが、無料プランのままです。無料枠は現在クレジット制で、月300クレジット・サイト数500までです。上限を超えるとビルドが停止するだけで、自動的に課金されることはありません。

コマンドを使わずに公開できますか？

できます。管理画面の Add new site から Deploy manually を選び、公開したいフォルダをドラッグするだけで公開されます。Node.jsもGitHubも不要で、3分程度で終わります。

公開したのにサイトが更新されません

まずブラウザ以外で確認してください。curlで新しい内容が返るなら反映は完了しており、原因はブラウザのキャッシュです。トップページが404になる場合は、公開フォルダの指定が1階層ずれています。

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

できます。デプロイコマンドに --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 を実務で毎日使い、自社サイト・学習アプリ・業務自動化を内製している。このサイトでは、実際に自分が金を払って使ったツールだけを扱う。