个人GitHub Pages作品集页面空白及index.js加载问题求助

问题原因分析 #

1. GitHub Pages显示README而非项目页面 #

GitHub Pages的优先级规则是：根目录存在index.html则加载该文件，无index.html时默认显示README.md。当前要么是根目录未放置正确的项目页面文件，要么是未将GitHub Pages的发布源指向你的public目录。

2. public目录下index.html空白、index.js加载失败 #

本地正常但线上加载失败，核心原因大概率是资源路径不匹配：

• 本地服务器以根路径运行，若代码中使用绝对路径（如/index.js），线上会请求https://luisssm.github.io/index.js，而非正确的项目子路径下的资源
• 若使用构建工具（如Vite、Webpack），未配置对应项目子路径的基础URL，会导致打包后的资源路径全部错误，进而加载失败

修复步骤 #

第一步：调整GitHub Pages发布源配置 #

1. 打开你的GitHub仓库，进入「Settings」→「Pages」
2. 在「Source」区域，选择代码所在分支（如main），将目录从「/(root)」改为「/public」，保存设置
3. 等待3-5分钟，GitHub会自动重新部署，之后访问仓库根路径即可加载public目录下的index.html

第二步：修复index.js加载路径 #

打开public目录下的index.html，找到引入index.js的代码，二选一修改：

• 相对路径写法（推荐）：将<script src="/index.js"></script>改为<script src="./index.js"></script>
• 绝对路径写法：改为<script src="/Portfolio/index.js"></script>

如果是框架项目（如React/Vite）：

• Vite项目：在vite.config.js中添加base: '/Portfolio/'，执行构建命令后将dist目录推送到仓库，同时把GitHub Pages发布源改为「/dist」
• Create React App项目：在package.json中设置homepage: "https://luisssm.github.io/Portfolio/"，执行npm run build后将build目录推送到仓库，把GitHub Pages发布源改为「/build」

第三步：验证修复效果 #

将修改后的代码推送到GitHub，等待部署完成后访问页面，按F12打开浏览器控制台，检查是否还有资源加载报错。

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