第一个项目部署 #

部署方式概览 #

Netlify 支持三种主要部署方式：

方式 适用场景 难度
Git 集成 持续部署、团队协作 ⭐⭐
拖拽部署 快速预览、静态文件 ⭐
CLI 部署 本地开发、自动化脚本 ⭐⭐⭐

方式一：Git 集成部署（推荐） #

准备工作 #

  1. GitHub 账号
  2. Git 基础知识
  3. 一个前端项目

步骤1：创建项目 #

创建一个简单的静态网站：

html 
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个 Netlify 站点</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      line-height: 1.6;
    }
    h1 { color: #00c7b7; }
    .card {
      background: #f5f5f5;
      padding: 1.5rem;
      border-radius: 8px;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <h1>🚀 Hello Netlify!</h1>
  <div class="card">
    <p>这是我的第一个 Netlify 部署站点。</p>
    <p>部署时间：<span id="time"></span></p>
  </div>
  <script>
    document.getElementById('time').textContent = new Date().toLocaleString('zh-CN');
  </script>
</body>
</html>

步骤2：推送到 GitHub #

bash 
# 初始化 Git 仓库
git init

# 添加文件
git add .

# 提交
git commit -m "Initial commit"

# 创建 GitHub 仓库后，添加远程仓库
git remote add origin https://github.com/username/my-netlify-site.git

# 推送
git push -u origin main

步骤3：在 Netlify 导入项目 #

text 
1. 登录 Netlify 控制台
2. 点击 "Add new site" → "Import an existing project"
3. 选择 "GitHub"
4. 授权 Netlify 访问 GitHub
5. 选择要部署的仓库

步骤4：配置构建设置 #

text 
┌─────────────────────────────────────────────────┐
│ Site settings                                   │
├─────────────────────────────────────────────────┤
│ Branch to deploy: main                          │
│ Build command: (留空或 npm run build)           │
│ Publish directory: . 或 dist                    │
└─────────────────────────────────────────────────┘

对于纯静态站点：

  • Build command: 留空
  • Publish directory: . 或 /

对于前端框架项目：

框架 Build command Publish directory
React (CRA) npm run build build
Vue (Vite) npm run build dist
Next.js npm run build .next
Hugo hugo public
Hexo hexo generate public

步骤5：部署 #

点击 “Deploy site” 开始部署。

text 
部署流程：
┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 初始化    │ → │ 拉取代码  │ → │ 执行构建  │ → │ 部署上线  │
└──────────┘    └──────────┘    └──────────┘    └──────────┘

步骤6：查看部署结果 #

部署完成后，Netlify 会分配一个临时域名：

text 
https://random-name-12345.netlify.app

方式二：拖拽部署 #

适用场景 #

  • 快速预览静态页面
  • 没有 Git 仓库
  • 临时分享

操作步骤 #

text 
1. 准备好网站文件夹（包含 index.html）
2. 访问 https://app.netlify.com/drop
3. 将文件夹拖拽到页面中
4. 等待上传完成

示例 #

text 
my-website/
├── index.html
├── styles/
│   └── main.css
└── scripts/
    └── app.js

直接拖拽 my-website 文件夹即可。

注意事项 #

  • 拖拽部署不会自动更新
  • 不支持构建过程
  • 适合纯静态文件

方式三：CLI 部署 #

安装 CLI #

bash 
npm install -g netlify-cli

登录 #

bash 
netlify login

浏览器会打开授权页面，点击授权即可。

初始化项目 #

bash 
# 在项目目录下执行
netlify init

交互式配置：

text 
? What would you like to do? 
  ❯ Create & configure a new site
    Link this directory to an existing site

? Team: My Team

? Site name (optional): my-awesome-site

? Your build command (hugo build/yarn run build/etc): npm run build

? Directory to deploy (blank for current dir): dist

本地预览 #

bash 
netlify dev

启动本地开发服务器，模拟 Netlify 环境。

部署预览 #

bash 
netlify deploy

生成一个预览 URL，用于测试。

生产部署 #

bash 
netlify deploy --prod

部署到生产环境。

部署状态查看 #

控制台查看 #

text 
Site overview → Deploys

可以看到所有部署记录：

  • 部署时间
  • 部署状态
  • 提交信息
  • 部署日志

CLI 查看 #

bash 
netlify deploy:list

部署状态说明 #

状态 说明
Building 正在构建
Deploying 正在部署
Published 部署成功
Failed 部署失败

部署日志 #

查看构建日志 #

text 
Deploys → 点击具体部署 → Deploy log

日志示例：

text 
10:30:00 AM: Build ready to start
10:30:01 AM: build-image version: 1.0.0
10:30:02 AM: Cloning repository
10:30:05 AM: Installing dependencies
10:30:15 AM: npm run build
10:30:30 AM: Build completed
10:30:31 AM: Starting deploy
10:30:35 AM: Deploy is live!

常见构建错误 #

错误1：找不到构建命令

text 
Error: "build" script not found

解决：检查 package.json 中的 scripts 配置。

错误2：依赖安装失败

text 
npm ERR! code ERESOLVE

解决：尝试删除 package-lock.json 或使用 --legacy-peer-deps。

错误3：内存不足

text 
JavaScript heap out of memory

解决：在环境变量中设置 NODE_OPTIONS="--max_old_space_size=4096"。

自动部署 #

Git 触发部署 #

每次推送到配置的分支，Netlify 会自动触发部署：

text 
git add .
git commit -m "Update content"
git push

Netlify 自动：

  1. 拉取最新代码
  2. 执行构建命令
  3. 部署到生产环境

PR 预览部署 #

每个 Pull Request 都会生成独立的预览链接：

text 
https://deploy-preview-123--my-site.netlify.app

回滚部署 #

控制台回滚 #

text 
Deploys → 选择历史部署 → Click "Publish deploy"

CLI 回滚 #

bash 
netlify deploy:list
netlify deploy:restore --deploy-id=xxx

部署通知 #

配置通知 #

text 
Site settings → Build & deploy → Deploy notifications

支持的通知方式：

  • Email（邮件）
  • Slack
  • Webhook

Webhook 示例 #

json 
{
  "event": "deploy_succeeded",
  "payload": {
    "site_id": "xxx",
    "deploy_id": "xxx",
    "branch": "main",
    "deploy_url": "https://my-site.netlify.app"
  }
}

实战练习 #

练习1：部署纯静态站点 #

  1. 创建包含 index.html 的文件夹
  2. 使用拖拽部署
  3. 访问生成的 URL

练习2：部署 React 应用 #

bash 
# 创建 React 应用
npx create-react-app my-app
cd my-app

# 推送到 GitHub
git remote add origin https://github.com/username/my-app.git
git push -u origin main

# 在 Netlify 导入项目
# Build command: npm run build
# Publish directory: build

练习3：使用 CLI 部署 #

bash 
# 创建项目
mkdir my-cli-site
cd my-cli-site
echo "<h1>Hello CLI</h1>" > index.html

# 初始化并部署
netlify init
netlify deploy --prod

下一步 #

恭喜你完成了第一个项目部署！接下来学习 部署配置详解 深入了解 Netlify 的配置选项。

最后更新：2026-03-28