netlify-deploy

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Netlify Deployment Skill

Netlify部署技能

Deploy web projects to Netlify using the Netlify CLI with intelligent detection of project configuration and deployment context.
使用Netlify CLI将Web项目部署到Netlify,可智能检测项目配置和部署上下文。

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
本技能通过以下流程实现Netlify部署自动化:
  • 验证Netlify CLI认证状态
  • 检测项目配置和使用的框架
  • 关联已有站点或创建新站点
  • 部署到生产环境或预览环境

Prerequisites

前提条件

  • Netlify CLI: Installed via npx (no global install required)
  • Authentication: Netlify account with active login session
  • Project: Valid web project in current directory
  • Network access: Deployment requires outbound network calls. If sandboxing blocks these, the agent may need to request elevated permissions or prompt the user.
  • Timeouts: Deployments can take a few minutes. Use appropriate timeout values for CLI commands.
  • Netlify CLI:通过npx安装(无需全局安装)
  • 认证:拥有有效登录会话的Netlify账号
  • 项目:当前目录下存在有效的Web项目
  • 网络访问:部署需要出站网络请求。如果沙箱环境阻止了请求,Agent可能需要申请更高权限或提示用户处理。
  • 超时设置:部署可能需要几分钟时间,请为CLI命令设置合适的超时值。

Authentication Pattern

认证模式

The skill uses the pre-authenticated Netlify CLI approach:
  1. Check authentication status with
    npx netlify status
  2. If not authenticated, guide user through
    npx netlify login
  3. Fail gracefully if authentication cannot be established
Authentication uses either:
  • Browser-based OAuth (primary):
    netlify login
    opens browser for authentication
  • API Key (alternative): Set
    NETLIFY_AUTH_TOKEN
    environment variable
本技能采用预认证Netlify CLI方案:
  1. 通过
    npx netlify status
    检查认证状态
  2. 若未认证,引导用户执行
    npx netlify login
    完成登录
  3. 若无法完成认证则优雅终止流程
支持两种认证方式:
  • 基于浏览器的OAuth(首选方式):
    netlify login
    会打开浏览器完成认证
  • API Key(替代方式):设置
    NETLIFY_AUTH_TOKEN
    环境变量

Workflow

工作流程

1. Verify Netlify CLI Authentication

1. 验证Netlify CLI认证状态

Check if the user is logged into Netlify:
bash
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:
bash
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:
bash
export NETLIFY_AUTH_TOKEN=your_token_here
检查用户是否已登录Netlify:
bash
npx netlify status
预期输出特征
  • ✅ 已认证:显示登录用户邮箱和站点关联状态
  • ❌ 未认证:提示「Not logged into any site」或认证错误
若未认证,引导用户执行:
bash
npx netlify login
该命令会打开浏览器窗口进行OAuth认证。等待用户完成登录后,再次执行
netlify status
验证状态。
替代方案:API Key认证
如果无法使用浏览器认证,用户可以设置环境变量:
bash
export NETLIFY_AUTH_TOKEN=your_token_here

2. Detect Site Link Status

2. 检测站点关联状态

From
netlify status
output, determine:
  • Linked: Site already connected to Netlify (shows site name/URL)
  • Not linked: Need to link or create site
通过
netlify status
的输出判断:
  • 已关联:站点已经连接到Netlify(会显示站点名称/URL)
  • 未关联:需要关联现有站点或创建新站点

3. Link to Existing Site or Create New

3. 关联现有站点或创建新站点

If already linked → Skip to step 4
If not linked, attempt to link by Git remote:
bash
undefined
如果已关联 → 直接跳转到第4步
如果未关联,尝试通过Git远程仓库关联:
bash
undefined

Check if project is Git-based

检查项目是否基于Git管理

git remote show origin
git remote show origin

If Git-based, extract remote URL

如果是Git项目,提取远程仓库URL

Format: https://github.com/username/repo or git@github.com:username/repo.git

格式:https://github.com/username/repogit@github.com:username/repo.git

Try to link by Git remote

尝试通过Git远程仓库地址关联

npx netlify link --git-remote-url <REMOTE_URL>

**If link fails** (site doesn't exist on Netlify):

```bash
npx netlify link --git-remote-url <REMOTE_URL>

**如果关联失败**(Netlify上不存在对应站点):

```bash

Create new site interactively

交互式创建新站点

npx netlify init

This guides user through:
1. Choosing team/account
2. Setting site name
3. Configuring build settings
4. Creating netlify.toml if needed
npx netlify init

该命令会引导用户完成以下操作:
1. 选择团队/账号
2. 设置站点名称
3. 配置构建设置
4. 必要时创建netlify.toml配置文件

4. Verify Dependencies

4. 验证依赖安装

Before deploying, ensure project dependencies are installed:
bash
undefined
部署前,确保项目依赖已安装:
bash
undefined

For npm projects

针对npm项目

npm install
npm install

For other package managers, detect and use appropriate command

针对其他包管理器,检测后使用对应的命令

yarn install, pnpm install, etc.

yarn install, pnpm install, 等等

undefined
undefined

5. Deploy to Netlify

5. 部署到Netlify

Choose deployment type based on context:
Preview/Draft Deploy (default for existing sites):
bash
npx netlify deploy
This creates a deploy preview with a unique URL for testing.
Production Deploy (for new sites or explicit production deployments):
bash
npx netlify deploy --prod
This deploys to the live production URL.
Deployment process:
  1. CLI detects build settings (from netlify.toml or prompts user)
  2. Builds the project locally
  3. Uploads built assets to Netlify
  4. Returns deployment URL
根据上下文选择部署类型:
预览/草稿部署(已有站点的默认选项):
bash
npx netlify deploy
该命令会生成一个带唯一URL的部署预览版本,用于测试。
生产环境部署(用于新站点或明确要求生产部署的场景):
bash
npx netlify deploy --prod
该命令会部署到正式的生产环境URL。
部署流程
  1. CLI检测构建设置(从netlify.toml读取或提示用户输入)
  2. 在本地构建项目
  3. 将构建后的资源上传到Netlify
  4. 返回部署URL

6. Report Results

6. 反馈部署结果

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 open
    to view site or dashboard
部署完成后,向用户反馈以下信息:
  • 部署URL:本次部署对应的唯一访问地址
  • 站点URL:生产环境URL(如果是生产部署)
  • 部署日志:Netlify控制台的日志访问链接
  • 后续步骤:建议使用
    netlify open
    查看站点或控制台

Handling netlify.toml

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
    , publish
    dist
  • Static HTML: no build command, publish current directory
The skill should detect framework from
package.json
if possible and suggest appropriate settings.
如果项目中存在
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
检测项目使用的框架,并给出合适的配置建议。

Example Full Workflow

完整流程示例

bash
undefined
bash
undefined

1. Check authentication

1. 检查认证状态

npx netlify status
npx netlify status

If not authenticated:

如果未认证:

npx netlify login
npx netlify login

2. Link site (if needed)

2. 关联站点(如果需要)

Try Git-based linking first

优先尝试基于Git的关联

git remote show origin npx netlify link --git-remote-url https://github.com/user/repo
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
npx netlify init

3. Install dependencies

3. 安装依赖

npm install
npm install

4. Deploy (preview for testing)

4. 部署(预览版本用于测试)

npx netlify deploy
npx netlify deploy

5. Deploy to production (when ready)

5. 部署到生产环境(确认无误后执行)

npx netlify deploy --prod
undefined
npx netlify deploy --prod
undefined

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
常见问题及解决方案:
「Not logged in」 → 执行
npx netlify login
「No site linked」 → 执行
npx netlify link
npx netlify init
「Build failed」 → 检查netlify.toml或CLI提示中的构建命令和发布目录是否正确 → 验证依赖已安装 → 查看构建日志定位具体错误
「Publish directory not found」 → 验证构建命令执行成功 → 检查发布目录路径是否正确

Environment Variables

环境变量

For secrets and configuration:
  1. Never commit secrets to Git
  2. Set in Netlify dashboard: Site Settings → Environment Variables
  3. Access in builds via
    process.env.VARIABLE_NAME
密钥和配置的使用建议:
  1. 永远不要将密钥提交到Git仓库
  2. 在Netlify控制台设置:站点设置 → 环境变量
  3. 在构建过程中通过
    process.env.变量名
    访问

Tips

小贴士

  • Use
    netlify deploy
    (no
    --prod
    ) first to test before production
  • Run
    netlify open
    to view site in Netlify dashboard
  • Run
    netlify logs
    to view function logs (if using Netlify Functions)
  • Use
    netlify dev
    for local development with Netlify Functions
  • 生产部署前先执行不带
    --prod
    netlify deploy
    测试部署效果
  • 执行
    netlify open
    可在Netlify控制台中查看站点
  • 执行
    netlify logs
    可查看函数日志(如果使用Netlify Functions)
  • 使用
    netlify dev
    可在本地开发环境中运行Netlify Functions

Reference

参考资料

References

相关参考

  • CLI commands
  • Deployment patterns
  • netlify.toml guide
  • CLI命令
  • 部署模式
  • netlify.toml指南