Jekyll github pages site ignoring .css

Question

At one point this worked. However, i left the project in what I thought was working condition and then come back to find that the formatting is all broken. The repo is available here and the site hosted here.

I've checked my _layouts/ folder and it has the / seemingly correctly set as per the answer here.

Similarly I've set my base URL as this is a project page as per this question.

Possibly something went wrong when I pushed the RMD file in, however I've tried to wind back and push that as the version of the repo, but I didn't see any changes (maybe I did this badly, I'm very new to github, and pretty novice at git).

How can I get my formatting back? The original structure was made using this tutorial on jekyll and ghpages.

FINAL SOLUTION:

After inspecting and testing both answers from LarsW and David_Jacquel, the final fix is as follows:

_config.yml - include baseurl: /Pokemon_FieldStudies
default.html - include <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/main.css">

LarsW · Accepted Answer · 2016-04-10 15:25:52Z

2

The link is wrong. The first / in /css/main.css makes it go to the root folder, which is the domain (http://davergp.github.io/) and not the site (http://davergp.github.io/Pokemon_FieldStudies/). Just change it to /Pokemon_FieldStudies/css/main.css or css/main.css.

answered Apr 10, 2016 at 15:25

LarsW

1,5981 gold badge13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaveRGP Over a year ago

accepted as root answer, updating question with the actual solution implemented

David Jacquel · Accepted Answer · 2016-04-10 18:23:17Z

2

In _config.yml, set baseurl: /Pokemon_FieldStudies.

An call you css like this : <link rel="stylesheet" type="text/css" href="{{ baseurl }}/css/main.css">

edited Apr 10, 2016 at 18:23

answered Apr 10, 2016 at 15:27

David Jacquel

53k7 gold badges133 silver badges155 bronze badges

4 Comments

DaveRGP Over a year ago

I've just tested your implmentation, I'm not sure it's worked. Have I done it wrong? Are you sure I don't need the / in the baseurl argument? If I include that then it works, and is a more ideomatic way of supplying LarW's answer

DaveRGP Over a year ago

Now it's broken again. this slow refresh rater is frustrating.

DaveRGP Over a year ago

thanks, + 1, turned out you're approach partially functioned, and definitely put me on the right track

David Jacquel Over a year ago

Sorry it's baseurl: /Pokemon_FieldStudies the slash was missing.

satya · Accepted Answer · 2016-04-10 15:26:27Z

0

Your main.css is blank that why the webpage is coming without styling.

Put this code in your main.css and hope it should work.

body {
    margin: 60px auto;
    width: 70%;
}
nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}
a {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 3em;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}
footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}

ul.posts { 
    margin: 20px auto 40px; 
    font-size: 1.5em;
}

ul.posts li {
    list-style: none;
}

edited Apr 10, 2016 at 15:26

answered Apr 10, 2016 at 15:22

satya

1,1958 silver badges12 bronze badges

2 Comments

DaveRGP Over a year ago

thanks for the help, but my main css isn't blank... github.com/DaveRGP/Pokemon_FieldStudies/blob/gh-pages/css/…

LarsW Over a year ago

His main.css is blank because when loading, the browser got error 404

Mohammad Nimer · Accepted Answer · 2016-04-10 15:26:28Z

0

Check the .gitignore file if some how there is excluded CSS files not pushed to the remote repo.

answered Apr 10, 2016 at 15:26

Mohammad Nimer

12 bronze badges

Collectives™ on Stack Overflow

Jekyll github pages site ignoring .css

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related