Including CSS in Jekyll

Jekyll is a blog aware static-site generator. It’s great for building simple pages like Code Guide or blogs like this one. Lately, I’ve been a big fan of Jekyll’s include functionality.

Now, most folks use _includes for standard partials like a site’s…


This content originally appeared on @mdo and was authored by Mark Otto

Jekyll is a blog aware static-site generator. It’s great for building simple pages like Code Guide or blogs like this one. Lately, I’ve been a big fan of Jekyll’s include functionality.

Now, most folks use _includes for standard partials like a site’s header or footer. Lately though, I’ve been using them to easily include CSS dependencies for fewer page requests.

Say you have three CSS files to include in your Jekyll project. Normally you’d do something like this:

<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" href="syntax.css">

With Jekyll, you can turn that into one file during site generation with includes and YAML front-matter. Here’s an example Gist.

The front-matter tells Jekyll to treat this page as a buildable file rather than simply another asset to copy to the generated _site folder. With that in place, add any _includes you like, and run jekyll serve.

Enjoy!


This content originally appeared on @mdo and was authored by Mark Otto


Print Share Comment Cite Upload Translate Updates
APA

Mark Otto | Sciencx (2014-02-28T00:00:00+00:00) Including CSS in Jekyll. Retrieved from https://www.scien.cx/2014/02/28/including-css-in-jekyll/

MLA
" » Including CSS in Jekyll." Mark Otto | Sciencx - Friday February 28, 2014, https://www.scien.cx/2014/02/28/including-css-in-jekyll/
HARVARD
Mark Otto | Sciencx Friday February 28, 2014 » Including CSS in Jekyll., viewed ,<https://www.scien.cx/2014/02/28/including-css-in-jekyll/>
VANCOUVER
Mark Otto | Sciencx - » Including CSS in Jekyll. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2014/02/28/including-css-in-jekyll/
CHICAGO
" » Including CSS in Jekyll." Mark Otto | Sciencx - Accessed . https://www.scien.cx/2014/02/28/including-css-in-jekyll/
IEEE
" » Including CSS in Jekyll." Mark Otto | Sciencx [Online]. Available: https://www.scien.cx/2014/02/28/including-css-in-jekyll/. [Accessed: ]
rf:citation
» Including CSS in Jekyll | Mark Otto | Sciencx | https://www.scien.cx/2014/02/28/including-css-in-jekyll/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.