2026年8月6日

Netlifyで静的サイトをホスティングする方法（Git連携・netlify.toml・独自ドメイン）

VPS・クラウド

Netlify は、HTML・CSS・JavaScript でできた静的サイトを、CDN 経由で HTTPS 配信できるホスティングサービスです。Git リポジトリと連携すれば、push するたびに自動でビルドと公開が行われます。この記事では、3つの公開方法の違い、netlify.toml によるビルド・リダイレクト・ヘッダーの設定、独自ドメインと HTTPS の設定、WordPress のサイトを静的化して載せる場合の注意点までを説明します。

Netlifyに向いているサイト

Netlify が配信するのは、あらかじめ用意したファイルです。サーバー側でリクエストごとに PHP やデータベースを動かす仕組みはないため、次のようなサイトに向いています。

手書きの HTML で作ったサイトやランディングページ
Astro、Hugo、Eleventy、Next.js の静的出力などで生成したサイト
React や Vue で作ったシングルページアプリケーション（SPA）
ドキュメントサイトやポートフォリオ

お問い合わせフォームは Netlify Forms、簡単なサーバー処理は Netlify Functions で補えますが、WordPress をそのまま動かすことはできません。プランごとの上限（ビルド時間、帯域、フォーム送信数など）や料金体系は改定されることがあるため、利用前に公式の料金ページを確認してください（2026年10月現在）。

公開方法は3種類

ドラッグ＆ドロップで公開する

ビルド済みのフォルダを、Netlify の管理画面にドラッグ＆ドロップするだけで公開できます。まず試したいときや、一度きりの公開には手軽です。ただし更新のたびに手作業でアップロードし直す必要があり、どのファイルをいつ上げたかの履歴も Git ほど追いやすくはありません。

Gitリポジトリと連携する（おすすめ）

GitHub、GitLab、Bitbucket などのリポジトリを接続し、ブランチを指定します。push するたびに Netlify がビルドして公開し、プルリクエストを作るとその内容を確認できるデプロイプレビューの URL も発行されます。公開前にレビューできるので、複数人で運用するサイトや更新頻度が高いサイトはこの方法が向いています。リポジトリへのアクセス権は、対象のリポジトリだけに絞って与えるのが安全です。

Netlify CLIで公開する

手元の PC や CI からコマンドで公開する方法です。

npm install -g netlify-cli
netlify login
netlify init      # 新しいサイトを作るか、既存サイトと紐づける

netlify deploy --dir=dist          # 確認用の下書きデプロイ（URL が発行される）
netlify deploy --dir=dist --prod   # 本番に公開

--prod を付けない下書きデプロイは本番サイトに影響しません。発行された URL で表示を確認してから、--prod で本番に反映する流れにしておくと、公開事故を減らせます。CI から使う場合は、個人用のアクセストークンを CI のシークレットに登録し、リポジトリにトークンを書かないようにします。

netlify.tomlでビルドと配信を設定する

リポジトリのルートに netlify.toml を置くと、ビルド方法やリダイレクト、HTTP ヘッダーを設定ファイルとして管理できます。管理画面の設定より、こちらの内容が優先されます。

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "22"

# 旧 URL から新 URL への恒久的な転送
[[redirects]]
  from = "/blog/*"
  to = "/articles/:splat"
  status = 301

# SPA の場合: 存在しないパスを index.html で返す
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

それぞれの設定の意味と、つまずきやすい点は次のとおりです。

**publish**: 公開するフォルダ。ビルドツールの出力先（dist、public、out など）と一致していないと、空のサイトや404になります。
**NODE_VERSION**: ビルドに使う Node.js のバージョン。手元と違うバージョンでビルドされて失敗する事故を防げます。.nvmrc で指定する方法もあります。
リダイレクト: 上から順に評価され、最初に一致したルールが使われます。SPA 用の /* のルールは最後に置かないと、他のルールより先に一致してしまいます。また、実在するファイルがあるパスでは、既定ではファイルが優先されます。
キャッシュ: max-age=31536000, immutable は、ファイル名にハッシュが入っていて内容が変わればファイル名も変わるアセットだけに使います。ハッシュのない index.html などに付けると、更新しても古い内容が表示され続けます。

リダイレクトは、公開フォルダに _redirects というファイルを置いて書くこともできます。どちらか一方に寄せたほうが、どこに何を書いたか迷わずに済みます。

独自ドメインとHTTPSを設定する

最初は 〜.netlify.app のサブドメインで公開されます。独自ドメインを使うには、サイトのドメイン設定でドメインを追加し、DNS を設定します。方法は2つあります。

1つは、ドメインのネームサーバーを Netlify DNS に切り替える方法です。DNS の管理を Netlify にまとめられ、ルートドメインも扱いやすくなります。ただし、メール用の MX レコードなど既存のレコードを Netlify 側に移し忘れると、メールが届かなくなるおそれがあります。切り替え前に今のレコードをすべて書き出しておいてください。

もう1つは、今使っている DNS サービスのまま設定する方法です。www.example.com のようなサブドメインは、サイト名.netlify.app を向く CNAME レコードを登録します。example.com のようなルートドメインは、DNS サービスが ALIAS・ANAME・CNAME フラット化に対応していればそれを使い、対応していなければ Netlify の公式ドキュメントに記載された A レコードを登録します。A レコードの値は変わる可能性があるため、古い記事の値をそのまま使わず、公式の最新情報を確認してください。

DNS が正しく向くと、Let's Encrypt の証明書が自動で発行され、HTTPS で配信されます。証明書の発行が進まないときは、まず dig などで DNS が Netlify を向いているか、CAA レコードで認証局を制限していないかを確認します。

フォームを使う場合

静的サイトでも、Netlify Forms を使えばお問い合わせフォームを受け付けられます。HTML の form タグに属性を付けると、Netlify がビルド時にフォームを検出します。

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <p hidden><label>入力しないでください <input name="bot-field"></label></p>
  <input type="hidden" name="form-name" value="contact">
  <p><label>お名前 <input type="text" name="name" required></label></p>
  <p><label>メール <input type="email" name="email" required></label></p>
  <p><label>内容 <textarea name="message" required></textarea></label></p>
  <p><button type="submit">送信</button></p>
</form>

netlify-honeypot は、人間には見えない入力欄に値を入れてきた送信をスパムとして扱う仕組みです。JavaScript でフォームを描画するサイトでは、ビルド時にフォームが検出されないことがあり、隠しフォームを HTML に置くなどの対応が必要です。フォームで個人情報を受け取るので、プライバシーポリシーに取り扱いを書き、受信した内容の閲覧権限を必要な人だけに絞ってください。

WordPressのサイトを静的化して載せる場合

WordPress で作ったサイトを静的な HTML に書き出し、Netlify で配信する方法もあります。Simply Static のような静的化プラグインで書き出したファイルを、Git リポジトリ経由や CLI で公開する流れです。表示が速くなり、公開側のサーバーで PHP が動かないため攻撃を受ける面も小さくなります。

一方で、コメント、サイト内検索、フォーム、会員機能など、サーバーで動く機能はそのままでは使えません。更新のたびに書き出しと公開が必要になる点も運用の負担になります。WordPress 本体は非公開の環境で動かし、書き出したサイトだけを Netlify で公開する構成にするのが一般的です。導入前にはサイトのバックアップを取り、どの機能が使えなくなるかを洗い出してから判断してください。

まとめ

Netlify は静的ファイルを CDN から HTTPS 配信するサービスで、PHP やデータベースは動かない
公開方法はドラッグ＆ドロップ、Git 連携、CLI の3種類。継続的に運用するなら Git 連携が向いている
netlify.toml でビルドコマンド、公開フォルダ、Node.js のバージョン、リダイレクト、ヘッダーをまとめて管理できる
リダイレクトは上から評価されるため、SPA 用の /* は最後に置く。長期キャッシュはハッシュ付きのアセットだけに使う
独自ドメインは Netlify DNS に移すか、既存の DNS で CNAME や公式の A レコードを設定する。移行時は MX レコードなどの移し忘れに注意する
WordPress を静的化して載せる場合は、使えなくなる機能と更新の手間を事前に確認する