Garden is a Jamstack boilerplate that creates a generative poster website using Eleventy, Netlify, and Puppeteer, outputting both the generated HTML site and automated open-graph images for every poster.
What is Garden Jamstack Posters?
Garden is an open-source experiment by George Francis (georgedoescode) that demonstrates how to build generative, playful websites with core web technologies. It takes no user input at runtime; instead, each production build generates a set of SVG poster designs, turns them into a static website, and captures a screenshot of each poster page with Puppeteer to serve as an open-graph image. The site runs on the Jamstack, with Eleventy as the static site generator and Netlify providing the hosting and build pipeline.
Key Features
- Eleventy static site generation — Eleventy generates both the HTML pages and the
.svgposter files for the entire site. - Netlify hosting and builds — The website is hosted on Netlify, and each deployment triggers the build process that creates the posters and open-graph images.
- Puppeteer open-graph images — A headless Chrome instance screenshots every poster page at build time, producing PNG og-images without manual design work.
- esbuild CSS bundling — The project uses esbuild to concatenate and minify its CSS into a single production asset.
- CUBE CSS methodology — Styling is structured using the CUBE CSS approach, which favors simplicity, pragmatism, and consistency.
- SVG.js poster generation — The lightweight SVG.js library lets the build script compose poster designs through terse SVG scripting.
- IFTTT automated deployments — A no-code IFTTT applet calls Netlify build hooks to schedule daily deployments, so the site regenerates fresh posters on its own.
Who is it for?
- Developers exploring generative art — They can study how SVG posters are scripted with SVG.js and composed into a full site.
- Jamstack enthusiasts — They can see a real-world Eleventy + Netlify + Puppeteer pipeline, including build hooks and automated deployment triggers.
- Creators who want automated social images — They can learn a technique for generating open-graph images as part of a build rather than creating them by hand.
What can you do with it?
- Generate unique posters daily — Set up IFTTT with Netlify build hooks to trigger a new build every day, producing a new set of generative SVG posters automatically.
- Create your own portfolio site — Use the project as a starting point for a generative art portfolio that ships its own social preview images.
- Learn a complete build pipeline — Walk through the local and production builds to understand how Eleventy, esbuild, Puppeteer, and Netlify fit together.
How does Garden work?
To run the project locally, clone the repository and run npm install. Use npm run watch to start a development server at http://localhost:8081 with Eleventy in watch mode; setting POSTER_COUNT=8 limits the number of posters generated for faster local builds. A production build with npm run build outputs the site to dist/ and launches Puppeteer to create the open-graph images for each poster.
FAQ
What are the main technologies used in Garden?
Garden uses Eleventy as its static site generator, Netlify for hosting and builds, Puppeteer to capture open-graph screenshots, esbuild to minify CSS, SVG.js to script the poster designs, and CUBE CSS as the styling methodology. It also uses IFTTT with Netlify build hooks for scheduled daily deployments.
How do I speed up local development?
Set the POSTER_COUNT environment variable to a small number, like POSTER_COUNT=8 npm run watch, to generate only the most recent posters while developing. This avoids waiting for the full set of posters to render on every change.
Does Garden require puppeteer for local dev?
Puppeteer is only used in the production build to generate open-graph images. The local development mode (npm run watch) does not mention Puppeteer, so it should run without it.
How can I contribute or report issues?
The repository offers a GitHub issues page for logging bugs and ideas, and you can contact the creator, George Francis, directly on Twitter at @georgedoescode.
