---

Netlify 部署教程：快速上线你的网站

在当今的数字时代，拥有一个个人网站或项目展示页面变得越来越普遍。然而，传统的网站部署过程往往复杂且耗时。幸运的 Netlify 等现代化部署平台应运而生，它以其惊人的简便性、强大的功能和免费套餐，彻底改变了前端开发者的部署体验。

本文将手把手教你如何使用 Netlify，将你的网站从 Git 仓库快速部署上线，并享受持续部署、自定义域名等高级功能。

什么是 Netlify？

Netlify 是一个一体化的 Web 开发平台，它将持续集成、交付和托管服务整合到一个无缝的工作流程中。它特别适用于静态网站和单页应用 (SPA)。Netlify 的核心优势在于：

• 极速部署：连接 Git 仓库后，每次代码提交都会自动触发构建和部署。
• 免费套餐：提供慷慨的免费套餐，足以满足大多数个人项目和小型网站的需求。
• 全球 CDN：通过全球内容分发网络 (CDN) 加速网站访问速度。
• 自动 HTTPS：免费提供 SSL 证书，确保网站安全。
• 自定义域名：轻松绑定自己的域名。
• 强大的附加功能：如表单处理、无服务器函数 (Lambda)、A/B 测试等。

部署前的准备

在开始部署之前，请确保你已经具备以下条件：

1. 一个准备好的网站项目：可以是纯 HTML/CSS/JavaScript 的静态网站，也可以是使用 React, Vue, Angular, Next.js, Hugo, Jekyll 等框架或静态网站生成器构建的项目。
2. 一个 Git 仓库：你的网站代码必须托管在 GitHub、GitLab 或 Bitbucket 等 Git 平台。这是 Netlify 实现持续部署的基础。
3. 一个 Netlify 账户：如果你还没有，可以访问 Netlify 官网 使用你的 Git 账户（GitHub 推荐）或邮箱注册。

第一步：连接 Git 仓库并部署

这是将你的网站部署到 Netlify 最核心的步骤。

1. 登录 Netlify：
   访问 app.netlify.com 并使用你的账户登录。

2. 点击 “Add new site” (添加新站点)：
   在 Netlify 后台页面的右上角，点击 “Add new site” 按钮，然后选择 “Import an existing project”。

3. 选择 Git 提供商：
   Netlify 会要求你选择你的代码托管平台。选择你存放网站代码的 Git 提供商（如 GitHub）。你可能需要授权 Netlify 访问你的 Git 仓库。

4. 选择你的仓库：
   授权成功后，Netlify 会列出你所有可用的 Git 仓库。找到并选择你想要部署的网站项目仓库。

5. 配置构建设置：
   这是关键一步，Netlify 会根据你项目的类型自动推断一些设置，但你可能需要手动调整。

   • Owner：通常是你的 Git 用户名。
   • Repository：你选择的 Git 仓库。
   • Base directory (基本目录)：如果你的网站项目不在仓库的根目录，而是在一个子文件夹中（例如 my-project/website），你需要在这里指定这个子文件夹的路径。如果项目就在根目录，可以留空。
   • Build command (构建命令)：这是 Netlify 用来构建你的网站的命令。
     • 对于纯静态 HTML/CSS/JS 网站，通常不需要构建，可以留空。
     • 对于使用框架或静态网站生成器构建的项目，例如：
       • React/Next.js: npm run build 或 yarn build
       • Vue/Nuxt.js: npm run build 或 yarn build
       • Gatsby: gatsby build
       • Hugo: hugo
       • Jekyll: jekyll build
   • Publish directory (发布目录)：这是你的网站构建完成后，Netlify 需要托管的静态文件所在的目录。
     • React/Next.js: build 或 out (depending on configuration)
     • Vue/Nuxt.js: dist
     • Gatsby: public
     • Hugo: public
     • Jekyll: _site
   • 高级设置 (Advanced build settings)：如果你有特定的环境变量，可以在这里添加。

   确认所有设置无误后，点击 “Deploy site” (部署站点)。

6. 部署进行中：
   Netlify 会立即开始克隆你的仓库，运行构建命令，并将构建产物部署到其 CDN 上。你可以看到部署日志，实时了解部署进度。

7. 部署完成！
   几分钟后（具体时间取决于项目大小和复杂性），你的网站就会部署成功！Netlify 会为你分配一个随机的子域名（例如 elegant-sutherland-f09c2d.netlify.app）。你可以点击这个链接来访问你的网站。

第二步：配置自定义域名 (可选但推荐)

一个自定义域名会让你的网站看起来更专业。

1. 进入站点设置：
   在 Netlify 后台，点击你刚刚部署的网站，然后导航到 “Domain settings” (域名设置)。

2. 添加自定义域名：
   在 “Custom domains” 部分，点击 “Add a custom domain” (添加自定义域名)。输入你购买的域名（例如 yourdomain.com），然后点击 “Verify” (验证) 和 “Add domain” (添加域名)。

3. 配置 DNS 记录：
   Netlify 会提示你如何配置 DNS 记录。你有两种主要选择：

   • 推荐：使用 Netlify DNS：如果你希望 Netlify 完全管理你的 DNS，你可以将你的域名服务器 (Nameservers) 指向 Netlify 提供的服务器。这是最简单且功能最全的选项。
   • 手动配置 DNS 记录：如果你想继续使用当前的 DNS 提供商，Netlify 会提供 CNAME 和 A 记录。你需要登录你的域名注册商（如 GoDaddy, Namecheap, 阿里云）的后台，将这些记录添加到你的域名的 DNS 设置中。
     • A 记录：指向 Netlify 的 IP 地址 (通常是 75.2.60.5)
     • CNAME 记录：将 www.yourdomain.com 指向你的 Netlify 站点子域名 (例如 elegant-sutherland-f09c2d.netlify.app)

   重要提示：DNS 记录的更新可能需要一些时间（通常几分钟到几小时，最长可达 48 小时）才能全球生效。

4. 自动 HTTPS：
   一旦你的域名绑定成功并且 DNS 生效，Netlify 会自动为你的自定义域名配置免费的 SSL 证书 (由 Let’s Encrypt 提供)，确保你的网站通过 HTTPS 安全访问。你不需要做任何额外操作。

第三步：享受持续部署 (Continuous Deployment)

这是 Netlify 最强大的功能之一。

从现在开始，每当你向 Git 仓库的主分支（通常是 main 或 master）提交新的代码并 push 到远程仓库时，Netlify 都会自动检测到这些更改，并重复以下过程：

1. 拉取最新代码。
2. 运行你配置的构建命令。
3. 将新构建的网站部署上线。

这意味着你每次更新代码后，只需 git push，你的网站就会自动更新，无需手动上传任何文件。

其他常用功能 (进阶)

• Forms (表单)：在 HTML 中添加 data-netlify="true" 属性，即可免费获得一个易于使用的表单后端，无需编写任何服务器端代码。
• Redirects (重定向)：通过 _redirects 文件或 netlify.toml 配置重定向规则，例如将旧链接重定向到新链接，或创建友好的 URL。
• Environment Variables (环境变量)：在站点设置中配置环境变量，这些变量可以在构建过程中被你的网站项目使用，例如 API 密钥等。
• Netlify CLI：使用命令行工具进行部署、管理和测试本地功能。

为什么选择 Netlify？

• 开发者友好：深度集成 Git 工作流，让部署变得轻而易举。
• 性能卓越：全球 CDN 和智能缓存机制确保网站加载迅速。
• 成本效益：免费套餐功能强大，极大地降低了个人和小型项目的运维成本。
• 生态系统完善：除了核心部署，还提供表单、函数、身份验证等丰富功能。

总结

Netlify 为现代前端网站的部署提供了一个优雅、高效且免费的解决方案。通过本文的教程，你应该已经能够将你的网站成功部署上线，并体验到持续部署的便利。现在，尽情享受你的新网站吧！如果你在部署过程中遇到任何问题，Netlify 的官方文档和社区资源都非常丰富，值得参考。

---