AstroFlareOG

AstroFlareOG is an Astro v6 starter theme for Cloudflare Workers that specializes in dynamic Open Graph image generation, using cf-workers-og (built on satori and resvg) to render social share images without a headless browser.

What is AstroFlareOG?

AstroFlareOG is an Astro v6 starter theme released under the MIT License by Kevin Firko of Bitcurve Systems. It runs on Cloudflare Workers through the @astrojs/cloudflare adapter and generates static pages by default, with opt-in server-side rendering for routes such as per-post OG images. The starter includes a realistic blog as an Astro content collection with Markdown and MDX support, a minimal responsive layout, and TailwindCSS styling with a custom prose utility for long-form content.

Key Features

• Dynamic OG Image Generation — Generates site-wide and per-post Open Graph images on the server using cf-workers-og (satori + resvg); no Puppeteer and no React required.
• Astro on Cloudflare Workers — Uses the @astrojs/cloudflare adapter with hybrid rendering: static pages by default, SSR enabled by adding export const prerender = false.
• TailwindCSS with custom typography — Includes a custom .prose utility built with @utility and :where() selectors, plus a .not-prose escape hatch, and custom text sizes like text-h1 through text-h6.
• Example blog as content collection — Markdown and MDX support via @astrojs/mdx, with a realistic blog structure to adapt.
• Sitemap integration — @astrojs/sitemap is configured and compatible with the project's trailing slash settings.
• Strict TypeScript and tooling — Extends astro/tsconfigs/strictest, includes @astrojs/check, BiomeJS for TypeScript linting/formatting, and Prettier with prettier-plugin-astro for Astro files.
• Atkinson fonts via Astro Fonts API — Variable fonts loaded from Fontsource; non-variable .woff versions are included in public/fonts/ because Satori doesn't support variable fonts or WOFF2.
• Wrangler configuration — Includes wrangler.example.jsonc and pnpm typegen to generate worker-configuration.d.ts from wrangler.jsonc.

Who is it for?

AstroFlareOG is aimed at developers who want a production-ready starting point for Astro sites on Cloudflare Workers, especially those who need social sharing images that are generated on demand. Blog authors and content publishers can use the included content collection and per-post OG image route to make every article shareable. Teams deploying to Cloudflare Workers can use the preconfigured Wrangler settings and hybrid rendering setup to separate static assets from server-rendered routes.

What can you do with AstroFlareOG?

• Content publishers: create a blog with Markdown or MDX posts and automatically generate a unique Open Graph image for each post via the /hello-world/og.png style route.
• Cloudflare Workers developers: deploy a hybrid Astro site with static pages and SSR routes, using Wrangler environment variables and secrets for configuration.
• Design-system builders: use the provided Tailwind palette tokens, prose utility, and typography scale to build a consistent long-form reading experience.

How does AstroFlareOG work?

After cloning the repo, rename the project in package.json, run pnpm install, copy wrangler.example.jsonc to wrangler.jsonc, run pnpm typegen, and edit astro.config.ts to set DEPLOY_DOMAIN and ASTRO_SITE. The dev server starts at localhost:4321 with pnpm dev; pnpm preflight runs typegen, typecheck, checks, and build in sequence, and pnpm deploy:worker builds and deploys via Wrangler. To enable SSR for a route, add export const prerender = false and ensure the route pattern is covered by assets.run_worker_first in wrangler.jsonc.

FAQ

Does AstroFlareOG use Puppeteer or headless browsers?

No. OG images are rendered server-side by cf-workers-og, which uses satori and resvg to convert JSX into SVG and then PNG. That means no Puppeteer dependency and no React runtime on the worker.

What are the limitations with fonts?

Satori doesn't support variable fonts or WOFF2, so the starter loads variable Atkinson fonts for the site and stores non-variable .woff versions in public/fonts/ for OG image rendering.

Are Cloudflare environment variables available at build time?

No. Cloudflare-defined environment variables are not available to Astro during build; they can be imported in server-side code from cloudflare:env. Local development overrides go in a .dev.vars file.

Does the project support MDX?

Yes. The example blog is an Astro content collection with Markdown and MDX support via @astrojs/mdx.

Is the theme free?

The starter is released under the MIT License, so it is free to use and modify.