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

score 6 · Accepted Answer · answered Aug 23 '14 at 21:03

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 }}">

I've seen your answers on other Jekyll questions, David. You're a Jekyll BEAST. Your advice worked well. I'm really starting to like Jekyll and I think I should try to make myself an expert in it. — Mpron, Aug 24 '14 at 04:49

score 4 · Answer 2 · answered Jul 11 '15 at 04:57

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.

score 0 · Answer 3 · answered Mar 25 '16 at 23:43

0

you need dowload the Official Alternate Versions:

Jekyll Logo Jekyll Version

answered Mar 25 '16 at 23:43

David Hackro

3,652
6
41
61

score 0 · Answer 4 · answered Dec 15 '16 at 23:21

Note that since Dec. 2016, you have a new theme chooser which should make switching themes easier.
See "New theme chooser for GitHub Pages ":

You can now build a GitHub Pages website with a Jekyll theme in just a few clicks.

Create a new GitHub repository or go to an existing one.

Open the theme chooser in the GitHub Pages section of your repository settings.

Select a theme.

See more at "Creating a GitHub Pages site with the Jekyll Theme Chooser"

Stylesheets not working for Jekyll theme Freelancer bootstrap

4 Answers4

Linked