email

Building a Modular Email System with Jekyll

Jeffrey Overmeer
Aug 20, 2023

Learn how to create a powerful and flexible modular email system using Jekyll. This comprehensive tutorial guides you through the process of building reusable email components like headers, text blocks, images, buttons, and footers. Discover how to structure email templates, generate emails with dynamic content, and test their rendering across different email clients. Whether you're a developer or a marketer, this tutorial empowers you to send beautifully crafted and consistent emails effortlessly.

In this tutorial, we’ll walk through the step-by-step process of building a modular email system using Jekyll. Jekyll is a static site generator commonly used for building websites, but it can also be utilized to generate emails. The modular system we’ll build will make it easy to create reusable email components and assemble them into complete emails.

Table of Contents

  1. Preparations
    • Installing Jekyll
    • Setting up the Basic Structure
  2. Modular Email Components
    • Header
    • Text Blocks
    • Images
    • Call-to-Action Buttons
    • Footer
  3. Creating Email Templates
    • Template for Promotion Email
    • Template for Newsletter
  4. Generating Emails
    • Using YAML Front Matter
    • Utilizing Includes
  5. Testing and Sending
    • Testing Across Email Clients
    • Sending the Emails

1. Preparations

Installing Jekyll

Make sure you have Jekyll installed on your system. Use the following command to install Jekyll via RubyGems:

gem install jekyll

Setting up the Basic Structure

Create a new directory for your project and navigate into it:

mkdir modular_email_system
cd modular_email_system

Initialize a new Jekyll project:

jekyll new .

2. Modular Email Components

Create a new file named _header.html in the _includes directory. This file will contain the code for the email header:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <h1>Our Amazing Emails</h1>
    </td>
  </tr>
</table>

Text Blocks

Create a new file named _text_block.html in the _includes directory. This file will contain the code for a reusable text block:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <p>{{ include.text }}</p>
    </td>
  </tr>
</table>

Images

Create a new file named _image.html in the _includes directory. This file will contain the code for inserting an image:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <img src="{{ include.image_url }}" alt="{{ include.image_alt }}" width="300">
    </td>
  </tr>
</table>

Call-to-Action Buttons

Create a new file named _cta_button.html in the _includes directory. This file will contain the code for a call-to-action button:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <a href="{{ include.button_url }}" style="background-color: #007bff; color: #ffffff; padding: 10px 20px; text-decoration: none;">
        {{ include.button_text }}
      </a>
    </td>
  </tr>
</table>

Create a new file named _footer.html in the _includes directory. This file will contain the code for the email footer:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <p>&copy; {{ site.year }} Our Company. All rights reserved.</p>
    </td>
  </tr>
</table>

3. Creating Email Templates

Template for Promotion Email

Create a new file named promotion_email.html in the _layouts directory. This file will serve as the template for a promotion email:

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
</head>
<body>
  {% include _header.html %}
  
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        {% include _text_block.html text="Don't Miss This Amazing Offer!" %}
      </td>
    </tr>
    <tr>
      <td>
        {% include _cta_button.html button_text="View Now" button_url="#" %}
      </td>
    </tr>
  </table>
  
  {% include _footer.html %}
</body>
</html>

Template for Newsletter

Create a new file named newsletter.html in the _layouts directory. This file will be the template for a newsletter:

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
</head>
<body>
  {% include _header.html %}
  
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        {% include _text_block.html text="News and Updates for This Month:" %}
      </td>
    </tr>
    <tr>
      <td>
        {% include _text_block.html text="1. New Product Launch" %}
        {% include _image.html image_url="image1.jpg" image_alt="New Product" %}
      </td>
    </tr>
    <tr>
      <td>
        {% include _text_block.html text="2. Our Recommendation of the Month" %}
        {% include _cta_button.html button_text="Read More" button_url="#" %}
      </td>
    </tr>
  </table>
  
  {% include _footer.html %}
</body>
</html>

4. Generating Emails

Using YAML Front Matter

In each email template (e.g., promotion_email.html and newsletter.html), use YAML Front Matter to set the email’s title:

---
layout: promotion_email
title: Amazing Offer!
---

Utilizing Includes

Use the previously created includes to compose emails within the templates. Include the appropriate variables for dynamic content.

5. Testing and Sending

Testing Across Email Clients

Before sending the emails, test them across various email clients to ensure proper rendering. Use services like Litmus or Email on Acid for comprehensive testing.

Sending the Emails

To send the emails, you can use an email marketing service such as DeployTeq, Marigold Engage, or Salesforce Marketing Cloud. These services provide tools to send your emails to subscribers and track statistics.

With this tutorial, you’ve set up a modular email system using Jekyll. You can now easily create reusable email components and assemble them into professional email templates. Remember to test and optimize your emails for different email clients before sending them to your subscribers.

Comments