一、部署前准备1. 创建配置文件.gitignore排除敏感文件和自动生成文件node_modules/ *.lognetlify.tomlNetlify 部署配置文件[build] publish . redirects from /* to /index.html status 200说明redirects规则确保刷新任何页面时都返回index.htmlSPA 的 fallback 机制。2. 初始化 Git 仓库并推送gitadd.gitcommit-mInitial commitgitremoteaddorigin https://github.com/你的用户名/english-exam-site.gitgitpush-uorigin main二、Netlify 部署流程概览步骤操作1打开 Netlify → Add new site → Import an existing project2选择 GitHub → 授权 → 选择仓库3配置部署设置4点击 Deploy site之后每次git push自动重新部署部署配置参考配置项值说明Branch to deploymain部署分支Build command留空无构建步骤Publish directory.发布目录三、实战部署过程1. 推送至 GitHub 远程仓库项目结构当前部署的项目为english-exam-site创建 GitHub 仓库打开 GitHub新建项目复制远程仓库链接推送代码在本地 Git 命令行执行gitremoteaddorigin gitgithub.com:Couioly/english-exam-site.gitgitpush-uorigin master注意将gitgithub.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 own2. 验证域名输入已注册的域名点击Verify出现以下提示说明域名验证成功junbo.sitefound! 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 domain3. 查看 DNS 配置要求正常会出现以下页面表示需要自行配置 DNS 解析4. 配置阿里云 DNS 解析前往阿里云配置域名 DNS 解析。此处使用移动端阿里云操作DNS 记录配置根域名使用 A 记录子域名使用 CNAME 记录记录类型主机记录记录值A75.2.60.5CNAMEwwwenglish-exam-site.netlify.app注意阿里云不支持 CNAME 扁平化根域名需用 A 记录Netlify 当前 Load Balancer IP 为75.2.60.5建议前往 Netlify 官方文档 确认最新 IP5. 等待生效配置好 DNS 解析后回到 Netlify 等待 DNS 生效和 HTTPS 配置阶段说明耗时DNS 生效解析传播几分钟到几小时DNS 检测Netlify 自动检测指向是否正确自动SSL 证书Netlify 自动申请 Let’s Encrypt 证书几分钟状态确认域名状态标记为 ✅ Active完成6. 访问验证访问https://你的域名验证是否成功五、总结阶段关键操作准备创建.gitignore、netlify.toml初始化 Git 仓库推送代码推送至 GitHub 远程仓库部署Netlify 导入仓库一键部署域名添加自定义域名配置 DNS 解析等待生效Netlify 的优势在于自动化代码推送后自动构建部署SSL 证书自动申请省去大量手动配置工作。