DEV Community

Cover image for Creating a Gemfile for a Jekyll Plugin: A Step-by-Step Guide
Yosi Leyid for Hasidic Development Group

Posted on • Updated on

Creating a Gemfile for a Jekyll Plugin: A Step-by-Step Guide

If you are new to Jekyll, it is a popular static site generator that is used to build websites. Jekyll is built on Ruby, which means that you can write plugins for Jekyll using the Ruby programming language.

Before we dive into creating a Gemfile for a Jekyll plugin, let's first talk about what a Gemfile is. A Gemfile is a file that lists the gems, or Ruby packages, that your application or plugin depends on. Gems are packages of Ruby code that can be installed on your computer and used in your Ruby projects. A Gemfile makes it easy to manage your project's dependencies, so you don't have to worry about installing and updating each gem manually.

Now that we have a basic understanding of what a Gemfile is, let's talk about how to create one for a Jekyll plugin.

Step 1: Create a new directory for your Jekyll plugin

The first step in creating a Gemfile for a Jekyll plugin is to create a new directory for your plugin. You can name this directory whatever you like, but it's a good idea to name it something descriptive of your plugin.

For example, if you are creating a plugin that adds social media sharing buttons to your Jekyll site, you might name your directory "jekyll-social-sharing". To create a new directory in your terminal, navigate to the directory where you want to create the new directory, and type the following command:

mkdir jekyll-social-sharing
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize a new Git repository

Next, you will want to initialize a new Git repository in your plugin directory. This will allow you to easily track changes to your code and collaborate with other developers.

To initialize a new Git repository, navigate to your plugin directory in your terminal and type the following command:

git init
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a new Gemfile

Now that you have a directory for your plugin and a Git repository initialized, you can create a new Gemfile for your plugin. To do this, navigate to your plugin directory in your terminal and type the following command:

touch Gemfile
Enter fullscreen mode Exit fullscreen mode

This will create a new file called "Gemfile" in your plugin directory.

Step 4: Add dependencies to your Gemfile

Once you have created a Gemfile for your plugin, you can start adding dependencies to it. Dependencies are gems that your plugin relies on to function correctly. You can add dependencies to your Gemfile by specifying the gem name and version number, like this:

source "https://rubygems.org"
gem "jekyll"
gem "sass"
Enter fullscreen mode Exit fullscreen mode

In this example, we are adding two dependencies to our Gemfile: "jekyll" and "sass". The "source" line specifies where to download the gems from (in this case, the official RubyGems repository), and the "gem" lines specify the names and versions of the gems to install.

Step 5: Install dependencies

Once you have added dependencies to your Gemfile, you need to install them. To do this, navigate to your plugin directory in your terminal and type the following command:

bundle install
Enter fullscreen mode Exit fullscreen mode

This will install all of the gems specified in your Gemfile, as well as any dependencies that those gems rely on. If this is the first time you have run "bundle install" in your plugin directory, it may take a few minutes to download and install all of the necessary gems.

Step 6: Use dependencies in your plugin code

Now that you have installed your plugin's dependencies, you can start using them in your plugin code. For example, if your plugin relies on the "jekyll"

require "jekyll"
Enter fullscreen mode Exit fullscreen mode

This will allow you to use the functionality provided by the "jekyll" gem in your plugin code.

Here is an example of a simple Jekyll plugin that uses the "jekyll" and "sass" gems:

# jekyll-social-sharing.rb

require "jekyll"
require "sass"

module Jekyll
  class SocialSharing < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
    end

    def render(context)
      "<div class='social-sharing'>
        <a href='https://twitter.com/share' class='twitter-share-button'>Tweet</a>
        <a href='https://www.facebook.com/sharer/sharer.php?u=#{context['page']['url']}' class='facebook-share-button'>Share on Facebook</a>
      </div>"
    end

    Liquid::Template.register_tag "social_sharing", self
  end
end
Enter fullscreen mode Exit fullscreen mode

In this example, we are creating a new Liquid tag called "social_sharing" that generates social media sharing buttons for Twitter and Facebook. We are using the "jekyll" gem to access the Liquid template engine and the "sass" gem to style the buttons.

Step 7: Test your plugin

Once you have written your plugin code and installed all of the necessary gems, it's a good idea to test your plugin to make sure it works as expected. To do this, you can run your Jekyll site with the "jekyll serve" command and check that your plugin is working correctly.

jekyll serve
Enter fullscreen mode Exit fullscreen mode

If everything is working correctly, you should be able to see the social media sharing buttons on your Jekyll site.

Step 8: Publish your plugin

Once you have tested your plugin and made sure it works correctly, you may want to publish it so that others can use it. You can publish your plugin to the official RubyGems repository by creating a new account on https://rubygems.org and following the instructions for publishing a gem.

Conclusion

Congratulations! You have now learned how to create a Gemfile for a Jekyll plugin. By following these steps, you can easily manage your plugin's dependencies and ensure that your plugin works correctly. Remember to test your plugin thoroughly before publishing it, and to follow best practices for writing and publishing Ruby gems. Good luck!

Top comments (0)