GitHub Pages部署React站点绑定Squarespace自定义域名出错求助

一、修正Squarespace DNS配置错误 #

你在Squarespace添加CNAME时输入了带路径的地址{GitHubname}.github.io/{repo-name}/，这不符合CNAME记录规则——CNAME只能指向纯域名，不能包含路径。

解决方法：

• 在Squarespace的DNS设置中，添加www类型的CNAME记录，目标字段填写{GitHubname}.github.io（完全去掉末尾的/{repo-name}/）
• 保存配置后，等待DNS解析生效（通常10-30分钟，最长可能24小时）

二、修复GitHub Pages自定义域名配置错误 #

GitHub提示的NotServedByPagesError是因为域名还未正确解析到GitHub Pages服务器，需等DNS生效后再操作：

1. 确认DNS解析生效：用命令行执行nslookup www.{yourdomain}.com，查看输出中的CNAME是否为{GitHubname}.github.io
2. 进入GitHub仓库的「Settings」→「Pages」页面，在「Custom domain」输入框中填写你的自定义域名（如www.yourdomain.com）
3. 勾选「Enforce HTTPS」（确保站点通过HTTPS访问，避免路由和安全问题），然后保存

注意：GitHub会自动在你的gh-pages分支根目录生成一个CNAME文件，不要手动修改或删除它，否则会导致配置失效。

三、适配React多路由的访问需求 #

由于你的站点原本部署在GitHub Pages的子路径/{repo-name}/，绑定自定义域名后，站点会直接映射到域名根路径，需要调整路由配置：

1. 调整React Router的basename：
   如果使用react-router-dom，在BrowserRouter组件中动态设置basename：

   import { BrowserRouter } from 'react-router-dom';
   
   function App() {
     return (
       <BrowserRouter basename={process.env.PUBLIC_URL}>
         {/* 你的路由组件 */}
       </BrowserRouter>
     );
   }
   

2. 配置PUBLIC_URL环境变量：
   在package.json的build脚本中设置PUBLIC_URL，确保部署到自定义域名时路径正确：

   "scripts": {
     "build": "PUBLIC_URL=/ react-scripts build",
     "deploy": "gh-pages -d build"
   }
   

   （如果后续需要切换回GitHub Pages子路径部署，只需把PUBLIC_URL改为/{repo-name}/即可）

额外排查点 #

• 确认gh-pages分支的根目录是build后的产物，没有多余路径
• 如果使用裸域（如yourdomain.com而非www.yourdomain.com），还需在Squarespace添加A记录指向GitHub Pages的官方IP：185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153，同时在GitHub设置中输入裸域作为自定义域名

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