Including CSS stylesheets in Jekyll pages

Question

I have been playing around with Jekyll for a couple of weeks now and I am trying to create a default style for each of my blog posts, but I'm not exactly sure where and how it's supposed to be done. My main index page works fine in terms of styling but my posts have no CSS being passed to them whatsoever despite trying various methods.

Is the CSS for blog posts supposed to be written in _layouts/default.html or _layouts/posts.html, and do I have to specify which stylesheets I want to use in the YAML, by using {% include ...%}, or by writing

{% if page.style %}
    <link rel="stylesheet" href="{{ page.style }}">
{% endif %}

I wasn't able to find information that gave a clear cut answer.

Huguenot

Answer 1

The Jekyll way to do this is to take whichever layout you are going to use for the final page (for example _layouts/posts.html) and create your HTML document skeleton there (i.e. html, head, and body tags). In the head of the layout HTML, put {% include blog-head.html %}. This blog-head.html file is where we are going to include all of the CSS, JS, etc. that is required for every blog page.

Then in your blog-head.html, you can just write the CSS file include for a custom CSS file:

<link rel="stylesheet" href="blogposts.css">

This way, you can easily include the same head section in all of your blog post pages, and you can easily update that head section (adding, removing, or changing CSS/JS) and it will automatically take effect across all of your blog posts.

The following link provides general steps on overriding theme defaults: Jekyll: Overriding Theme Defaults. The page provides instructions for getting a copy of the html base layout file (from your theme) that you will need to modify with the new CSS link.

Please follow up if you would like me to clarify anything!

Blaspheme

thanks for the guidance. Once question though. Is the blog-head.html file supposed to be in the _layouts folder? – Huguenot

@Huguenot blog_head.html goes in the _includes folder. Hope that helps! – Blaspheme

And where would the CSS file have to be located. Because for some reason it still isn't rendering after doing all of that. Sorry for the ridiculous questions. – Huguenot

@Huguenot The CSS file should be located in the main Jekyll folder, if I'm not mistaken. (You can use an absolute or relative path on the link tag if you would like your CSS in a subdirectory.) – Blaspheme

Do you need a closing "/" on that tag? E.g. <link rel="stylesheet" href="blogposts.css" />? – Tali

@AndrewJanke The self closing tag is optional, since link is a void element. More info: html.spec.whatwg.org/multipage/syntax.html#start-tags – Blaspheme

this looks outdated now. any updates on how to do it without adding a hard code like that? – Handwriting

figured out my unrelated error (my css contained some front matter)... in any case to answer my own question: just add the file into main.scss's @import on the bottom. – Handwriting

Answer 2

When I want a quick and dirty way to add some CSS into a post, I'll just add a <style> tag in the body of my post.

---
layout: post
title: "quick and dirty CSS in jekyll posts"
date: 2016-04-08 13:04:00
---

<style type="text/css">
  p {
    border: 1px solid black;
  }
</style>

whoa this paragraph has a border around it, such magic

Goffer

Answer 3

Simple solution is create in your _includes/a head.html (will replace the head that you use in your index c:) file that includes the import from your css. So you can include it anywhere, but you must put the ../css/main.css, the key here are the 2 dots.

<link rel="stylesheet" href="../css/main.css">

Now it works. At least it solves the 404 non-style error and the url like myUrl:4000/categories.

Hope it helps you :)

Torsibility

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Headstrong

Answer 4

You can get really crazy with includes and no doubt the code ends up looking well factored and cool. However, productivity can take a hit. Especially initially, when you may be doing most of your work with a 'Live Preview' tool like Brackets.io. Early on you may not be ready to start your 'jekyll serve' workflow pattern. I suspect part of your issue is not including the 'baseurl' config parameter.

A happy medium solution that works for me is to conditionally include header links.

{% if site.baseurl %}
  {% include links.html %}
{% else %}
  <link rel="stylesheet" href="/solarized-dark.css">
  <link rel="stylesheet" href="/site.css">
{% endif %}

This handles all workflows: live preview, jekyll server and production.

If you are testing locally with jekyll you can pass an empty baseurl parameter.

jekyll serve --baseurl ''

http://jekyllrb.com/docs/github-pages/#project-page-url-structure

Wrecker

Regarding to that url and baseurl Issue, I created an "ruby plugin" website_url see here – Kun