Git Pages无法加载内部/外部CSS及图片问题求助

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

进入你的GitHub仓库Settings → Pages页面，检查：

• 部署分支是否为你推送代码的分支（比如main/master）
• 部署目录是否设置为/(root)（如果你的HTML、CSS、图片都在仓库根目录），若资源在子文件夹，需对应选择正确目录
• 确认部署状态显示“Your site is published at...”，无部署错误提示

2. 使用仓库根目录绝对路径 #

Git Pages的访问根路径是https://<用户名>.github.io/<仓库名>/，所有资源引用必须基于这个根路径：

• CSS引用示例：<link rel="stylesheet" href="/portfolio/css/your-style.css">
• 图片引用示例：<img src="/portfolio/images/your-image.jpg" alt="图片描述">
• Favicon引用示例：<link rel="icon" href="/portfolio/favicon.ico">

注意：路径开头的/代表从仓库根目录开始查找资源，可避免相对路径在多级页面下的解析错误

3. 检查文件大小写一致性 #

GitHub服务器区分大小写，但本地系统（Windows/macOS）通常不区分：

• 确保HTML中引用的路径（比如/portfolio/CSS/style.css）和仓库中实际的文件/文件夹名（比如css/style.css）完全一致
• 直接去GitHub仓库页面核对每个资源的路径大小写，修正HTML中的错误引用

4. 利用浏览器控制台定位具体错误 #

打开托管页面，按F12打开开发者工具 → Console标签：

• 查看404错误提示里的资源请求路径，对比仓库中的实际路径，快速定位路径问题
• 例：若控制台显示GET https://marcelo-augustovs.github.io/css/style.css 404，说明路径缺少/portfolio/前缀

5. 确认资源已提交到仓库 #

检查GitHub仓库页面：

• 确认css、images等资源文件夹存在，且里面的文件已被push到仓库
• 避免本地文件未执行git add、git commit、git push操作，导致Pages服务器上无对应资源

6. 强制清除浏览器缓存 #

浏览器缓存可能保留旧的错误路径：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS）强制刷新页面
• 或使用隐私/无痕模式访问页面，测试资源是否加载正常

7. 检查并修正base标签 #

如果你的HTML中使用了<base>标签，它会统一解析所有相对路径：

• 确保href属性设置正确：<base href="https://marcelo-augustovs.github.io/portfolio/">
• 若不确定，直接移除<base>标签，改用绝对路径引用资源

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