前言介绍
很多设计师、摄影师或自由职业者在完成作品集网站的制作后，最头疼的一步就是“如何让网站通过自己的域名访问”。自己买的域名放在域名商那里，网站文件要么托管在GitHub Pages、要么在Vercel或Netlify等平台上，两者之间需要建立一条“桥梁”。如果绑定操作不正确，网站要么显示“无法访问”，要么出现安全证书警告。本教程将完整演示从域名购买平台解析、到托管平台绑定、再到HTTPS证书自动开启的全套流程，确保你的作品集网站能够通过独立网址稳定上线，且访问时显示绿色小锁。
前置准备
在开始操作前，请确保你已具备以下条件：
1. 一个已购买的域名（例如 yourname.com），购买平台可以是阿里云、腾讯云、Namecheap、GoDaddy 等。确保域名处于“正常”状态，未过期。
2. 一个已完成建站并部署好的作品集网站。本教程以常见的静态网站托管平台为例（如 Vercel、Netlify、GitHub Pages），你需要在对应平台上有已部署的项目，并能获取到一个默认的二级域名（例如 your-project.vercel.app）。
3. 能够登录域名注册商的管理后台，以及托管平台的项目设置页面。
4. 建议提前关闭域名隐私保护（如有），避免解析生效延迟。部分平台需要验证域名所有权，隐私保护可能导致验证失败。
分步操作步骤
步骤1：在托管平台获取绑定域名所需的DNS记录值
不同托管平台要求添加的DNS记录类型略有不同，但核心思路一致：你需要将你的自定义域名指向托管平台的服务器。以Vercel为例，操作如下：
- 登录 Vercel 控制台，进入你的项目页面。
- 点击顶部导航栏的“Settings”选项卡，然后选择左侧菜单中的“Domains”。
- 在输入框中输入你的完整域名（例如 yourname.com），点击“Add”按钮。
- 系统会立即进行验证，由于域名尚未解析，通常会提示“Domain not configured”。此时页面下方会显示需要添加到域名DNS中的记录值。注意看“Required”部分：通常是一个CNAME记录，主机记录为“@”或“www”，目标值为“cname.vercel-dns.com”。有些情况下还会要求添加A记录指向特定IP地址（例如76.76.21.21）。请完整记录下所有需要添加的记录类型、主机记录和目标值。如果使用Netlify，类似操作在“Site settings”->“Domain management”->“Add custom domain”中，系统会给出需要添加的CNAME记录（通常目标为 your-site.netlify.app）。
步骤2：登录域名注册商后台添加DNS解析记录
这一步需要在你的域名购买平台完成。不同平台界面有差异，但核心功能都叫“DNS解析”或“域名解析”。以阿里云为例：
- 登录阿里云控制台，进入“域名”列表，找到你的域名，点击“解析”按钮。
- 点击“添加记录”按钮，开始添加第一步中获取的记录。
- 首先添加CNAME记录：记录类型选择“CNAME”，主机记录填写“@”（表示根域名，即直接访问 yourname.com），记录值填写从托管平台复制的目标地址（例如 cname.vercel-dns.com），解析线路默认，TTL建议选择10分钟或默认值。
- 再添加一条CNAME记录用于“www”子域名：主机记录填写“www”，记录值同样填写同一个目标地址。这样用户访问 www.yourname.com 也能正常打开。
- 如果托管平台要求添加A记录（例如某些情况下需要将根域名指向特定IP），则记录类型选择“A”，主机记录填写“@”，记录值填写IP地址（例如76.76.21.21）。注意：部分平台只要求CNAME，不要混用，请严格按托管平台给出的要求添加。
- 添加完成后，点击“确认”保存。DNS解析记录通常需要几分钟到几小时生效，但大部分情况下10-30分钟内即可。
步骤3：在托管平台验证域名绑定并开启HTTPS
DNS记录添加完毕后，回到托管平台进行验证和最终配置。
- 在Vercel的Domains设置页面，你会看到之前添加的域名状态从“Not configured”变为“Validating”或“Pending”。点击“Refresh”或等待几分钟，系统会自动检测DNS记录。
- 如果配置正确，状态会变为“Valid”，并显示“SSL”为“Automatic”或“Active”。Vercel会自动为你的域名申请并续期Let's Encrypt证书，无需手动操作。
- 如果状态长时间显示“Invalid”，请检查DNS记录是否填写正确，尤其是主机记录是否漏掉了“@”或“www”，以及记录值是否有多余空格。可以尝试删除域名重新添加，或使用第三方DNS检测工具（如whatsmydns.net）确认解析是否已生效。
- 在Netlify上，添加域名后，系统会提示“Check DNS configuration”，点击按钮后Netlify会自动验证。验证通过后，Netlify同样会自动配置HTTPS证书，并在“Domain management”中显示“Netlify-managed SSL”状态为“Active”。
步骤4：配置域名重定向（可选但推荐）
为了让用户无论输入带www还是不带www的域名都能访问同一网站，并且避免搜索引擎认为这是两个不同网站，建议设置重定向规则。
- 在Vercel的Domains设置中，你可以看到两个域名条目（yourname.com 和 www.yourname.com）。默认情况下，两者都可以独立访问。点击任意一个域名旁边的“Edit”按钮，在“Redirect”选项中，你可以选择将其中一个重定向到另一个。例如，将 www.yourname.com 重定向到 yourname.com，这样用户输入 www 开头的网址时，浏览器地址栏会自动跳转为不带www的版本。
- 在Netlify中，进入“Domain management”，在“Custom domains”列表下方有“Redirects”选项，可以添加一条规则：来源路径“/*”，目标URL“https://yourname.com/:splat”，状态码301。同样可以实现统一域名访问。
- 注意：重定向设置前，请确保两个域名都已成功绑定并HTTPS生效，否则重定向可能无法正常工作。
步骤5：测试网站访问及证书状态
所有配置完成后，进行最终验证。
- 打开浏览器，在地址栏输入你的域名（例如 yourname.com），按回车。正常情况应直接显示你的作品集网站首页。
- 再输入 www.yourname.com，应自动跳转到 yourname.com（如果设置了重定向），或同样正常显示网站。
- 检查地址栏左侧是否有绿色小锁图标，点击小锁查看证书信息，应显示“连接是安全的”，证书由“Let's Encrypt”或托管平台颁发，有效期通常为3个月（会自动续期）。
- 如果出现“您的连接不是私密连接”或“NET::ERR_CERT_COMMON_NAME_INVALID”错误，说明HTTPS证书未正确配置。可以尝试在托管平台手动触发重新颁发证书（Vercel中点击“Renew”按钮，Netlify中点击“Verify DNS”）。如果问题依旧，请检查域名解析是否完全生效，有时需要等待更长时间（最长48小时）。
常见问题
问题1：添加DNS记录后等了几个小时网站还是无法访问
原因：DNS解析在全球范围内生效需要时间，最长可能48小时。但通常1小时内可生效。你可以使用在线DNS检测工具（如 dnschecker.org）输入你的域名，查看不同地区的解析情况。如果显示你的托管平台IP或CNAME目标，说明解析已生效。如果所有节点都显示未解析，请检查DNS记录是否保存成功，以及主机记录是否填写正确（注意“@”和“www”的区别）。
问题2：网站能访问但显示“不安全”或没有绿色小锁
原因：HTTPS证书未自动颁发或颁发失败。首先确认托管平台是否支持自动HTTPS（Vercel、Netlify均支持）。然后检查域名解析是否完全正确，尤其是CNAME记录必须指向托管平台提供的目标地址，不能指向其他地址。如果解析无误，可以尝试在托管平台删除域名后重新添加，触发重新申请证书。部分平台需要等待证书颁发完成（通常几分钟），刷新页面即可。
问题3：绑定后网站样式错乱或图片加载不出来
原因：你的网站代码中引用了资源（CSS、JS、图片）使用了绝对路径或旧域名。例如，你在代码中写死了“https://old-domain.vercel.app/style.css”，当域名变更后，这些资源路径仍然指向旧地址。解决方法：将所有资源引用改为相对路径（如“/style.css”）或使用环境变量动态获取当前域名。修改后重新部署网站即可。
问题4：我想使用子域名（如 portfolio.yourname.com）来展示作品集
操作步骤类似：在托管平台添加域名时输入“portfolio.yourname.com”，然后在域名解析中添加一条CNAME记录，主机记录填写“portfolio”，记录值填写托管平台的目标地址。其他配置与根域名相同。注意子域名也需要单独配置HTTPS，托管平台会自动处理。
收尾总结
至此，你已经完成了从域名解析到托管平台绑定再到HTTPS证书配置的完整流程。你的作品集网站现在可以通过独立网址 yourname.com 在全球任何地方安全、稳定地访问。整个过程的核心要点有三个：第一，严格复制托管平台提供的DNS记录值，不要自己编造；第二，耐心等待DNS生效，不要频繁修改记录；第三，HTTPS证书由托管平台自动管理，你只需要确保域名解析正确即可。如果你使用的是其他托管平台（如GitHub Pages、Cloudflare Pages），操作逻辑完全一致，只是具体的DNS目标地址和验证步骤略有差异。现在，你可以将你的独立网址分享给客户或招聘方，展示你的专业作品了。