Create React App部署至GitHub Pages出现空白页问题排查

以下是针对你遇到的空白页面问题的排查步骤：

1. 确认package.json中的homepage字段配置 #

Create React App部署到GitHub Pages必须正确设置homepage字段，确保静态资源路径正确。打开你的package.json，检查是否包含：

"homepage": "https://qmorozov.github.io/searchApp/"

如果缺失或路径错误，会导致JS、CSS等资源加载404，页面显示空白。

2. 检查浏览器开发者工具的资源加载情况 #

打开部署后的页面，按下F12打开开发者工具，切换到Network标签页：

• 刷新页面，查看所有静态资源（以static/开头的JS、CSS文件）的请求状态，如果显示404，说明资源路径配置错误，回到第一步修正homepage。

3. 路由配置检查（若使用React Router） #

如果你的项目使用了React Router，需要适配GitHub Pages的环境：

• 若使用BrowserRouter，必须添加basename属性，值为你的项目路径：

import { BrowserRouter as Router } from 'react-router-dom';

<Router basename="/searchApp/">
  {/* 你的路由组件 */}
</Router>

• 或者改用HashRouter，它不需要额外配置，就能适配GitHub Pages的静态站点环境：

import { HashRouter as Router } from 'react-router-dom';

<Router>
  {/* 你的路由组件 */}
</Router>

4. 验证gh-pages分支的构建产物 #

检查你的gh-pages分支，确认分支内的内容是npm run build生成的build文件夹中的文件（包括index.html、static文件夹等），而不是项目的源码文件（如src、package.json）。如果产物不对，重新运行npm run deploy确保构建和部署流程正确。

5. 确认GitHub Pages部署源设置 #

进入你的GitHub仓库，点击Settings -> Pages：

• 确认Source选项选择的是gh-pages分支，且文件夹选择的是/(root)，而非其他路径。

内容的提问来源于stack exchange，提问作者Андрей Морозов