是否可以使用GitHub仓库子文件夹中的HTML文件创建GitHub Page？

核心结论 #

GitHub Pages 并不强制要求只能托管根目录下的内容，你可以直接访问仓库内任意子路径的静态资源，遇到404是路径拼接规则错误导致的。

正确路径转换规则 #

你拼接路径时错误保留了GitHub仓库文件预览页的专属路径段，二者的对应规则如下：

• GitHub仓库文件预览路径格式：https://github.com/<username>/<仓库名>/blob/<分支名>/<文件相对路径>
• GitHub Pages访问路径格式：https://<username>.github.io/<仓库名>/<文件相对路径>

以你给出的示例为例，原仓库文件地址为：
https://github.com/<username>/My_Learning_Port/blob/main/JavaScript/JS_First_Steps/Assessment/index.html
去掉其中的/blob/main/段，得到的正确访问地址为：
https://<username>.github.io/My_Learning_Port/JavaScript/JS_First_Steps/Assessment/index.html
直接访问该地址即可正常打开示例页面。

仍出现404的排查方案 #

如果使用上述规则转换路径后仍访问失败，按以下顺序排查：

• 进入仓库的Settings → Pages页面，确认Source配置中的分支选择的是main，而非其他分支
• 确认对应路径的index.html文件确实已提交同步到远程main分支，注意路径大小写敏感（GH Pages运行在Linux环境下，Assessment和assessment会被识别为不同路径）
• 刚提交代码或刚配置Pages服务需要等待1-5分钟的部署时间，部署完成后再尝试访问

便捷访问优化技巧 #

如果需要更便捷地访问各个示例，可以做以下配置：

• 在仓库根目录创建一个首页index.html，列出所有示例的访问链接，打开Pages根地址即可直接跳转不同示例
• 复杂场景下也可通过配置SPA路由规则实现短路径访问，纯静态示例场景直接使用完整子路径即可满足需求

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