Including CSS stylesheets in Jekyll pages

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="https://stackoverflow.com/questions/32723405/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!

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)