上传课程项目至GitHub Pages后Home图标跳转404错误求助

问题原因 #

本地环境中docs/index.html的相对路径能正常工作，但GitHub Pages的部署结构和本地存在差异：

• 若你选择的部署源是docs文件夹，部署后docs会成为站点的根目录，此时docs/index.html这个路径就不存在了，自然返回404。
• 若部署源是根目录，可能存在文件名大小写不匹配（GitHub Pages区分大小写，本地系统可能不区分），或者相对路径在子页面中指向错误位置的问题。

解决方案 #

1. 调整相对路径（推荐） #

根据你的部署源修改a标签的href属性：

• 如果部署源是docs文件夹：将href="docs/index.html"改为href="./index.html"或直接href="/"（项目站点需加上仓库名，比如href="/your-repo-name/"）。
• 如果部署源是根目录：确保页面所在层级的相对路径正确，比如当前页面在根目录下的子文件夹中，需改为href="../docs/index.html"。

修改后的示例代码：

<body>
    <!-- 部署源为docs文件夹时的写法 -->
    <a href="./index.html">
    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="rgb(254, 232, 194)" id="house" viewBox="0 0 16 16">
        <path d="M8 6.982C9.664 5.309 13.825 8.236 8 12 2.175 8.236 6.336 5.309 8 6.982Z"/>
        <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.707L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.646a.5.5 0 0 0 .708-.707L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/></svg>
    </a>

2. 使用带仓库名的绝对路径 #

如果不确定相对路径的层级，可直接使用包含仓库名的绝对路径，格式为/your-repo-name/docs/index.html（替换your-repo-name为你的仓库名称），这样无论当前页面在哪个位置，都能精准指向首页。

3. 检查部署源设置 #

进入GitHub仓库的Settings -> Pages，确认部署源选择的是正确的分支和文件夹（比如main分支的/docs文件夹），避免因部署源错误导致路径失效。

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