Using Jekyll to generate a html newsletter
Jekyll, my man
Jekyll is a powerful static website generator which can be used to design a website or a blog.
We have been using Jekyll for our Nomagic website for a couple of years now, and have been very happy with it. Documentation is comprehensible, and plenty of tutorials, examples and themes can be fournd online. Jekyll encourages the use of templates. Those can be used for many things, like looping through your posts, generating posts and pages preview, links, etc. The Liquid templating language is used by Jekyll to process templates.
Keeping your users in the loop
Recently, we started to send a monthly newsletter for Nomagic, with the same information as the latest news, to ensure our users are aware of ongoing work, issues, upcoming implementations, etc.
This turned out to be more tedious and time-consumming than planned, as we ended up having to change the HTML structure for the newsletter, removing SVG pictures, re-write old and new CSS to be contained within the html file, plus trimming some parts of the post that were not relevant for a newsletter, and adding others.
However, in the end it worked out and we ended up with a valid and simple HTML file that we could use to send our newsletter. But what about next month newsletter?
Let Jekyll generate your newsletter for you
So we have all we need:
- a templated newsletter heavily relying on tables to ensure best compatibility in webmails and mail clients
- the content of our last post
- we know what we want to keep, and what we want to remove
Using Jekyll and some Liquid magic, we can actually generate a newsletter page during the publication of our news.
Let’s get started!
First, we need to declare a new layout, and prepare our html template file, which we will set at a fixed location. We will take the exact settings we used for our Nomagic newsletter to give a full concrete example.
From the root of our jekyll folder, we create a new file for our newsletter.html page, which we put into our other directory, for anything with is neither main pages nor posts:
$ cat pages/other/newsletter.md
---
layout: newsletter
permalink: /other/newsletter.html
---While we are at it, we can set/edit our robots.txt file to exclude our newsletter page from crawlers:
$ cat robots.txt
User-agent: *
Disallow: /other/newsletter.htmlNow for the HTML template, which contains pretty much everything we talked about before:
- We set up a basic, valid HTML page using 2 html table items to format our content in a way that should be compatible with most webmails and mail clients.
- We add a direct link to the post in the newsletter header
- We add our special banner to the header of the newsletter
- We are using Jekyll plugin regex_replace in order to be able to remove all images from the original post.
- We also remove our usual notice about our website banner, as well as the usual credit of icons for our monthly news.
- A small liquid filter is used to select the content of the latest post.
$ cat _layouts/newsletter.html
---
layout: none
---
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
a { color: #12ACE9; text-decoration: none }
a:hover { color: #F94A96; }
</style>
</head>
<body>
{% for post in site.posts limit:1 %}
<table border="0" cellpadding="0" bgcolor="#ddd" cellspacing="0" height="100%" id="bodytable" style="width: 100%; height: 100%; margin: 0px; padding: 10px 0; min-width: 320px;" width="100%">
<tr>
<td align="center" style="background-color: #ddd; vertical-align: top;" valign="top">
<p><em>This newsletter is a rehash of the post published on <a href="{{ post.url }}" target="_blank" rel="noopener">Nomagic website</a>.</em></p>
<table bgcolor="#f5f5f5" style="width: 80%; margin: 0px; padding: 0px 14px 0px 14px; min-width: 320px; color: #45474A; line-height: 26px;" width="80%">
<tr><td>
<center>
<p><img src="/assets/img/nomagic_ltd_banner.png" alt="Banner Nomagic" title="title" style="margin-bottom: 20px;"></p>
</center>
{{ post.content | regex_replace: '<img .*src=.*/>', "" | replace: '<p><small>Icons made by <a href="https://www.flaticon.com/authors/mavadee" title="mavadee">mavadee</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></small></p>', '' | regex_replace: 'You may not have seen it if you are browsing from a mobile device.*\nWe use this space it to advertise on endeavours and projects of interest.', '' }}
</td>
</tr>
</table>
</td>
</tr>
</table>
{% endfor %}
</body>
</html>Et voilà!
That’s pretty much it, now load or reload your website and check your ready-to-use newsletter!
Using our Sympa mailing instance, sending our newsletter is as simple as a fixed URL copy/paste.