How to insert Jekyll plugins to your site in Shopify

You are now able to write or download Ruby code to extend Jekyll with Jekyll plugins so that it can be more useful and help you do whatever you need.

However, please keep reading our instructional writing on How to insert Jekyll plugins to your site to know more deeply about Jekyll plugins and how to get it installed.

How to insert Jekyll plugins to your site

5 Categories of Jekyll plugins {#5-categories-of-jekyll-plugins}

We would like to introduce to you five categories of Jekyll plugins which include Generators, Converters, Commands, Tags, and Filters.

Generators

Generators help you create content on your website.

For instance:

Converters

Converters are able to turn a markup language into a different format.

For instance:

Commands

Commands are capable of extending the jekyll executable with sub-commands.

For instance:

Tags

Tags are to create custom Liquid tags.

For instance:

Filters

Able to create custom Liquid filters.

For instance:

Hooks

Hooks can help you have complete control over various points in the build process.

How to install Jekyll plugins?

You may wonder how to get Jekyll plugins installed. Don’t be worried, please follow us.

There are 2 ways in total for you to install Jekyll plugins.

Method 1: Download plugin

This must be the easiest way. You just need to download a plugin to the _plugins directory on our web.

We will add a plugin for calculating an estimated read time to take an example.

Firstly, create _plugins/reading_time.rb and add the following source code:


# Outputs the reading time

# Read this in “about 4 minutes”
# Put into your _plugins dir in your Jekyll site
# Usage: Read this in about {{ page.content | reading_time }}

module ReadingTimeFilter
  def reading_time( input )
    words_per_minute = 180

    words = input.split.size;
    minutes = ( words / words_per_minute ).floor
    minutes_label = minutes === 1 ? " minute" : " minutes"
    minutes > 0 ? "about #{minutes} #{minutes_label}" : "less than 1 minute"
  end
end

Liquid::Template.register_filter(ReadingTimeFilter)

Now you can use this filter using `You are now able to write or download Ruby code to extend Jekyll with Jekyll plugins so that it can be more useful and help you do whatever you need.

However, please keep reading our instructional writing on How to insert Jekyll plugins to your site to know more deeply about Jekyll plugins and how to get it installed.

How to insert Jekyll plugins to your site

5 Categories of Jekyll plugins {#5-categories-of-jekyll-plugins}

We would like to introduce to you five categories of Jekyll plugins which include Generators, Converters, Commands, Tags, and Filters.

Generators

Generators help you create content on your website.

For instance:

Converters

Converters are able to turn a markup language into a different format.

For instance:

Commands

Commands are capable of extending the jekyll executable with sub-commands.

For instance:

Tags

Tags are to create custom Liquid tags.

For instance:

Filters

Able to create custom Liquid filters.

For instance:

Hooks

Hooks can help you have complete control over various points in the build process.

How to install Jekyll plugins?

You may wonder how to get Jekyll plugins installed. Don’t be worried, please follow us.

There are 2 ways in total for you to install Jekyll plugins.

Method 1: Download plugin

This must be the easiest way. You just need to download a plugin to the _plugins directory on our web.

We will add a plugin for calculating an estimated read time to take an example.

Firstly, create _plugins/reading_time.rb and add the following source code:

{% raw %}
# Outputs the reading time

# Read this in “about 4 minutes”
# Put into your _plugins dir in your Jekyll site
# Usage: Read this in about {{ page.content | reading_time }}

module ReadingTimeFilter
  def reading_time( input )
    words_per_minute = 180

    words = input.split.size;
    minutes = ( words / words_per_minute ).floor
    minutes_label = minutes === 1 ? " minute" : " minutes"
    minutes > 0 ? "about #{minutes} #{minutes_label}" : "less than 1 minute"
  end
end

Liquid::Template.register_filter(ReadingTimeFilter)
{% endraw %}

Now you can use this filter using {{ page.content | reading_time }}. On our Bakery Store site, we’‘ve added the filter to _layouts/post.html:

{% raw %}
---
layout: default
---
<div class="container">
  <h2 class="spacing">{{ page.title }}</h2>

  <div class="blog-post spacing">
    <p class="summary">{{ page.category }} - {{ content | reading_time }} <span class="date">{{ page.date | date: '%B %d, %Y' }}</span></p>
    {{ content }}
  </div>
</div>
{% endraw %}

u

Method 2: Gemfile

This method could be more complicated a little bit but it’s such a much better option as it gives you permission to upgrade a plugin in the future easily. These instructions assume that you know what a Gem, a bundler, and a Gemfile are.

We will add the jekyll-fedd plugin to our site to take an example.

We need to create Gemffile first with jekyll and jekyll-feed Gems:

{% raw %}
source 'https://rubygems.org'

gem 'jekyll', '3.1.6'

group :jekyll_plugins do
  gem 'jekyll-feed'
end
{% endraw %}

Next, please use the bundler to install the Gems:

bundle install

Now you are able to use {% raw %}{% feed_meta %}{% endraw %} to add a link to the feed in <head>:

{% raw %}
...
<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700" media="all">
  {% feed_meta %}
</head>
...
{% endraw %}

Finally, you need to use bundle exec to run Jekyll:

bundle exec jekyll serve

Now you can say that our live site already has a /feed.xml file with a list of the blog posts.

j

Conclusion

Hope that this writing on could help you understand the ways to add Jekyll plugins to your site!

. On our [Bakery Store site](https://github.com/CloudCannon/bakery-store-jekyll-template/tree/plugins), we''ve added the filter to _layouts/post.html`:


---
layout: default
---
<div class="container">
  <h2 class="spacing">{{ page.title }}</h2>

  <div class="blog-post spacing">
    <p class="summary">{{ page.category }} - {{ content | reading_time }} <span class="date">{{ page.date | date: '%B %d, %Y' }}</span></p>
    {{ content }}
  </div>
</div>

u

Method 2: Gemfile

This method could be more complicated a little bit but it’s such a much better option as it gives you permission to upgrade a plugin in the future easily. These instructions assume that you know what a Gem, a bundler, and a Gemfile are.

We will add the jekyll-fedd plugin to our site to take an example.

We need to create Gemffile first with jekyll and jekyll-feed Gems:


source 'https://rubygems.org'

gem 'jekyll', '3.1.6'

group :jekyll_plugins do
  gem 'jekyll-feed'
end

Next, please use the bundler to install the Gems:

bundle install

Now you are able to use {% feed_meta %} to add a link to the feed in <head>:


...
<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700" media="all">
  {% feed_meta %}
</head>
...

Finally, you need to use bundle exec to run Jekyll:

bundle exec jekyll serve

Now you can say that our live site already has a /feed.xml file with a list of the blog posts.

j

Conclusion

Hope that this writing on could help you understand the ways to add Jekyll plugins to your site!