Why does my Jekyll site show HUGE icons on Github Pages

Question

1. I generated a new jekyll site with jekyll new simple-site
2. The site looks ok in the localhost. It's the default, dummy site that's generated anyways.
3. I pushed it to gh-pages branch of a repo.

Now the site shows up under github.io/ but with HUGE icons.

The svg icons for github and twitter in the default jekyll generated site span the whole width of the page. They should be 16px or so.

Similarly 3 huge blocks appear in the top. They, again, are svg, which are supposed to be thin lines.

Here's my site: http://ananthp.github.io/carnatic_scores/
(repo: https://github.com/ananthp/carnatic_scores/tree/gh-pages )

Answer 1

As your site is not at the root of the domain ananthp.github.io/ but in a "directory" carnatic_scores/, you have to set baseurl variable in your _config.yml file.

baseurl: '/carnatic_scores'

Edit: some explanations

In _includes/head.html you can see this :

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

which is equivalent to

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

With baseurl set to "" (default) your relative url is /css/main.css, which is resolved as http://ananthp.github.io/css/main.css by your browser = 404 not found.

With baseurl set to "/carnatic_scores" your relative url is /carnatic_scores/css/main.css, which is resolved as http://ananthp.github.io/carnatic_scores/css/main.css by your browser = your cool css !

That's true for all assets (css, js and 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)