Jekyll Plugin Showcase - Template Examples

January 20, 2024 • Sour Theme

This post demonstrates all the Jekyll plugins included in the Sour theme. Use this as a reference guide and template for your own posts.

Table of Contents Plugin

The table of contents is automatically generated from your headings when you add toc: true to your frontmatter.

---
layout: post
title: "Your Post"
toc: true
---

Reading Time Plugin

Reading time: 5 minutes

This is automatically calculated and can be displayed anywhere in your post using:

5 minutes

YouTube Plugin

Embed YouTube videos easily:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>    <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe></div>

YouTube with Custom Parameters

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>    <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe></div>

GitHub Gist Plugin

Embed GitHub gists directly:

<noscript><pre>class HelloWorld
   def initialize(name)
      @name = name.capitalize
   end
   def sayHi
      puts &quot;Hello #{@name}!&quot;
   end
end

hello = HelloWorld.new(&quot;World&quot;)
hello.sayHi</pre></noscript><script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js"> </script>

Gist with Specific File

<noscript><pre>404: Not Found</pre></noscript><script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js?file=hello.rb"> </script>

SEO Plugin Features

Automatic Meta Tags

The jekyll-seo-tag plugin automatically generates:

Title tags
Meta descriptions
Open Graph tags
Twitter Card tags
Canonical URLs
JSON-LD structured data

Custom SEO in Frontmatter

---
title: "Your Post Title"
description: "Custom meta description for SEO"
image: "/assets/images/featured.jpg"
---

Archives Plugin

The theme automatically creates archive pages for:

Categories: /category/tutorial/
Tags: /tag/jekyll/

Using Categories and Tags

---
category: tutorial
tags: [Jekyll, Web Development, Tutorial]
---

Pagination Plugin

The advanced pagination plugin creates paginated post lists:

Homepage shows latest 6 posts
Archive page shows all posts
Pagination links automatically generated

Configuration in _config.yml:

pagination:
  enabled: true
  per_page: 6
  permalink: '/page/:num/'

Redirect Plugin

Create redirects from old URLs:

---
title: "New Post"
redirect_from:
  - /old-url/
  - /another-old-url/
---

Target Blank Plugin

External links automatically open in new tabs with proper security attributes.

External link example

Last Modified Plugin

Show when content was last updated:

Last modified: August 24, 2025

Last modified: August 24, 2025

Feed Plugin

Automatic RSS feed generation at /feed.xml

Subscribe to the feed: RSS Feed

Sitemap Plugin

Automatic sitemap generation at /sitemap.xml for SEO.

Syntax Highlighting

Using Rouge for syntax highlighting:

JavaScript Example

function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to Sour Theme, ${name}`;
}

const user = "Developer";
greetUser(user);

CSS Example

.sour-theme {
  @apply bg-gradient-to-r from-primary to-secondary;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sour-theme:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Ruby Example

class SourTheme
  attr_reader :name, :version
  
  def initialize(name, version)
    @name = name
    @version = version
  end
  
  def description
    "#{@name} v#{@version} - A Jekyll theme with TailwindCSS"
  end
end

theme = SourTheme.new("Sour", "1.0.0")
puts theme.description

Advanced Markdown Features

Tables

Plugin	Purpose	Usage
jekyll-seo-tag	SEO optimization	Automatic
jekyll-sitemap	XML sitemap	Automatic
jekyll-feed	RSS feed	Automatic
jekyll-toc	Table of contents	`toc: true`

Task Lists

Footnotes

Here’s a statement that needs a citation¹.

Blockquotes

“The best way to learn Jekyll is to build something with it. The Sour theme provides a perfect starting point with all the tools you need.”

— Sour Theme Documentation

Code Blocks with Line Numbers

# app.rb
require 'jekyll'

class MyJekyllSite
  def initialize
    @config = Jekyll.configuration({
      'source' => '.',
      'destination' => './_site'
    })
  end
  
  def build
    site = Jekyll::Site.new(@config)
    site.process
  end
end

Image Examples

Responsive Images

Sour Theme Screenshot

Image with Caption

Sample image — This is a sample image with a caption demonstrating responsive design.

Custom Liquid Tags

Highlighting Important Information

<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">hello_world</span>
  <span class="nb">puts</span> <span class="s2">"Hello, World!"</span>
<span class="k">end</span></code></pre></figure>

def hello_world
  puts "Hello, World!"
end

Performance Tips

Lazy Loading

Images can be lazy-loaded for better performance:

<img src="image.jpg" loading="lazy" alt="Description">

Optimized Assets

The theme automatically:

Minifies CSS in production
Optimizes images
Compresses HTML
Generates efficient navigation

Customization Examples

Custom Variables

# _config.yml
custom_variables:
  brand_color: "#00ff88"
  font_family: "Inter"
  enable_dark_mode: true

Custom Includes

Create reusable components in _includes/:

<!-- _includes/alert.html -->
<div class="alert alert-info">
  
</div>

Usage:

<!-- Alert Component - Customizable notification/warning box -->
<!-- Usage: include alert.html type="warning" message="Your message here" -->
<!-- Types: info, success, warning, error -->






<div class="alert alert-warning my-4">
  <svg class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
  </svg>
  <span>This is a warning!</span>
</div>

This is a warning!

Testing Your Setup

Development Checklist

All plugins loading correctly
CSS compiling without errors
Search functionality working
Navigation responsive on mobile
SEO tags generating properly
Social media previews displaying

Build Verification

# Test build
make build

# Check for errors
bundle exec jekyll doctor

# Validate HTML (optional)
bundle exec htmlproofer ./_site

Next Steps

Now that you’ve seen all the plugin examples, try:

Create your first post using these templates
Customize the theme colors and layout
Add your own content and pages
Deploy to GitHub Pages or Netlify
Share your blog with the world!

Resources

This post serves as both documentation and a template. Feel free to copy and modify these examples for your own content!

This is the footnote explaining the citation. ↩

Comments

Comments are powered by Utterances. You'll need a GitHub account to comment.

Loading comments...