部署至gh-pages的站点无法显示，本地localhost正常求助

1. 核对项目base路径配置 #

如果用React/Vue这类框架，部署到子路径（比如你的coding_challenge）时，base路径必须匹配：

• React：在package.json里添加"homepage": "https://greatkali419.github.io/coding_challenge/"，嫌麻烦也可以直接写"homepage": "./"用相对路径
• Vue：在vue.config.js里设置publicPath: '/coding_challenge/'

2. 检查资源加载是否正常 #

打开浏览器F12切换到Network标签，刷新页面查看：

• 是否存在404状态的JS/CSS文件？如果资源路径是/static/xxx而非/coding_challenge/static/xxx，说明base路径配置错误

3. 确认gh-pages分支内容正确 #

• 查看仓库的gh-pages分支，里面应该是项目构建后的产物（比如React的build文件夹内容、Vue的dist文件夹内容），而非源码文件
• 若使用gh-pages工具部署，确保执行的是正确命令，比如React项目的npm run deploy，该命令会自动将构建产物推送至gh-pages分支

4. 调整单页应用的路由模式 #

如果项目用了BrowserRouter（React）或history模式（Vue），GitHub Pages不支持这类路由模式，会导致页面空白：

• 直接改用HashRouter（React）或hash模式（Vue），这是最省心的解决方案
• 若坚持使用history模式，可在仓库根目录添加404.html文件，内容与index.html完全一致，再配合路由配置调整，但复杂度远高于Hash模式

5. 清除缓存 #

GitHub Pages偶尔会存在缓存问题，即使重新部署也可能显示旧内容：

• 按住Ctrl+F5强制刷新页面
• 等待10-15分钟，让GitHub Pages完成缓存更新

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