Social
the natalie zone
About Posts Things Microblog

My image pipeline

I’ve been talking to a couple friends about starting their own blogs, and realized that it’s a little bit difficult to create Web 1.0 sites with Web 2.0 tech, so I wanted to document how part of this blog works.

You can check out links to my friends’ blogs in my blogroll!

Some context

This site is fully statically built. The only javascript is ships with is an analytics script added by Cloudflare, and a small script on a secret page I use. Other than those, it is just html, css, and images. It is built using 11ty, and deployed to Cloudflare Pages.

Having images is important to me, and it’s important that they’re high quality, bringing us to the first issue. Cloudflare has a hard limit of 25mb for any Pages project, so serving the images out of pages is out of the question. My solution to this is twofold, as it causes two problems:

  1. Images cannot be included in the git repo. They will both hurt git performance, and cause the Pages build to fail when it attempts to download > 25mb worth of images.
  2. Images cannot be served from Pages, because they would make the Pages project too big.

The solution:

  1. Use Git LFS to store images outside of the repo. I use a Cloudflare R2 bucket with a worker as my LFS server because their free tier is more generous.
  2. Serve images out of a bucket. I use a Cloudflare R2 bucket behind cdn.natalie.lol.

Worth noting that I use two separate buckets, but you could use one R2 bucket for everything.

Nitty gritty:

  1. Images are in a post’s folder.
  2. 11ty see’s me use a custom image tag in my markdown.
    • If this is a dev build:
      1. Use 11ty-image to process the image. Dump it into a /passthrough/cdn folder in the project directory.
      2. Modify the 11ty-image metadata to set the url to /cdn/, generate HTML.
      3. When I run my upload script, the contents of the /passthrough/cdn folder will be diffed against my R2 bucket, and new images will be uploaded.
    • If this is a prod build:
      1. Use 11ty-image to run a dry run of processing the image (I just want the metadata).
      2. Modify the metadata to use an https://cdn.natalie.lol/ url, generate HTML.
  3. When I commit the post to git, the images will be sent to my LFS bucket.
  4. When I run my upload script, it’ll upload new images to my CDN bucket.

I may open source this at some point. If you want to set up something similar, I’m happy to help and share more details, email me!