使用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）

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

家电小商城网站源码1.0

家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l

下载

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站点配置，为每个项目分配独立的子域名，从而实现高效、灵活的网站管理。