Why is my Jekyll website showing HUGE icons on Github pages

Question

• I created a new jekyll site with jekyll new simple-site
• The site looks fine on the local host. This is the default, dummy site that is generated anyway.
• I clicked on the gh-pages repo branch.

Now the site is displayed under imtqy.com/, but with HUGE icons.

The svg icons for github and twitter in the default jekyll site cover the entire width of the page. They should be 16 pixels or so.

Similarly, 3 huge blocks appear at the top. They, again, are svg, which should be thin lines.

Here is my website: http://ananthp.imtqy.com/carnatic_scores/
(repo: https://github.com/ananthp/carnatic_scores/tree/gh-pages )

Answer 1

Since your site is not in the root of the ananthp.imtqy.com/ domain, but in the "directory" carnatic_scores /, you must set the baseurl variable in the _config.yml file.

 baseurl: '/carnatic_scores' 

Edit: some explanation

In _includes / head.html you can see this:

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

which is equivalent

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

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

baseurl set to "/ carnatic_scores" your relative url /carnatic_scores/css/main.css , which is resolved as http://ananthp.imtqy.com/carnatic_scores/css/main.css with your browser = your cool css!

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

Answer 2

David Jaquel answered correctly, but I wanted to indicate that Jekyll has a page on how to properly configure the Jekyll site for github pages . On this site, they specifically talk about a fix ( baseurl change), but they mention other important things that you need to know, for example, to preview your site with

 $ jekyll serve --baseurl '' 

Good luck and happy blogging!