github pages 无法加载css的问题

梦里梦外; 2022-09-10 10:11 110阅读 0赞

今天再将sphinx自动生成的html上传到github上面充当说明文档，遇到了一个问题，就是\_static/css/路径下的css和js文件加载不出来，查了很多方法，都没有试成功，其实后面我测试的时候发现，只要带下划线的文件里面的内容都无法访问，这是因为github pages的jekyll模版会忽略下划线开头的文件，所以要禁用jekyll。

禁用方法就是在项目根目录下添加一个空白文件，命名为：.nojekyll

这样就解决了无法加载\_static文件的问题。

note：在操作的时候，不要开代理服务器，发现我网络开着代理服务器，还是没有加载成功，幸好自己在手机上试了试发现可以正常显示css样式，然后让同学试了试也没问题，这才找到问题。

另外记录一下整个过程：  
关于sphinx生成说明文档的过程，可以查看我的这篇博客[使用sphinx自动生成python项目说明文档][sphinx_python]，下面是在说明文档已经生成之后的步骤：

1.首先创建一个仓库，仓库的名字`antsesame.github.io`，注意antsesame可以修改，后面的github.io是不可以修改的，建议尽量和自己的github名字一样（我的github名字就是antsesame），这样直接通过antsesame.github.io就可以访问，如果你设置的是其他的名字比如`abc.github.io`,后面访问的时候需要通过antsesame.github.io/abc.github.io才可以进行访问。  
![在这里插入图片描述][6c5013b144eb4d56b61f96de5f450c14.png]  
2.点击settings，找到github Pages，点击check it out here  
![在这里插入图片描述][fdee5ce86e5442629c9099f208618c7d.png]

3.branch选择main，后面选择`/(root)`，这个地方选择`/(root)`是指的你的仓库的根目录就是root目录，所以index直接放到仓库根目录下就可以，如果选择`/docs`，意味着你得建一个docs文件夹，docs是项目的github pages根目录，然后index放到docs这个文件下。另外在这里可以直接看到访问的站点信息。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]  
4.然后往仓库里面放网站的内容就可以了，由于我的是通过sphinx生成的html所以我直接把html中的所有内容放到根目录就可以了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_16_color_FFFFFF_t_70_g_se_x_16]  
5.通过settings中的github Pages上面显示的站点信息访问就可以了。（注意此处已经将空白的.nojekyll文件放到根目录下了。）  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
参考：  
sphinx生成说明文档放到github pages官方指南  
https://daler.github.io/sphinxdoc-test/includeme.html

在github上搭建个人博客  
https://zhuanlan.zhihu.com/p/28321740

[sphinx_python]: https://blog.csdn.net/qq_38048756/article/details/118024734
[6c5013b144eb4d56b61f96de5f450c14.png]: /images/20220829/f94b6e744bee40baad4d3c65e80790a5.png
[fdee5ce86e5442629c9099f208618c7d.png]: /images/20220829/416ed89609f945548ffb4a533d7a8c1f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8fc8d073da8e42c1b5edb854fbe97125.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e0406a2b6c10425fb09fce063c4c838f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aaL5a2m5Lmg55qE6Lqr5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/9f8824f21aee4e71b67559767d6c01ca.png