Brekky Wrap is on Eleventy

I spent a fair bit of time the other week moving my daily newsletter, Brekky Wrap, from Ghost to Eleventy (if you haven’t signed up, do it — it’s free! Nothing to lose, right?). I actually hadn’t heard of Eleventy before (although I’ve previously used other static generators, Jekyll and Pelican) and I have to say… I’m impressed!

Why?

I really like Ghost. It’s fast, the editor is fantastic and it has built-in member and newsletter management. Great — until you want to customise anything.

Want to send a newsletter? You have to use Mailgun, which for whatever reason gets blocked by my hotmail subscribers (not so MailerLite!).

Want to create a referral programme? Only FirstPromoter is supported, which is excessive for free newsletters.

Want to change the look of your emails? Time to manually edit core files after Every. Single. Update.

Enter Eleventy.

The move

Huge props go to David Neal, who wrote a very helpful script for moving posts over from Ghost to Eleventy. The only issue I had was all the dates were off by a day, presumably because I’m in Australia (UTC+0800) and every Brekky Wrap is delivered in the morning at around 9:00pm UTC the day before. I couldn’t think of an easy way to resolve that other than individually editing every post (100+), so that’s what I did — it took me 12 minutes. 🤷‍♂️

Porting my theme was relatively straightforward. Ghost uses Handlebars, which is supported by Eleventy. However, I switched over to Nunjucks purely because the Eleventy documentation and most of the articles I found appeared to be written in it.

The only issue I had was with the .eleventy.js file (which you have to manually create, by the way). The documentation isn’t that clear for plebs like me and I think I went wrong a few times trying to write some Liquid code in there instead of using Nunjucks. In the end I added four customisations, most of which are straight from the official “Quick Tips” documentation:

Hosting

Ghost is a fairly lightweight CMS but it still requires a server to store all the files and the SQLite database. You then have to install all the updates in a timely manner and make sure to back it up regularly.

Not so Eleventy, which as a static generator means all I have to do is draft the content locally, build my site with a single command (npx @11ty/eleventy), commit it to GitHub and then wait a moment for Netlify to serve it.

I’m still hosting this blog and a Pleroma instance on my server but the less software I have to maintain, secure and update, the better.

For those interested, here’s my .eleventy.js file:

const CleanCSS = require("clean-css");
const pluginRss = require("@11ty/eleventy-plugin-rss");
const { DateTime } = require("luxon");

module.exports = function (eleventyConfig) {

// Used for minifying and inlining CSS
  eleventyConfig.addFilter('cssmin', function (code) {
    return new CleanCSS({}).minify(code).styles;
});

// Copy `images/` to `_site/images`
eleventyConfig.addPassthroughCopy("images");  eleventyConfig.addPassthroughCopy("content");

// Create rss feed
eleventyConfig.addPlugin(pluginRss);

// Fix up dates
eleventyConfig.addFilter("readableDate", dateObj => {
  return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
});
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
   return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
});
};