jekyll - 为什么我的Jekyll网站在Github Pages上显示HUGE图标

Question

我使用jekyll new simple-site生成了一个新的jekyll网站

该站点在localhost中看起来不错。无论如何，这是默认生成的虚拟站点。

我将其推送到存储库的gh-pages分支。

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

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

同样，顶部显示3个巨大的块。它们还是svg，应该是细线。

这是我的网站: http://ananthp.github.io/carnatic_scores/
( repo : 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 ，浏览器将其解析为 http://ananthp.github.io/css/main.css = 404找不到。

将 baseurl设置为 “/carnatic_scores” 时，您的相对网址是 /carnatic_scores/css/main.css ，您的浏览器将其解析为 http://ananthp.github.io/carnatic_scores/css/main.css =很酷的CSS!

所有 Assets (css，js和图片)都是如此:

<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)