Github Pages部署React摄影站点出现“Site not found”问题求助

针对你的情况（本地正常、部署后仅显示部分内容+路由不匹配提示），按以下步骤排查：

1. 确认Github Pages部署源配置 #

• 进入仓库的Settings -> Pages，检查部署分支和部署目录是否正确：
  • 静态HTML站点，确保部署目录选仓库根目录（/(root)）；
  • 框架项目（React/Vue等），要选build生成的目录（比如/dist或/build），且确保该目录已提交到仓库；
  • 确认最新部署状态显示“Success”，无部署失败提示。

2. 修正路由/路径配置 #

因为站点部署在子路径/portfolio/下，必须适配这个基础路径：

• 单页应用框架：
  • React：在package.json中添加"homepage": "/portfolio/"；
  • Vue：在vue.config.js中设置publicPath: '/portfolio/'；
  • 路由组件中配置basename属性（比如React Router的<BrowserRouter basename="/portfolio">）；
• 静态HTML站点：
  • 把所有资源引用（CSS、JS、图片）改成相对路径，比如将/css/style.css改为./css/style.css，避免绝对根路径导致资源找不到。

3. 检查index.html完整性 #

• 对比仓库中的index.html和本地运行的版本，确认内容是否一致：
  • 排查是否build过程中index.html被错误修改、或上传时遗漏部分代码；
  • 确认页面核心内容（比如摄影作品展示的DOM结构）是否存在于仓库的index.html中。

4. 排查404页面干扰 #

• 检查仓库中是否存在404.html文件：
  • 如果你看到的“hello world, site not found”是404页面内容，说明当前访问路径被识别为不存在的路由；
  • 单页应用需要配置Github Pages的404回退，确保所有路由都指向index.html（比如复制index.html内容到404.html，或使用框架的路由 fallback 配置）。

5. 清除缓存并验证资源加载 #

• 强制刷新浏览器（Ctrl+F5），避免缓存旧页面内容；
• 打开浏览器开发者工具（F12），切换到Network标签：
  • 检查所有资源的HTTP状态码，若存在大量404，说明资源路径配置错误，需修正路径。

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