工程笔记

用 Netlify + 阿里云域名搭一个零成本个人站

这个网站就是按下面这套流程上线的:纯静态文件、拖拽部署、免费 HTTPS、自定义域名。 整个过程不需要服务器,也不需要备案到境内机房。

第一步:准备一个「能直接打开」的文件夹

Netlify 的拖拽部署要求根目录里有 index.html。一个最小结构大概是这样:

limitstage-site/
├── index.html
├── about.html
├── research.html
├── projects.html
├── blog/
│   ├── index.html
│   └── ...
├── assets/
│   ├── css/style.css
│   ├── js/main.js
│   └── favicon.svg
└── netlify.toml

先在本地双击 index.html 确认页面正常,再上传。这一步能挡掉大部分路径写错的问题。

第二步:拖拽到 Netlify Drop

  1. 打开 app.netlify.com/drop(需先登录);
  2. 把整个 limitstage-site 文件夹拖进虚线框;
  3. 等待上传完成,会得到一个随机子域名,例如 charming-panda-1a2b3c.netlify.app;
  4. 在 Site configuration → Change site name 里改成好记的名字,比如 limitstage。

注意:拖拽的是文件夹本身,不要只拖里面的文件,也不要把整个压缩包拖进去(除非是 zip 上传)。

第三步:在 Netlify 里添加自定义域名

  1. 进入站点 → Domain management → Add a domain;
  2. 输入 limitstage.cn,选择「Add domain」;
  3. 再把 www.limitstage.cn 也加进去,并设置其中一个为 Primary domain(建议用不带 www 的主域,或统一跳转到 www,二选一)。

第四步:在阿里云配置 DNS 解析

回到阿里云控制台 → 域名 → 解析设置,添加记录:

  • 主机记录 www,类型 CNAME,记录值填你的 Netlify 子域名 (如 limitstage.netlify.app,注意结尾带不带点都行,阿里云会自动处理)。
  • 主机记录 @,类型 A,记录值 75.2.60.5(Netlify 官方推荐的根域 IP)。

如果你不想记 IP,也可以把域名的 NS 服务器改成 Netlify DNS 提供的四个地址, 由 Netlify 全权托管解析。两种方式选一种即可,不要混用。

解析生效通常需要几分钟到几小时,取决于 TTL。改完后用 nslookup limitstage.cn 验证。

第五步:等待自动签发 HTTPS 证书

DNS 生效后,Netlify 会自动通过 Let's Encrypt 签发证书,一般几分钟内完成。 在 Domain management → HTTPS 里可以看到状态,签发成功后记得开启 Force HTTPS,让 http 自动跳转到 https。

几个容易踩的坑

  • 域名实名认证。 .cn 域名必须完成实名认证才能正常解析, 在阿里云域名列表里确认状态是「已实名」。
  • 备案问题。 解析到境外服务器不需要 ICP 备案,但境内访问速度会受网络影响; 如果以后迁回国内机房,就必须先备案。
  • 路径大小写。 Windows 本地不区分大小写,Netlify 的 Linux 环境区分。 Style.css 和 style.css 在线上是两回事。
  • 缓存。 更新后如果看到的还是旧页面,先强制刷新(Ctrl+F5),再检查是否命中了 CDN 缓存。

后续怎么更新

拖拽部署适合起步。等文章多起来,建议把文件夹推到 GitHub 仓库, 在 Netlify 里连接仓库并设置 Publish directory,之后每次 git push 都会自动重新部署, 还能享受部署预览和回滚。

本文记录的是截至写作时的操作路径,Netlify 后台界面可能随版本调整。