为什么我的 Jekyll 网站在 Github 页面上显示巨大的图标答案

【问题标题】：Why does my Jekyll site show HUGE icons on Github Pages为什么我的 Jekyll 网站在 Github 页面上显示巨大的图标
【发布时间】：2016-06-19 19:05:14
【问题描述】：

我用jekyll new simple-site 生成了一个新的jekyll 站点
该站点在本地主机中看起来不错。无论如何，它都是默认生成的虚拟网站。
我将它推送到了一个 repo 的 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）

【问题讨论】：

标签： jekyll github-pages

【解决方案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 设置为 ""（默认）您的相对 URL 为 /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 ！

所有资产（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)

【讨论】：

修复它。那么，缺少 baseurl 是否阻止了样式表的加载？
@DavidJacquel 关于this的任何想法

【解决方案2】：

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

预览您的网站

$ jekyll serve --baseurl ''

祝你好运，祝你写博客快乐！

【讨论】：