Netlify 部署静态网站——0~1保姆级操作教程

一、部署前准备

1. 创建配置文件

`.gitignore`

排除敏感文件和自动生成文件：

gitignore 复制代码

node_modules/
*.log

`netlify.toml`

Netlify 部署配置文件：

toml 复制代码

[build]
  publish = "."

redirects
  from = "/*"
  to = "/index.html"
  status = 200

说明：redirects 规则确保刷新任何页面时都返回 index.html（SPA 的 fallback 机制）。

2. 初始化 Git 仓库并推送

bash 复制代码

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/你的用户名/english-exam-site.git
git push -u origin main

二、Netlify 部署流程概览

步骤	操作
1	打开 Netlify → Add new site → Import an existing project
2	选择 GitHub → 授权 → 选择仓库
3	配置部署设置
4	点击 Deploy site，之后每次 `git push` 自动重新部署

部署配置参考

配置项	值	说明
Branch to deploy	`main`	部署分支
Build command	留空	无构建步骤
Publish directory	`.`	发布目录

三、实战部署过程

1. 推送至 GitHub 远程仓库

项目结构

当前部署的项目为 english-exam-site：

创建 GitHub 仓库

打开 GitHub，新建项目：

复制远程仓库链接：

推送代码

在本地 Git 命令行执行：

bash 复制代码

git remote add origin git@github.com:Couioly/english-exam-site.git
git push -u origin master

注意：将 git@github.com:Couioly/english-exam-site.git 替换为你刚才复制的远程仓库链接。

2. 连接 Netlify

导入仓库

打开 Netlify（用 GitHub 登录）→ Add new Project → Import a Git repository → GitHub：

选择仓库

在打开的页面中选择刚刚推送的远程仓库：

若未显示目标仓库，点击 Configure the Netlify app on GitHub 前往 GitHub 配置权限：

配置并部署

根据项目需求进行配置。此处仅填写项目名，然后滚动到页面底部点击 Deploy 开始部署：

部署成功

部署成功后，页面会展示绿色的网站访问链接，点击即可直接访问：

四、配置自定义域名

前提：已拥有注册好的域名。此处以阿里云注册的 junbo.site 为例。

1. 添加域名

在 Netlify 的 english-exam-site 项目设置页，依次点击：

Domain management → Add a domain → Add a domain you already own

2. 验证域名

输入已注册的域名，点击 Verify：

出现以下提示说明域名验证成功：

junbo.site found! To connect it to your site, update your DNS records at your registrar. Open "Pending DNS verification" in the next step for step-by-step instructions. Your site will work once the changes propagate.

点击 Add domain：

3. 查看 DNS 配置要求

正常会出现以下页面，表示需要自行配置 DNS 解析：

4. 配置阿里云 DNS 解析

前往阿里云配置域名 DNS 解析。此处使用移动端阿里云操作：

DNS 记录配置

根域名使用 A 记录，子域名使用 CNAME 记录：

记录类型	主机记录	记录值
A	`@`	`75.2.60.5`
CNAME	`www`	`english-exam-site.netlify.app`

注意：

阿里云不支持 CNAME 扁平化，根域名需用 A 记录

Netlify 当前 Load Balancer IP 为 75.2.60.5

建议前往 Netlify 官方文档确认最新 IP

5. 等待生效

配置好 DNS 解析后，回到 Netlify 等待 DNS 生效和 HTTPS 配置：

阶段	说明	耗时
DNS 生效	解析传播	几分钟到几小时
DNS 检测	Netlify 自动检测指向是否正确	自动
SSL 证书	Netlify 自动申请 Let's Encrypt 证书	几分钟
状态确认	域名状态标记为 ✅ Active	完成

6. 访问验证

访问 https://你的域名 验证是否成功：

五、总结

阶段	关键操作
准备	创建 `.gitignore`、`netlify.toml`，初始化 Git 仓库
推送	代码推送至 GitHub 远程仓库
部署	Netlify 导入仓库，一键部署
域名	添加自定义域名，配置 DNS 解析，等待生效

Netlify 的优势在于自动化：代码推送后自动构建部署，SSL 证书自动申请，省去大量手动配置工作。