如何在GitHub Pages中为index.html正确引入CSS文件？

以下是几个常见的排查和修复步骤：

• 核对相对路径的准确性
  如果你的index.html和CSS文件在同一目录下，引入代码应该是：

  <link rel="stylesheet" href="style.css">
  

  要是CSS文件放在子目录（比如css文件夹），路径要改成：

  <link rel="stylesheet" href="css/style.css">
  

  特别注意：GitHub Pages是区分大小写的，本地文件名的大小写要和仓库里的完全一致，比如本地是Style.css但仓库里是style.css就会加载失败。

• 适配项目站点的路径前缀
  如果你用的是项目站点（URL格式为https://你的用户名.github.io/项目名/），必须在CSS路径前加上项目名称，比如：

  <link rel="stylesheet" href="/项目名/style.css">
  

  要是用户/组织站点（URL是https://你的用户名.github.io/），直接用根路径或相对路径即可。

• 确认文件已上传至仓库
  登录GitHub仓库页面，检查CSS文件是否确实存在，有没有被.gitignore规则排除，或者上传时遗漏了。

• 用浏览器开发者工具定位问题
  打开网页按F12切换到「Network」标签，刷新页面后查看CSS文件的请求状态：

  • 若显示404，说明路径错误，按照前面的方法调整；
  • 若出现其他状态（比如403），检查仓库是否设为私有（私有仓库的GitHub Pages需要付费才能正常访问）。

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