Jekyll + Emails

Here at maxmautner.com we are big fans of Jekyll, the static site generator.

We recognize that many of our readers prefer to read our content via email. In order to support this we use a Jekyll theme called Loom converts our posts into HTML emails that look pretty on your little phones.

Your Jekyll site probably already has a theme so switching to Loom is a non-starter. This was the case for me so I cherry-picked the files needed from Loom to generate the email:

• scripts/email.sh
• email.html
• latest.md
• resources/*
• and copying over a few things from _config.yml

Our Workflow

Having installed the requirements (some Ruby, some NodeJS), a simple bash script converts your latest Jekyll post from markdown to HTML with inlined CSS.

Inlining of CSS is a critical step, as HTML emails viewed at Gmail.com or in your iPhone’s Mail app will not load remote CSS files.

Here is an example screenshot of this post as an email:

To generate the HTML email I ran ./scripts/email.sh, then to send it used a Python script I wrote below in combination with the Amazon Web Service command line tool (awscli):

blah.py:

import json

fname = '/path/to/index.html'

with open('message.json', 'w') as f:
    f.write(json.dumps({
      "Subject": {
          "Data": "Test email sent using the AWS CLI",
          "Charset": "UTF-8"
      },
      "Body": {
          "Text": {
              "Data": "This is the message body in text format.",
              "Charset": "UTF-8"
          },
          "Html": {
              "Data": open(fname).read(),
              "Charset": "UTF-8"
          }
      }
    }))

$ python blah.py
$ aws ses send-email \
  --from <my-verified-sender-address> \
  --to myself@gmail.com \
  --message file://message.json

And voila!

A few things to be mindful of:

• this HTML email does not have a plain text version, generating one is left as an exercise for the reader
• to style the email with custom CSS requires editing the SCSS under the resources directory (something which I haven’t done yet)
• images in the generated HTML emails may have relative URLs instead of absolute–this is okay on your website but must be absolute URLs in your emails or the images won’t render

Best of luck, I am sure you can find workflow improvements from here on out.