Claude 3.7 Sonnet and I have vibe coded automatic OpenGraph image generation for Hugo.

I found a bunch of other ways of doing this like I linked to before, but this uses an incredibly simple technique: use the canvas library to draw the logo and post title, and save the image. It’s much simpler than trying to wrangle Puppeteer or Playwright, which are great but huge overkill for the simple text-heavy styling of this site.

I’m really happy with how these have turned out:

Generated image example

I modified the build command in my Cloudflare Pages to trigger this simple script - and alas! An error!

We had a problem with the fonts not rendering properly. It all worked perfectly locally, but in Cloudflare’s environment, it was just broken glyphs. After a few quick experiments and re-downloading the .ttf file, it made some changes to how the font is exposed to canvas.

And from there, everything Just Works™.

I think I spent 30 minutes on this in VS Code’s Copilot in Agent mode, with most of that spent on tweaking the visuals of the design, implementing a fallback for index pages without a specific post to look at, and fixing the font rendering issue which was by far the most challenging as Claude kept inventing source files for me to try and download programmatically!

This is a great example of what LLMs are perfectly suited for, but if you don’t want to vibe code your own version, take a look at the repository.