本文详细介绍了如何在Netlify上为网站配置子域名，通过在项目根目录创建对应的文件夹来组织子域名内容，并结合Netlify的域名管理和重定向规则，将子域名流量精确导向特定文件夹。本教程涵盖项目结构准备、Netlify部署、DNS记录配置以及关键的Netlify重定向规则设置，确保子域名内容能被正确访问。
引言
在现代Web开发中，为网站的不同功能或项目设置子域名是一种常见的实践，例如将作品集放在 work.yourdomain.com。这有助于保持主站点的整洁，并为特定内容提供独立的访问路径。Netlify作为一个强大的静态站点托管平台，提供了灵活的方式来实现这一目标。本文将详细阐述如何在Netlify上，通过在项目根目录中创建特定文件夹，并结合DNS配置和Netlify的重定向功能，来成功设置和管理您的子域名。
核心概念：Netlify与文件夹映射
Netlify在部署时会处理整个代码仓库的内容。当您在根目录中创建了一个名为 work 的文件夹并放置了相应的代码时，这些内容在部署后将可以通过主域名下的路径（例如 yourdomain.com/work/）访问。要实现 work.yourdomain.com 直接指向 work 文件夹的内容，我们需要结合以下三个关键步骤：
- 物理文件夹结构： 在您的代码仓库中创建与子域名对应的文件夹。
- DNS配置： 将子域名指向您的Netlify站点。
- Netlify重定向规则： 告诉Netlify当请求来自该子域名时，应该从哪个内部路径提供内容。
步骤一：项目结构准备
首先，您需要在本地的项目仓库中，为主域名和子域名内容建立清晰的文件夹结构。
- 创建子域名文件夹： 在您的项目根目录（与您的 index.html 或 public 文件夹同级）创建一个与您想要的子域名名称相匹配的文件夹。例如，如果您想设置 work.yourdomain.com，则创建一个名为 work 的文件夹。
- 放置内容： 将所有属于该子域名的文件（HTML、CSS、JavaScript、图片等）放入这个新创建的 work 文件夹中。确保 work 文件夹内有一个 index.html 文件，作为该子域名的默认入口页面。
示例项目结构：
your-main-repository/ ├── index.html (主站点入口) ├── css/ ├── js/ ├── work/ (子域名 'work.yourdomain.com' 的内容) │ ├── index.html │ ├── style.css │ └── script.js ├── about/ (另一个子域名 'about.yourdomain.com' 的内容，可选) │ └── index.html └── netlify.toml (或 _redirects 文件，用于配置重定向)
步骤二：Netlify部署与域名管理
完成项目结构准备后，将您的代码推送到与Netlify连接的Git仓库（如GitHub、GitLab、Bitbucket）。Netlify会自动检测更改并部署您的站点。
- 部署主站点： 确保您的主站点 (yourdomain.com) 已在Netlify上成功部署并绑定了域名。
-
添加子域名到Netlify：
- 登录Netlify控制台，进入您的主站点。
- 导航到 Domain management（域名管理）页面。
- 在 Custom domains（自定义域名）部分，点击 Add a custom domain（添加自定义域名）。
- 输入您的子域名，例如 work.yourdomain.com，然后点击 Verify（验证）并 Add domain（添加域名）。
- Netlify会提示您需要配置DNS记录。
步骤三：DNS记录配置（在您的域名注册商处）
此步骤至关重要，它将告诉互联网 work.yourdomain.com 应该指向哪里。您需要在您的域名注册商（例如 Hover）的DNS管理界面进行配置。
- 获取Netlify DNS信息： 在Netlify的域名管理页面，当您添加子域名后，Netlify会提供需要添加的DNS记录类型和值。通常，对于子域名，您会添加一个 CNAME 记录。
-
在域名注册商处添加CNAME记录：
- 登录您的域名注册商（如Hover）的账户。
- 找到您的域名，并进入其DNS管理或高级DNS设置页面。
- 添加一条新的 CNAME 记录：
- Type (类型): CNAME
- Host/Name (主机/名称): work (只填写子域名的部分，不包含主域名)
- Value/Target (值/目标): 您的主Netlify站点的域名，例如 yourdomain.com 或者 yourdomain.netlify.app。如果您的主域名已通过Netlify DNS管理，通常直接指向 yourdomain.com 即可。如果主域名也通过 CNAME 指向 yourdomain.netlify.app，那么子域名也应指向 yourdomain.netlify.app。
示例 CNAME 记录配置：
| Type | Host | Value/Target | TTL (通常默认) |
|---|---|---|---|
| CNAME | work | yourdomain.com | 3600 |
注意： DNS更改可能需要一些时间（通常几分钟到几小时，最长可达48小时）才能在全球范围内生效（DNS传播）。
步骤四：Netlify重定向规则
仅仅将子域名指向Netlify站点是不够的，您还需要告诉Netlify，当请求 work.yourdomain.com 时，应该从您的 work 文件夹中提供内容。这可以通过在项目根目录创建 netlify.toml 文件或 _redirects 文件来实现。推荐使用 netlify.toml，因为它结构更清晰。
在您的项目根目录创建或编辑 netlify.toml 文件，并添加以下重定向规则：
# netlify.toml
[[redirects]]
from = "/*" # 匹配所有路径
to = "/work/:splat" # 将请求重定向到 /work/ 文件夹下对应的路径
status = 200 # 使用 200 状态码，表示内容已找到并提供
force = true # 强制执行此重定向，即使存在同名文件
conditions = {Host = ["work.yourdomain.com"]} # 仅当请求主机是 work.yourdomain.com 时才应用此规则规则解释：
- [[redirects]]: 定义一个重定向规则块。
- from = "/*": 匹配所有来自子域名的请求路径。
- to = "/work/:splat": 将匹配到的请求路径重定向到 /work/ 文件夹下对应的路径。:splat 会捕获 from 中 * 匹配到的任何内容，并将其追加到 to 路径中。例如，如果请求 work.yourdomain.com/about，它将被重定向到 /work/about。
- status = 200: 这不是一个传统的HTTP重定向（如301或302），而是一个内部URL重写。它告诉Netlify直接从 to 指定的路径提供内容，而浏览器仍然显示 work.yourdomain.com 的URL。
- force = true: 确保此规则优先于其他可能的默认行为。
- conditions = {Host = ["work.yourdomain.com"]}: 这是最关键的部分。它确保此重定向规则仅在请求的主机名是 work.yourdomain.com 时才会被应用。对于主域名 yourdomain.com 的请求，此规则将不会生效，从而不会影响主站点的正常访问。
将 netlify.toml 文件保存并推送到您的Git仓库。Netlify会自动检测并应用新的重定向规则。
注意事项与总结
- DNS传播时间： 配置DNS记录后，请耐心等待DNS传播完成。您可以使用在线DNS查询工具检查 work.yourdomain.com 是否已正确解析到您的Netlify站点。
- SSL证书： Netlify会自动为您的自定义域名（包括子域名）提供和管理免费的SSL证书。一旦DNS配置正确，通常在几分钟内就会自动启用HTTPS。
- 缓存问题： 如果更改后未能立即看到效果，请尝试清除浏览器缓存或使用无痕模式访问。
- 替代方案：独立Netlify站点： 对于更复杂的子域名或需要独立构建流程的子域名项目，您可以考虑在Netlify上创建一个全新的、独立的站点来托管子域名内容。这种情况下，子域名会直接指向这个新的Netlify站点，而不需要重定向规则来映射文件夹。这种方法在管理上可能更清晰，但会消耗Netlify的站点额度。本文介绍的方法适用于将子域名内容作为主站点仓库的一部分进行管理。
通过以上步骤，您就可以在Netlify上成功配置子域名，使其指向您项目根目录中的特定文件夹内容，从而实现更灵活和有组织的项目部署。
