Loading Scripts or Stylesheets Conditionally With Jekyll

Published on November 30, 2016


Loading Scripts or Stylesheets Conditionally With Jekyll

In an effort to reduce page weight to a minimum, there are a few tricks where Jekyll’s front matter can become really handy.

Only specific pages of 🐊 call for certain scripts or need certain styles applied. Front matter allows to create custom variables, so it becomes very easy to include the scripts or stylesheets only where needed.

Here’s for example the front matter for a guest post, interesting part highlighted:

layout: page-fullwidth
title:  "Sass @each Loops"
    - sass
    thumb: sass/sass-each-loops.png
meta_description: "Loop through maps and lists in Sass. Here's a quick snippet that shows you how."
guest: true

And here’s how it’s conditionally included in the footer include file:


  <link rel="stylesheet" property="stylesheet" href="/assets/css/authors.css">

Note that including stylesheets within the body tag is usually not allowed for valid html. A trick is to use property=“stylesheet” instead of type=“text/css” to make validators happy.

Note also that this creates a new http request, and some may argue that it’s probably better to have one large stylesheet file instead. Separating CSS into multiple modular files seems to be the way of the future though, so let’s optimize for that!

And here’s an example for a post that calls a Can I Use script for embedding Can I Use data:

layout: page-fullwidth
title:  "The CSS calc() function"
    - css
    title:  css/calc-2.svg
meta_description: "A nice little CSS function to let you calculate things."
caniuse: true

And finally, the liquid markup that conditionally includes it in the footer include file:


  <script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.1/caniuse-embed.min.js"></script>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel