为什么我的Jekyll网站在Github Pages上显示巨大的图标

Question

1. 我使用jekyll new simple-site
生成了一个新的jekyll网站
2. 该网站在localhost中看起来不错。它是默认的虚拟网站，无论如何都会产生。
3. 我把它推到了回购的gh-pages分支。

现在该网站显示在github.io/下，但带有巨大的图标。

默认的jekyll生成网站中github和twitter的svg图标跨越页面的整个宽度。它们应该是16px左右。

同样，顶部出现3个巨大的块。它们又是svg，应该是细线。

这是我的网站：http://ananthp.github.io/carnatic_scores/
（回复：https://github.com/ananthp/carnatic_scores/tree/gh-pages）

Answer 1

由于您的网站不在域ananthp.github.io/的根目录，但在“目录”carnatic_scores /中，您必须在_config.yml文件中设置baseurl变量。

baseurl: '/carnatic_scores'

编辑：一些解释

在_includes / head.html中，您可以看到：

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

相当于

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">

将baseurl设置为“”（默认），您的相对网址为 /css/main.css ，其解析为 {{浏览器3}} =找不到404。

将baseurl设置为“/ carnatic_scores”，您的相对网址为 /carnatic_scores/css/main.css ，其解析为 {您的浏览器显示{3}} =您的酷css！

所有资产（css，js和image）都是如此：

<script src="{{ site.baseurl }}/path_to_scripts/script.js"></script>

<img src="{{ site.baseurl }}/path_to_images/image.jpg">

or in markdown

![Image alt]({{ site.baseurl }}/path_to_images/image.jpg)

Answer 2

David Jacquel的回答是正确的，但我想指出Jekyll有a page about how to properly setup your Jekyll site for github pages。在该网站上，他们专门讨论了修复（更改baseurl），但他们提到了您必须了解的其他重要事项，例如预览您的网站

$ jekyll serve --baseurl ''

祝你好运，博客愉快！