使用Netlify和Hover高效设置网站子域名教程

本教程详细指导您如何利用Netlify和Hover，通过简单的文件结构组织和Netlify的灵活部署配置，为您的网站设置子域名。文章将涵盖从代码组织到DNS记录配置的全流程，确保您能轻松为特定内容（如作品集）创建独立的子域访问，并享受Netlify自动化的部署与SSL管理。

理解Netlify子域名部署策略

在Netlify上设置子域名（例如 work.yourdomain.com），最佳实践通常是利用其对多站点部署和单仓库多应用（monorepo）的支持。这意味着您可以在一个Git仓库中管理主站和子站点的代码，并通过Netlify的构建配置将它们作为独立的站点进行部署。核心思想是：子域名的内容将存放在主仓库的一个特定子文件夹中，然后为这个子文件夹创建一个独立的Netlify站点配置。

例如，如果您想为 work.yourdomain.com 设置一个子域名来展示您的作品集，您可以将作品集的所有文件放置在您的Git仓库根目录下的一个名为 work 的文件夹中。

my-project-repo/
├── .git/
├── main-website-files/  # 主站文件
│   ├── index.html
│   └── ...
├── work/                # 子域名 'work.yourdomain.com' 的文件
│   ├── index.html
│   └── styles.css
└── package.json

逐步配置指南

本指南将以您的主域名 yourdomain.com 和子域名 work.yourdomain.com 为例，假设您的域名注册商是 Hover。

1. 组织您的Git仓库代码

首先，确保您的Git仓库结构如上所示，主站点的代码位于一个文件夹（例如 main-website-files，或者直接在仓库根目录），而子站点的代码位于另一个独立的文件夹（例如 work）。

2. 在Netlify上部署主站点

如果您尚未部署主站点，请按照以下步骤操作：

1. 连接到Git仓库： 登录Netlify，点击 "Add new site" -> "Import an existing project" -> "Deploy with GitHub/GitLab/Bitbucket"。
2. 选择仓库： 选择包含您所有项目代码的Git仓库。
3. 配置构建设置：
   • Base directory (基本目录): 如果您的主站代码不在仓库根目录，请指定其所在文件夹的路径（例如 /main-website-files）。如果主站代码就在仓库根目录，则留空。
   • Build command (构建命令): 根据您的项目类型填写（例如 npm run build 或 hugo）。
   • Publish directory (发布目录): 构建完成后，Netlify将从这个目录部署文件（例如 dist 或 public）。
4. 部署站点： 点击 "Deploy site"。

3. 为子域名创建并部署新站点

现在，为您的 work.yourdomain.com 子域名创建第二个Netlify站点：

1. 重复部署流程： 再次点击 "Add new site" -> "Import an existing project"，并选择同一个Git仓库。
2. 关键构建设置：
   • Base directory (基本目录): 这是最重要的步骤。将其设置为您子域名内容所在的文件夹路径，例如 /work。这将告诉Netlify只构建和部署此文件夹中的内容。
   • Build command (构建命令): 根据您的子项目类型填写（例如 npm run build）。如果子项目是纯静态HTML/CSS，可能不需要构建命令。
   • Publish directory (发布目录): 填写子项目构建后的发布目录（例如 work/dist 或 work/public，如果您的构建命令会将文件输出到 work 文件夹内）。如果子项目是纯静态且文件直接位于 work 文件夹，则可以直接设置为 /work。
3. 部署站点： 点击 "Deploy site"。

4. 配置自定义域名（在Netlify）

部署两个站点后，您需要为它们分别配置自定义域名：

DubbingX智声云配

多情绪免费克隆AI音频工具

975

查看详情

1. 为主站点配置域名：
   • 进入您的主站点（例如 yourdomain.com）的Netlify设置。
   • 导航到 "Domain management" -> "Custom domains"。
   • 点击 "Add a custom domain"，输入 yourdomain.com。Netlify将引导您完成域名验证和DNS配置。
2. 为子站点配置域名：
   • 进入您的子站点（例如 work.yourdomain.com）的Netlify设置。
   • 导航到 "Domain management" -> "Custom domains"。
   • 点击 "Add a custom domain"，输入 work.yourdomain.com。

Netlify会提示您需要添加的DNS记录类型（通常是 CNAME 或 A 记录）。请记下这些记录，因为您需要在 Hover 中进行设置。

5. 在Hover中更新DNS记录

最后一步是在您的域名注册商 Hover 中添加或修改DNS记录，将您的域名指向Netlify。

1. 登录Hover账户： 访问 Hover 网站并登录。

2. 导航到DNS管理： 找到您的域名，并进入其DNS管理页面。

3. 添加或修改DNS记录：

   • 为主域名 yourdomain.com 添加记录：
     • 通常，您需要添加一个 A 记录，将 @ (或留空) 指向 Netlify 提供的一个 IP 地址。
     • 或者，添加一个 CNAME 记录，将 www 指向您的 Netlify 站点地址（例如 your-main-site.netlify.app）。
   • 为子域名 work.yourdomain.com 添加记录：
     • 添加一个 CNAME 记录。
     • Host (主机名): 填写 work。
     • Target (目标): 填写 Netlify 为您的子站点提供的域名，通常是 your-sub-site-name.netlify.app。
     • 或者，如果Netlify提供了IP地址，添加一个 A 记录，将 work 指向该IP地址。

4. 保存更改： 保存您在 Hover 中所做的DNS更改。

注意事项

• DNS传播时间： DNS记录的更改需要时间在全球范围内传播（通常几分钟到几小时，最长可能24-48小时）。在此期间，您的网站可能无法立即通过新域名访问。
• SSL证书： Netlify会自动为您的自定义域名（包括子域名）配置和管理免费的SSL证书，确保您的网站通过HTTPS安全访问。
• 独立部署： 这种方法允许您独立部署主站点和子站点。对 work 文件夹的更改只会触发 work.yourdomain.com 站点的部署，而不会影响 yourdomain.com。
• 构建配置： 确保每个Netlify站点的“Base directory”、“Build command”和“Publish directory”都正确配置，以指向其各自的代码位置和构建输出。

总结

通过上述步骤，您已经成功地使用Netlify和Hover为您的网站设置了子域名。这种方法利用了Netlify强大的部署能力，允许您在单个Git仓库中管理多个项目，并通过独立的Netlify站点配置，为每个项目分配独立的子域名，从而实现高效、灵活的网站管理。

以上就是使用Netlify和Hover高效设置网站子域名教程的详细内容，更多请关注php中文网其它相关文章！