Core Tech

Built using Eleventy, heavily inspired by Andy Bell’s Learn Eleventy from Scratch Course.

Eleventy is a solid pick for a static site generator. It’s fast, easy to configure and ultimately Just JavaScript™. I use Nunjucks as my main templating engine and it’s convenient to massage the collections and site data into place.

Hosted for free with Cloudflare Pages sync’d with a repo on GitLab.

There’s a lot of Eleventy NodeJS code used to build the site but only eight lines of JavaScript on the front end.

I try to avoid using custom shortcodes when writing newsletter editions in Markdown. Instead, I have a custom content transform to generate complete image markup (alt-text, figcaptions as titles, responsive images) and automagically add heading anchor links.

Newsletter

In a bid to save time and energy I also auto-generate my newsletter emails from the same repository. The layout and format of these emails is heavily inspired by Stephanie Eckles’s 11ty-email-generator repo.

It took me a while to learn that I can use Eleventy’s pagination functionality to generate both the site page and the HTML for the newsletter email.

Buttondown handles the actual sending of newsletter editions. I really don’t want to have to worry about sending emails myself but on the other hand I’m barely using Buttondown’s featureset.

Media

The main source/target logo and other artwork is by the fantastic Lis Xu. Lis’ work is so inspiring and I really appreciate the lightness it brings to my site.

Thumbnails for the newsletter editions are auto-generated from an OpenProcessing example from Roni Kaufman.

The iPhone on the about page is completely HTML + CSS courtesy of Daniel Szekely’s codepen. It’s a little overkill but I love it!

I also use pagination to automatically generate OpenGraph images for when I share on social media. I use 11ty/api-screenshot to lazily generate these images along with the newsletter preview on the about page.

I use a free tier on Cloudinary to automatically compress and serve all images on the site.

Fonts

I’m currently using Lato, Proza Libre and Charter.

Analytics

I’m not using any tracking cookies, analytics or similar. I used to use a privacy-conscious analytics service but I’ve come to the conclusion it’s not worth it for a personal site and small project like source/target. I’d prefer to spend more time learning and sharing than tracking metrics.