💬 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が自動発動します。
📖 Claude が読む原文 SKILL.md(中身を展開)
この本文は AI(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)