Odin项目HTML菜谱页GitHub预览点击链接失效问题排查求助

你执行的git add .、git commit、git push提交流程本身没有问题，代码已经正常上传到GitHub仓库，问题出在路径配置或者部署规则上，对应排查解决方法如下：

核心原因及对应解决方案 #

1 HTML链接路径配置错误（出现概率最高） #

你的仓库结构为：根目录存放首页index.html，所有菜谱详情页存储在recipes子目录下。如果首页<a>标签的href属性未带上子目录前缀，会出现本地预览正常、线上跳转失效的问题，原因是本地Git live preview的工作目录映射规则和GitHub Pages不一致。
错误写法示例：

<a href="lasagna.html">千层面菜谱</a>

正确写法示例：

<a href="recipes/lasagna.html">千层面菜谱</a>

2 文件名大小写不匹配 #

GitHub Pages运行于Linux环境，对文件名大小写敏感；而Windows、macOS本地环境默认大小写不敏感。如果链接中填写的文件名大小写和实际文件不一致，本地预览可以正常跳转，线上会找不到资源。
检查所有链接href的文件名拼写、大小写和实际存储的文件完全一致即可解决。

3 a标签语法错误 #

检查首页的链接标签是否存在语法问题：

• 确认属性名是href，不要误写为src
• 确认a标签有正确的闭合符，没有语法嵌套错误
  没有有效href属性的a标签点击不会产生任何跳转行为。

4 GitHub Pages部署配置错误 #

如果上述内容都确认无误，检查仓库的Pages部署配置：

• 进入仓库Settings → Pages页面
• 确认Source分支选择main，分支对应的部署目录选择/ (root)
• 若使用自定义GitHub Workflow部署，确认配置中已将根目录所有文件（包括recipes子目录）纳入构建部署范围，没有过滤掉对应资源。

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