Netlify 简介 #

什么是 Netlify？ #

Netlify 是一个现代化的静态网站托管平台，专为 JAMstack 架构设计。它将静态网站、自动化部署和无服务器功能整合在一起，为开发者提供了一站式的网站托管解决方案。

核心定位 #

text

┌─────────────────────────────────────────────────────────┐
│                      Netlify                            │
│                                                         │
│   ┌─────────┐   ┌─────────┐   ┌─────────┐             │
│   │  构建   │ → │  部署   │ → │  托管   │             │
│   └─────────┘   └─────────┘   └─────────┘             │
│                                                         │
│   ┌─────────┐   ┌─────────┐   ┌─────────┐             │
│   │  CDN    │   │ 函数    │   │  表单   │             │
│   └─────────┘   └─────────┘   └─────────┘             │
└─────────────────────────────────────────────────────────┘

Netlify 与 JAMstack #

什么是 JAMstack？ #

JAMstack 是一种现代网站架构：

组成部分	含义	说明
J	JavaScript	客户端动态功能
A	APIs	后端服务抽象为 API
M	Markup	预构建的静态标记

为什么 Netlify 适合 JAMstack？ #

text

传统架构：
用户请求 → 服务器 → 数据库查询 → 动态生成页面 → 返回

JAMstack 架构：
用户请求 → CDN → 返回预构建的静态页面（毫秒级响应）

核心功能 #

1. 自动化部署 #

text

Git Push → 触发构建 → 自动部署 → 全球分发

特性	说明
Git 集成	支持 GitHub、GitLab、Bitbucket
自动构建	代码推送自动触发构建
预览部署	每个 PR 生成独立预览链接
回滚部署	一键回滚到任意历史版本

2. 全球 CDN #

text

┌──────────┐
│ 用户请求  │
└────┬─────┘
     │
     ▼
┌──────────────────────────────────┐
│         Netlify Edge Network      │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│  │美国 │ │欧洲 │ │亚洲 │ │其他 ││
│  └─────┘ └─────┘ └─────┘ └─────┘│
└──────────────────────────────────┘
     │
     ▼
┌──────────┐
│ 就近响应  │
└──────────┘

3. Serverless Functions #

无需管理服务器即可运行后端代码：

javascript

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello World' })
  }
}

4. 表单处理 #

无需后端即可处理表单：

html

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">提交</button>
</form>

与其他平台对比 #

Netlify vs Vercel #

特性	Netlify	Vercel
定位	静态站点 + JAMstack	前端框架优先
Next.js 支持	支持	原生优化
函数支持	AWS Lambda	Edge Functions
表单处理	内置	需要第三方
免费额度	100GB/月	100GB/月

Netlify vs GitHub Pages #

特性	Netlify	GitHub Pages
构建系统	强大	基础
自定义域名	支持	支持
HTTPS	自动	自动
函数支持	支持	不支持
表单处理	内置	不支持
私有仓库	支持	付费功能

应用场景 #

1. 个人博客 #

text

Hugo/Hexo/Jekyll → Netlify 自动部署 → 全球 CDN 加速

2. 文档站点 #

text

VuePress/Docusaurus → Netlify 托管 → 快速访问

3. 企业官网 #

text

静态页面 + 表单收集 → Netlify 托管 → 无需服务器

4. SPA 应用 #

text

React/Vue/Angular → Netlify 构建 → CDN 分发

5. 电商前端 #

text

静态页面 + Serverless API → Netlify 托管 → 高性能

Netlify CLI #

安装 #

bash

npm install -g netlify-cli

常用命令 #

bash

# 登录
netlify login

# 初始化项目
netlify init

# 本地开发
netlify dev

# 部署预览
netlify deploy

# 生产部署
netlify deploy --prod

# 查看状态
netlify status

定价方案 #

免费方案 #

资源	限额
带宽	100GB/月
构建时间	300分钟/月
并发构建	1个
函数调用	125K/月
表单提交	100/月

Pro 方案（$19/月） #

资源	限额
带宽	400GB/月
构建时间	1000分钟/月
并发构建	3个
函数调用	2M/月
表单提交	1000/月

快速体验 #

1. 创建简单站点 #

html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个 Netlify 站点</title>
</head>
<body>
  <h1>Hello Netlify!</h1>
</body>
</html>

2. 部署方式 #

方式一：拖拽部署

访问 app.netlify.com/drop，直接拖拽文件夹即可部署。

方式二：Git 集成

将代码推送到 GitHub
在 Netlify 导入仓库
自动构建部署

方式三：CLI 部署

bash

netlify deploy --prod

下一步 #

现在你已经了解了 Netlify 的基本概念，接下来学习账号注册与配置开始实际操作！