推送代码到GitHub后页面静态资源路径失效如何修复？

你遇到的问题是路径格式适配问题，你当前使用的根路径绝对路径（以/开头）在GitHub Pages环境下会指向站点根目录，若你的项目部署在GitHub Pages的项目级站点（即站点地址格式为https://<用户名>.github.io/<仓库名>/），绝对路径会跳过仓库名层级寻找资源，导致404。

修复方案 #

方案1：使用相对路径（最推荐，本地线上通用） #

删除路径开头的/，改为相对于当前HTML文件的相对路径即可。如果CSS、Images文件夹和HTML文件处于同级目录，修改为以下格式：

<link rel="stylesheet" href="./CSS/style.css">
<img id="frogicon" src="./Images/frogiconpure.jpg" alt="frog icon">

说明：./代表当前HTML文件所在目录，只要本地仓库的目录结构和推送到GitHub的目录结构完全一致，本地预览和线上部署都能正常加载资源。

方案2：适配绝对路径 #

如果必须使用绝对路径，需要在路径前补全你的GitHub仓库名称，假设仓库名为frog-demo，修改为以下格式：

<link rel="stylesheet" href="/frog-demo/CSS/style.css">
<img id="frogicon" src="/frog-demo/Images/frogiconpure.jpg" alt="frog icon">

额外检查项 #

• 确认GitHub仓库内的文件夹、文件名大小写和你写的路径完全一致：GitHub Pages运行在大小写敏感的Linux环境，本地Windows/macOS系统对大小写不敏感，会出现本地正常、线上404的情况，比如本地文件夹名为css的话，路径写CSS就会加载失败。
• 确认你推送到GitHub的目录结构和本地一致，CSS、Images文件夹确实和引用它们的HTML文件处于同级目录。

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