2026 追記: 旧 VuePress ブログから移植した記事。Netlify の管理画面 UI と料金プランは 2021 年から変わっており、現行の手順とは一部ズレている（要出典）。骨子としての「GitHub 連携 → ビルドコマンド指定 → 自動デプロイ」という流れは現在も同じなので、考え方の整理として残している。
静的サイトのホスティング先として Netlify を選び、GitHub のリポジトリを連携して自動デプロイを動かすまでの初期設定をまとめる。当時のスクリーンショットをそのまま貼っているが、現在の Netlify の管理画面とはレイアウトが違うので、その点は割り引いて読んでほしい。
この記事で扱うのは「アカウント作成」「リポジトリ連携」「ビルド設定」「2段階認証」「無料枠の確認」の 5 点。独自ドメインの設定は別記事に分けている。
使用するサービス
短い答え: GitHub をコード管理、Netlify を静的ホスティングに使う最小構成。
理由は、GitHub にプッシュした内容を Netlify が検知して自動でビルド・公開してくれるから。ローカルで書いて、push して、確認する、というシンプルな流れが作れる。
全体的な流れは以下。
- ローカルで開発・執筆
- GitHub にソースコードを push
- Netlify が検知してビルド・配信
注意: 以降の手順は GitHub のアカウント登録と 2 段階認証が済んでいることを前提に書いている。
Netlify にアカウントを作る
短い答え: Netlify のトップから GitHub アカウントでサインインする。
理由は、Netlify と GitHub を別々のアカウントで管理するより、OAuth 連携で済ませた方が後の手順が短いから。Netlify 側で個別のパスワードを作る必要もない。
Netlify にアクセスすると以下の画面が出るので、GitHub のアカウントでログインする。
注意: 2026 年現在は Netlify の UI が刷新され、サインアップのレイアウトとボタン位置は当時と異なる（要出典）。OAuth で GitHub と連携する流れ自体は同じ。
GitHub のリポジトリを連携する
短い答え: ダッシュボードの New site from Git から GitHub を選び、対象リポジトリを指定する。
理由は、Netlify は Git リポジトリの内容を起点に動くから。ローカルからの直接アップロード（drag & drop）も別の選択肢としてあるが、自動デプロイにしたいなら Git 連携が前提になる。
ログイン後、New site from Git をクリックするとデプロイ元の選択画面が表示される。GitHub を選び、対象リポジトリを選択する。
注意: プライベートリポジトリも同じ手順で連携できる。組織所有のリポジトリの場合は、組織側で Netlify アプリの承認が必要になることがある。
ビルド設定を入力する
短い答え: Branch・Build command・Publish directory の 3 つを入力して Deploy site を押す。
理由は、Netlify はこの 3 つを起点に「どのブランチを」「どうビルドして」「どこを公開するか」を決めているから。フレームワーク（VuePress / Next.js / Astro など）によって値が変わる項目はここだけと言ってよい。
リポジトリを選ぶと、ビルド設定の画面が出る。
VuePress 製サイトの場合の例:
| 項目 | 値の例 |
|---|---|
| Branch | master または main |
| Build command | npm run build（VuePress の場合） |
| Publish directory | docs/.vuepress/dist（VuePress 既定） |
入力後、Deploy site をクリックするとビルドが走る。ステータスが Published になればデプロイは成功。
注意: ビルドコマンドを後から変更してデプロイが落ちるのはよくある事故。動いている設定を不用意に書き換えない ようにする。Publish directory のパスを 1 階層間違えるだけで真っ白な画面になる。
自動デプロイと HTTPS
短い答え: 対象ブランチに push すると Netlify が自動でビルドし、HTTPS も自動で有効になる。
理由は、Netlify は Let’s Encrypt を内部で扱っていて、独自ドメイン設定後も証明書の取得・更新を自動でやってくれるから。手動での設定操作は基本的に不要。
具体的には、
- 対象ブランチに push したタイミングでビルドが走る
- ビルド成功後、配信用の CDN に反映される
- 独自ドメインを設定すると、Netlify 側で証明書が自動発行される
注意: 独自ドメインを当てた直後は反映に時間がかかる。当時の感覚では半日ほどで安定するが、DNS 伝搬の状況によって変わる。
2段階認証を有効化する
短い答え: User settings の Security から Two-factor authentication を有効にする。
理由は、Netlify アカウントはサイトのデプロイ権限と独自ドメイン設定の権限を握っているから。乗っ取られると公開中のサイトを差し替えられる。最初の段階で 2FA を入れておく方が後悔が少ない。
手順:
- 右上の自分のアイコンをクリックし、User settings を開く
- 左メニューの Security をクリック
- Two-factor authentication の項目を有効化する
直リンクは以下。
https://app.netlify.com/user/security#two-factor-authentication/
注意: 認証アプリ（Authy / 1Password / Google Authenticator など）のバックアップを取らずに端末を機種変更すると、自分でログインできなくなる。リカバリーコードは別の場所に保管しておく。
無料枠について
短い答え: Netlify の Starter プランは容量 100GB / ビルド時間 300 分/月（2021 年当時）。
理由は、個人ブログ用途であれば、画像をある程度抑えていれば無料枠でほぼ収まる規模感だから。商用や高頻度更新になると話が変わる。
当時の Starter プラン:
- 帯域: 100GB / 月
- ビルド時間: 300 分 / 月
- サイト数の上限: 個人利用範囲
参考までに、動画や非圧縮 PNG を大量に置くと帯域とビルド時間の両方が一気に削れる。WebP に変換する、外部の画像配信サービスに逃がすといった対策で、無料枠の範囲に収めやすくなる。
注意: 2026 年現在は料金体系が改定されている（要出典）。最新の上限は公式の Pricing を確認する。
よくある質問
Q. ビルドが失敗するときに最初に見るのはどこ？ A. Deploy ログの「Build command」の出力。ローカルでは動くが Netlify で落ちる場合、Node.js のバージョン違いか、package-lock.json と環境変数の差が原因になっていることが多い。
Q. ビルドコマンドを変更してサイトが見えなくなった。戻せる？ A. Deploys タブから過去の成功ビルドを開き、「Publish deploy」で巻き戻せる。先にロールバックしてから、原因のあるコミットを修正する流れが安全。
Q. 独自ドメインの設定はこの記事の範囲？ A. 含めていない。お名前.com で取得したドメインを Netlify に当てる手順は別記事に分けている。
Q. Netlify と Vercel / Cloudflare Pages はどう違う？ A. 静的サイトを GitHub から自動デプロイする、という核の体験は近い。料金体系・ビルド時間・エッジ機能の作りで差が出る（要出典）。2021 年の選定理由は「日本語情報が当時揃っていた」「VuePress のサンプル設定が見つかりやすかった」の 2 点だった。
まとめ
Netlify の初期設定は、GitHub と OAuth で繋ぎ、リポジトリを選び、ビルドコマンドと公開フォルダを 1 行ずつ指定する、それだけで一通り動く。HTTPS と再ビルドは自動で、最初に詰まりやすいのはビルドコマンドの指定ミスと、本人 PC からのアクセス除外漏れくらい。
次の作業として、独自ドメイン設定は別記事に分けている。アクセス計測の除外設定や、画像配信先の選び方は、別の機会に書き直す予定。
