拥有独立域名时，如何将React作品集网站部署至Netlify？

前置准备 #

确保你的React项目已完成开发，能通过npm run build生成生产环境的build文件夹；同时拥有已注册的独立域名，且能访问域名注册商的DNS管理后台。

步骤1：将项目部署到Netlify #

• 登录Netlify控制台，选择添加新项目，可通过导入GitHub/GitLab/Bitbucket仓库的方式关联项目，也可直接上传本地生成的build文件夹。
• 若导入仓库，Netlify会自动识别React项目，默认构建命令为npm run build，发布目录为build，确认配置后启动部署，等待部署完成。

步骤2：绑定独立域名 #

• 进入项目的域名管理页面，找到自定义域名板块，点击添加自定义域名，输入你的独立域名（如yourportfolio.com）并验证。
• 按照Netlify提示完成域名所有权验证，通常需要在域名注册商后台添加指定的DNS记录。

步骤3：配置DNS解析 #

• 登录域名注册商的DNS管理后台，添加以下两条记录：
  • A记录：主机记录填@，记录值填写Netlify提供的官方IP（可在Netlify域名管理页面获取，常见如75.2.60.5）。
  • CNAME记录：若需设置www子域名，主机记录填www，记录值填写你的Netlify默认域名（如your-site-name.netlify.app）。
• 保存配置后，等待DNS生效（通常需要10分钟至2小时）。

步骤4：启用HTTPS #

• 回到Netlify域名管理页面，点击验证DNS配置，确认生效后，Netlify会自动申请Let's Encrypt SSL证书，也可手动点击启用HTTPS，确保网站支持安全访问。

关键注意事项 #

• 若使用React Router的BrowserRouter，需在项目根目录的public文件夹下创建_redirects文件，内容为：

  /* /index.html 200
  

  避免刷新子页面时出现404错误。
• 确保域名未被其他服务占用，DNS记录配置无冲突。

内容的提问来源于stack exchange，提问作者Habiba Yvonne