Jekyll Blog not styled properly in github pages

1
votes

I have installed jekyll as well as created a post locally. I pushed my commits to the master branch & created an orphan branch gh-pages which has no commits.

In my _config.yml, the base url code is this, baseurl: "https://githubusername.github.io/blog" with blog being my repo.

I added <link rel="stylesheet" href="css/main.scss"> to default.html. Whenenver I load this link, https://githubusername.github.io/blog the site doesn't render properly.See Image

What could be my problem/error? Thanks in advance.

1
cssgithubjekyllgithub-pages

1 Answers

4
votes

  1. Set your baseurl to just: /blog.

    • Baseurl is the part after the url (something.github.io), before the page-path, read this for further clarification.

  2. Why is your HTML code for stylesheets linking to a .scss file? That's SCSS/SASS, which needs to be processed by Jekyll's SASS converter (or your own converter, into a nice CSS file). HTML only accepts CSS stylesheets.

    • To do so make sure your SCSS file has a YAML frontmatter, that is 3 dashes (-) then 2 newlines, followed by another 3 dashes.

  3. Change your stylesheet link in default.html to this:

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

    • Notice the .css instead of .scss, and also the additional site.baseurl

Alternatively, should you decide not to deal with all the site.baseurl stuff, you can just have site.baseurl remain a value of "https://githubusername.github.io/blog" and then just modify the style sheet link to href= blog/css/main.css (after converting the .scss file) but this defeats the purpose of a baseurl. Also, if you decide you don't want it to be in blog in the future you'll have to make a ton of link edits.