HTML Email Development with Jekyll – Auto Inline CSS

Posted by Alex on March 26, 2015

Inlining CSS on HTML Emails is a pain point for anyone, it’s just hard, easy to miss things, hard to maintain, and just tiresome. There are some great tools out there that help do this for you, like this CSS Inliner Tool.

If you dig a little deeper, you’ll probably find a library called Premailer which does the same thing but allows you to install it on your own server and integrate it into your workflow.

For static pages, I’m using Gh-pages, hosted free by github and also using Jekyll templates to automatically generate my files – really great tool for maintaining a static site.

So, how does someone use static pages on gh-pages and Premailer together to maintain some HTML email templates?

All of these instructions you’ve already installed and are using Jekyll, learn more.

Step 1 – gem install premailer

Step 2 – Create a new directory called _plugins inside your repo

Step 3 – Use the Gist below to create a new plugin for Premailer

Step 4 – Config premailer.rb. You’ll want to rename the layout and CSS file name to the one you’re project has.

That’s it! Right now Jekyll Plugins can’t be used on Gh-pages but you can copy the generated files from your local to your email tool or app that you’re working on. With some cleanup we might even be able to get this plugin supported on Gh-pages.

html emails inline css jekyll premailer