CODEWITHSUNDEEP
twitter-bootstrapjekyll
Mpron
Mpron

Reputation: 132

Stylesheets not working for Jekyll theme Freelancer bootstrap

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

Upvotes: 4

Views: 3641

Answers (4)

VonC
VonC

Reputation: 1327224

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.

  1. Create a new GitHub repository or go to an existing one.
  2. Open the theme chooser in the GitHub Pages section of your repository settings.
  3. Select a theme.

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

enter image description here

Upvotes: 0

David Hackro
David Hackro

Reputation: 3712

you need dowload the Official Alternate Versions:

Jekyll Logo Jekyll Version

Upvotes: 0

bikz05
bikz05

Reputation: 1605

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.

Upvotes: 4

David Jacquel
David Jacquel

Reputation: 52829

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

Upvotes: 6

Related Questions