๐๐ฟ๐ฒ๐ฒ ๐ข๐ ๐๐บ๐ฎ๐ด๐ฒ๐ ๐ช๐ถ๐๐ต ๐ฃ๐น๐ฎ๐๐๐ฟ๐ถ๐ด๐ต๐
You need OG images for your articles. You do not want a monthly bill.
Use Playwright to screenshot HTML templates. It costs zero dollars. You get full CSS control. You need no API keys.
The trade-offs:
- It is slow per image.
- It does not work for on-demand requests.
- It needs a network connection during build.
Why this beats other options:
- Cloudinary: Too expensive at scale.
- Vercel OG: Needs a specific runtime.
- node-canvas: Hard to build in GitHub Actions.
- Pillow: No CSS flexbox or gradients.
The trick is the networkidle setting. This tells the browser to wait for fonts to load. Without it, images look wrong.
My setup:
- A Python script in GitHub Actions.
- A dark HTML template with Google Fonts.
- Logic to pick colors based on article tags.
- Automatic updates to the article frontmatter.
The process is simple. The script makes the image. It saves the file to the repo. The site deploys to Cloudflare Pages.
For static sites, this is the best way. You control the design. You pay nothing.