💬 Netlifyデプロイ
ウェブサイトをNetlifyにデプロイし、プレビュー版や本番環境への公開、ホスティング、リンク設定などをCLIで実行するSkill。
📺 まず動画で見る(YouTube)
▶ 【最新版】Claude(クロード)完全解説!20以上の便利機能をこの動画1本で全て解説 ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Deploy web projects to Netlify using the Netlify CLI (`npx netlify`). Use when the user asks to deploy, host, publish, or link a site/repo on Netlify, including preview and production deploys.
🇯🇵 日本人クリエイター向け解説
ウェブサイトをNetlifyにデプロイし、プレビュー版や本番環境への公開、ホスティング、リンク設定などをCLIで実行するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o netlify-deploy.zip https://jpskill.com/download/430.zip && unzip -o netlify-deploy.zip && rm netlify-deploy.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/430.zip -OutFile "$d\netlify-deploy.zip"; Expand-Archive "$d\netlify-deploy.zip" -DestinationPath $d -Force; ri "$d\netlify-deploy.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
netlify-deploy.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
netlify-deployフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 7
💬 こう話しかけるだけ — サンプルプロンプト
- › netlify-deploy の使い方を教えて
- › netlify-deploy で何ができるか具体例で見せて
- › netlify-deploy を初めて使う人向けにステップを案内して
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Netlifyデプロイスキル
プロジェクトの構成とデプロイコンテキストをインテリジェントに検出し、Netlify CLIを使用してウェブプロジェクトをNetlifyにデプロイします。
概要
このスキルは、以下の方法でNetlifyデプロイを自動化します。
- Netlify CLI認証の検証
- プロジェクトの構成とフレームワークの検出
- 既存のサイトへのリンクまたは新規サイトの作成
- 本番環境またはプレビュー環境へのデプロイ
前提条件
- Netlify CLI: npx経由でインストールされます(グローバルインストールは不要です)。
- 認証: アクティブなログインセッションを持つNetlifyアカウント
- プロジェクト: 現在のディレクトリにある有効なウェブプロジェクト
- サンドボックスがデプロイのネットワーク呼び出しをブロックする場合、
sandbox_permissions=require_escalatedを付けて再実行してください。 - デプロイには数分かかる場合があります。適切なタイムアウト値を使用してください。
認証パターン
このスキルは、事前認証されたNetlify CLIアプローチを使用します。
npx netlify statusで認証ステータスを確認します。- 認証されていない場合、
npx netlify loginを通じてユーザーをガイドします。 - 認証を確立できない場合は、適切に失敗します。
認証には以下のいずれかを使用します。
- ブラウザベースのOAuth(主):
netlify loginがブラウザを開いて認証を行います。 - APIキー(代替):
NETLIFY_AUTH_TOKEN環境変数を設定します。
ワークフロー
1. Netlify CLI認証の検証
ユーザーがNetlifyにログインしているかを確認します。
npx netlify status
期待される出力パターン:
- ✅ 認証済み: ログインしているユーザーのメールアドレスとサイトリンクステータスが表示されます。
- ❌ 未認証: 「Not logged into any site」または認証エラーが表示されます。
認証されていない場合、ユーザーをガイドします。
npx netlify login
これにより、OAuth認証のためにブラウザウィンドウが開きます。ユーザーがログインを完了するのを待ち、netlify statusで再度確認します。
代替: APIキー認証
ブラウザ認証が利用できない場合、ユーザーは以下を設定できます。
export NETLIFY_AUTH_TOKEN=your_token_here
トークンはhttps://app.netlify.com/user/applications#personal-access-tokensで生成できます。
2. サイトリンクステータスの検出
netlify statusの出力から、以下を判断します。
- リンク済み: サイトがすでにNetlifyに接続されています(サイト名/URLが表示されます)。
- 未リンク: サイトをリンクまたは作成する必要があります。
3. 既存のサイトへのリンクまたは新規作成
すでにリンクされている場合 → ステップ4にスキップします。
リンクされていない場合、Gitリモートでリンクを試みます。
# プロジェクトがGitベースであるかを確認します
git remote show origin
# Gitベースの場合、リモートURLを抽出します
# 形式: https://github.com/username/repo または git@github.com:username/repo.git
# Gitリモートでリンクを試みます
npx netlify link --git-remote-url <REMOTE_URL>
リンクに失敗した場合(Netlifyにサイトが存在しない場合):
# 対話的に新しいサイトを作成します
npx netlify init
これにより、ユーザーは以下をガイドされます。
- チーム/アカウントの選択
- サイト名の設定
- ビルド設定の構成
- 必要に応じてnetlify.tomlの作成
4. 依存関係の検証
デプロイする前に、プロジェクトの依存関係がインストールされていることを確認します。
# npmプロジェクトの場合
npm install
# その他のパッケージマネージャーの場合、適切なコマンドを検出して使用します
# yarn install, pnpm install, etc.
5. Netlifyへのデプロイ
コンテキストに基づいてデプロイタイプを選択します。
プレビュー/ドラフトデプロイ(既存のサイトのデフォルト):
npx netlify deploy
これにより、テスト用のユニークなURLを持つデプロイプレビューが作成されます。
本番デプロイ(新規サイトまたは明示的な本番デプロイの場合):
npx netlify deploy --prod
これにより、ライブの本番URLにデプロイされます。
デプロイプロセス:
- CLIがビルド設定を検出します(netlify.tomlから、またはユーザーにプロンプトを表示します)。
- プロジェクトをローカルでビルドします。
- ビルドされたアセットをNetlifyにアップロードします。
- デプロイURLを返します。
6. 結果の報告
デプロイ後、ユーザーに以下を報告します。
- デプロイURL: このデプロイのユニークなURL
- サイトURL: 本番URL(本番デプロイの場合)
- デプロイログ: ログのNetlifyダッシュボードへのリンク
- 次のステップ: サイトまたはダッシュボードを表示するために
netlify openを提案します。
netlify.tomlの処理
netlify.tomlファイルが存在する場合、CLIはそれを自動的に使用します。存在しない場合、CLIは以下をプロンプトで尋ねます。
- ビルドコマンド: 例:
npm run build,next build - 公開ディレクトリ: 例:
dist,build,.next
一般的なフレームワークのデフォルト:
- Next.js: ビルドコマンド
npm run build、公開ディレクトリ.next - React (Vite): ビルドコマンド
npm run build、公開ディレクトリdist - 静的HTML: ビルドコマンドなし、現在のディレクトリを公開
スキルは、可能であればpackage.jsonからフレームワークを検出し、適切な設定を提案する必要があります。
完全なワークフローの例
# 1. 認証の確認
npx netlify status
# 認証されていない場合:
npx netlify login
# 2. サイトのリンク(必要な場合)
# まずGitベースのリンクを試みます
git remote show origin
npx netlify link --git-remote-url https://github.com/user/repo
# サイトが存在しない場合、新規作成します:
npx netlify init
# 3. 依存関係のインストール
npm install
# 4. デプロイ(テスト用のプレビュー)
npx netlify deploy
# 5. 本番環境へのデプロイ(準備ができたとき)
npx netlify deploy --prod
エラー処理
一般的な問題と解決策:
「Not logged in」
→ npx netlify loginを実行します。
「No site linked」
→ npx netlify linkまたはnpx netlify initを実行します。
「Build failed」 → netlify.tomlまたはCLIプロンプトでビルドコマンドと公開ディレクトリを確認します。 → 依存関係がインストールされていることを確認します。 → 特定のエラーについてはビルドログを確認します。
「Publish directory not found」 → ビルドコマンドが正常に実行されたことを確認します。 → 公開ディレクトリのパスが正しいことを確認します。
トラブルシューティング
昇格されたネットワークアクセス
ネットワークの問題(タイムアウト、DNSエラー、接続リセット)によりデプロイが失敗する場合、昇格された権限(sandbox_permissions=require_escalatedを使用)でデプロイを再実行してください。サンドボックスのネットワークがアウトバウンドリクエストをブロックする場合、デプロイには昇格されたネットワークアクセスが必要です。
ユーザーへのガイダンス例:
The deploy needs escalated network access to deploy to Netlify. I can rerun the command with escalated permissions—want me to proceed?
環境変数
シークレットと設定について:
- シークレットをGitにコミットしないでください。
- 設定します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Netlify Deployment Skill
Deploy web projects to Netlify using the Netlify CLI with intelligent detection of project configuration and deployment context.
Overview
This skill automates Netlify deployments by:
- Verifying Netlify CLI authentication
- Detecting project configuration and framework
- Linking to existing sites or creating new ones
- Deploying to production or preview environments
Prerequisites
- Netlify CLI: Installed via npx (no global install required)
- Authentication: Netlify account with active login session
- Project: Valid web project in current directory
- When sandboxing blocks the deployment network calls, rerun with
sandbox_permissions=require_escalated. - The deployment might take a few minutes. Use appropriate timeout values.
Authentication Pattern
The skill uses the pre-authenticated Netlify CLI approach:
- Check authentication status with
npx netlify status - If not authenticated, guide user through
npx netlify login - Fail gracefully if authentication cannot be established
Authentication uses either:
- Browser-based OAuth (primary):
netlify loginopens browser for authentication - API Key (alternative): Set
NETLIFY_AUTH_TOKENenvironment variable
Workflow
1. Verify Netlify CLI Authentication
Check if the user is logged into Netlify:
npx netlify status
Expected output patterns:
- ✅ Authenticated: Shows logged-in user email and site link status
- ❌ Not authenticated: "Not logged into any site" or authentication error
If not authenticated, guide the user:
npx netlify login
This opens a browser window for OAuth authentication. Wait for user to complete login, then verify with netlify status again.
Alternative: API Key authentication
If browser authentication isn't available, users can set:
export NETLIFY_AUTH_TOKEN=your_token_here
Tokens can be generated at: https://app.netlify.com/user/applications#personal-access-tokens
2. Detect Site Link Status
From netlify status output, determine:
- Linked: Site already connected to Netlify (shows site name/URL)
- Not linked: Need to link or create site
3. Link to Existing Site or Create New
If already linked → Skip to step 4
If not linked, attempt to link by Git remote:
# Check if project is Git-based
git remote show origin
# If Git-based, extract remote URL
# Format: https://github.com/username/repo or git@github.com:username/repo.git
# Try to link by Git remote
npx netlify link --git-remote-url <REMOTE_URL>
If link fails (site doesn't exist on Netlify):
# Create new site interactively
npx netlify init
This guides user through:
- Choosing team/account
- Setting site name
- Configuring build settings
- Creating netlify.toml if needed
4. Verify Dependencies
Before deploying, ensure project dependencies are installed:
# For npm projects
npm install
# For other package managers, detect and use appropriate command
# yarn install, pnpm install, etc.
5. Deploy to Netlify
Choose deployment type based on context:
Preview/Draft Deploy (default for existing sites):
npx netlify deploy
This creates a deploy preview with a unique URL for testing.
Production Deploy (for new sites or explicit production deployments):
npx netlify deploy --prod
This deploys to the live production URL.
Deployment process:
- CLI detects build settings (from netlify.toml or prompts user)
- Builds the project locally
- Uploads built assets to Netlify
- Returns deployment URL
6. Report Results
After deployment, report to user:
- Deploy URL: Unique URL for this deployment
- Site URL: Production URL (if production deploy)
- Deploy logs: Link to Netlify dashboard for logs
- Next steps: Suggest
netlify opento view site or dashboard
Handling netlify.toml
If a netlify.toml file exists, the CLI uses it automatically. If not, the CLI will prompt for:
- Build command: e.g.,
npm run build,next build - Publish directory: e.g.,
dist,build,.next
Common framework defaults:
- Next.js: build command
npm run build, publish.next - React (Vite): build command
npm run build, publishdist - Static HTML: no build command, publish current directory
The skill should detect framework from package.json if possible and suggest appropriate settings.
Example Full Workflow
# 1. Check authentication
npx netlify status
# If not authenticated:
npx netlify login
# 2. Link site (if needed)
# Try Git-based linking first
git remote show origin
npx netlify link --git-remote-url https://github.com/user/repo
# If no site exists, create new one:
npx netlify init
# 3. Install dependencies
npm install
# 4. Deploy (preview for testing)
npx netlify deploy
# 5. Deploy to production (when ready)
npx netlify deploy --prod
Error Handling
Common issues and solutions:
"Not logged in"
→ Run npx netlify login
"No site linked"
→ Run npx netlify link or npx netlify init
"Build failed" → Check build command and publish directory in netlify.toml or CLI prompts → Verify dependencies are installed → Review build logs for specific errors
"Publish directory not found" → Verify build command ran successfully → Check publish directory path is correct
Troubleshooting
Escalated Network Access
If deployment fails due to network issues (timeouts, DNS errors, connection resets), rerun the deploy with escalated permissions (use sandbox_permissions=require_escalated). The deploy requires escalated network access when sandbox networking blocks outbound requests.
Example guidance to the user:
The deploy needs escalated network access to deploy to Netlify. I can rerun the command with escalated permissions—want me to proceed?
Environment Variables
For secrets and configuration:
- Never commit secrets to Git
- Set in Netlify dashboard: Site Settings → Environment Variables
- Access in builds via
process.env.VARIABLE_NAME
Tips
- Use
netlify deploy(no--prod) first to test before production - Run
netlify opento view site in Netlify dashboard - Run
netlify logsto view function logs (if using Netlify Functions) - Use
netlify devfor local development with Netlify Functions
Reference
- Netlify CLI Docs: https://docs.netlify.com/cli/get-started/
- netlify.toml Reference: https://docs.netlify.com/configure-builds/file-based-configuration/
Bundled References (Load As Needed)
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (7,026 bytes)
- 📎 assets/netlify-small.svg (1,291 bytes)
- 📎 assets/netlify.png (933 bytes)
- 📎 LICENSE.txt (10,776 bytes)
- 📎 references/cli-commands.md (2,652 bytes)
- 📎 references/deployment-patterns.md (6,702 bytes)
- 📎 references/netlify-toml.md (3,972 bytes)