Stylesheets not working for Jekyll theme Freelancer bootstrap

Question

I already have a username.github.io repository for my personal blog, and now my goal is to create another github-hosted jekyll page using a completely different theme I found. Here's the link to the theme I'm using: https://github.com/jeromelachaud/freelancer-theme

So I created a new repository on my machine and on github, connected the local repository to the remote github on, created an orphan gh-pages branch, and then forked the freelancer-theme and cloned it into the folder of the new repository I created while on the gh-pages branch. I used a command to move all the files (except the git init i think) into the parent folder of the new repository. I deleted the freelancer-theme fork folder and installed the most recent version of Jekyll with gem install jekyll. Then I ran jekyll serve and the site renders perfectly on my machine. Made some modifications, still renders fine with new modifications. After pushing those changes to the gh-pages branch of my repository on github, I now go to username.github.io/nameofmynewrepository and I get a site with all the components of the theme but the css doesn't seem to be working.

Has anyone worked with this theme and do they know the possible cause? It's very sparse on documentation.
Here is the url for my github page with the stylesheets not working: http://mpron.github.io/mybrotheriswrong/

And here is my new repo on the gh-pages branch: https://github.com/mpron/mybrotheriswrong/tree/gh-pages

Answer 1

As your github pages site is a project site, his default url looks like user.github.io/projectrepository.

This means that when you look for a resource (css, js or img) at /resourcefolder/ressource.css it look for it at user.github.io/resourcefolder/ressource.css.

The /projectrepository part is missing and that's why you have to use the baseurl parameter in _config.yml

In your case, you just have to add :

baseurl: /mybrotheriswrong

in your _config.yml.

The tag will then prepend it to your css href and successfully find it at /mybrotheriswrong/css/font-awesome/css/font-awesome.min.css.

And this will also resolve you js problem.

You also should use site.baseurl on you images if you plan to have page on a different level like about/index.html or use post's permalink like somefolder/

<img src="{{ site.baseurl }}/img/portfolio/{{ post.img }}" class="img-responsive" alt="{{ post.alt }}">

Answer 2

This is how I fixed the error -

In _includes/head.html change -

<!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="{{ "/style.css" }}">

<!-- Custom Fonts -->
<link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" }}">

to

<!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="{{ "style.css" }}">

<!-- Custom Fonts -->
<link rel="stylesheet" href="{{ "css/font-awesome/css/font-awesome.min.css" }}">

And in _includes/js.html change -

Change -

<!-- Bootstrap Core JavaScript -->
<script src="{{ "/js/bootstrap.min.js" }}"></script>

<!-- Plugin JavaScript -->
<script src="{{ "/js/jquery.easing.min.js" }}"></script>
<script src="{{ "/js/classie.js" }}"></script>
<script src="{{ "/js/cbpAnimatedHeader.js" }}"></script>

<!-- Contact Form JavaScript -->
<script src="{{ "/js/jqBootstrapValidation.js" }}"></script>
{% if site.contact == "static" %}
<script src="{{ "/js/contact_me_static.js" }}"></script>
{% else %}
 <script src="{{ "/js/contact_me.js" }}"></script>
{% endif %}

<!-- Custom Theme JavaScript -->
<script src="{{ "js/freelancer.js" }}"></script>

to

<!-- Bootstrap Core JavaScript -->
<script src="{{ "js/bootstrap.min.js" }}"></script>

<!-- Plugin JavaScript -->
<script src="{{ "js/jquery.easing.min.js" }}"></script>
<script src="{{ "js/classie.js" }}"></script>
<script src="{{ "js/cbpAnimatedHeader.js" }}"></script>

<!-- Contact Form JavaScript -->
<script src="{{ "js/jqBootstrapValidation.js" }}"></script>
{% if site.contact == "static" %}
<script src="{{ "js/contact_me_static.js" }}"></script>
{% else %}
 <script src="{{ "js/contact_me.js" }}"></script>
{% endif %}

<!-- Custom Theme JavaScript -->
<script src="{{ "js/freelancer.js" }}"></script>

In short, we remove / from all the links. Why I removed this is explained in David's answer.