YAES (Yet Another Eleventy Starter) is a boilerplate that gives Eleventy (11ty) developers a preconfigured build pipeline, using Snowpack for instant development, Webpack for production bundling, and PostCSS for modern CSS processing.
What is YAES?
YAES is a starter kit for building static websites with Eleventy, the Node.js static site generator. It takes markdown, Nunjucks templates, images, and ES6+ JavaScript as input, and outputs a static HTML site with optimized assets. The project is configured to run a fast Snowpack dev server during development and a Webpack-based production build that bundles and minifies everything. It also includes Babel for transpiling modern JavaScript. No CSS framework is included; styling is handled through PostCSS with a set of plugins for critical CSS inlining, PurgeCSS removal, and cssnano minification.
Key Features
- Snowpack dev server — Serves source files unbundled during development, enabling near-instant hot reloads without a full rebuild.
- Webpack production build — Bundles and minifies JavaScript and CSS for deployment, producing optimized output files.
- Custom image shortcode — Use
{% Image src="./bg.jpeg", alt="background" %}in any template to generate multiple responsive sizes, a blurry placeholder, a WebP transcode, and apictureelement with native lazy loading. - Remote image support — The shortcode can fetch an image from a remote URL, download it, and process it through the same resizing and compression steps.
- imagemin optimization — Every generated image is minified using imagemin to keep file sizes low.
- PostCSS pipeline — Inlines critical CSS, lazy loads the remaining CSS, removes unused styles with PurgeCSS, and minifies with cssnano.
- Babel transpilation — Write ES6+ JavaScript and have it compiled to older syntax for broader browser compatibility.
- Native lazy loading — All images generated by the shortcode carry the browser's native
loading="lazy"attribute, so no JavaScript is required for deferred loading.
Who is it for?
YAES is aimed at developers who want to start an Eleventy site without assembling a moving parts build system. It suits frontend developers who prefer modern CSS workflows and want to avoid configuring their own Webpack setup. Content creators building a blog or portfolio can use the image shortcode to keep pages light and fast. Teams building documentation or marketing sites benefit from the built-in performance features like critical CSS inlining and responsive images.
What can you do with YAES?
- Bloggers: write posts in markdown and let the image shortcode automatically generate resized WebP versions with blur-up placeholders for every photo.
- Frontend developers: use Snowpack's fast dev server to iterate on layouts, then produce a minified, PurgeCSS-cleaned production build.
- Documentation teams: create a docs site that passes performance audits thanks to inline critical CSS and lazy-loaded offscreen images.
How does YAES work?
During development, Eleventy runs as the static site generator while Snowpack serves unbundled modules to the browser. For production, Webpack bundles and minifies all JavaScript and CSS. The image shortcode processes images at build time: it reads a local or remote source, creates multiple widths, converts to WebP, and emits a picture element with a tiny placeholder, so all optimization happens before the site is deployed.
FAQ
What is Eleventy?
Eleventy (11ty) is a simple static site generator that transforms templates and markdown into plain HTML. It has no client-side JavaScript framework, which makes the output fast and lightweight by default.
Does YAES include a CSS framework?
No. YAES uses PostCSS with plugins like PurgeCSS and cssnano, but it does not ship with Tailwind, Bootstrap, or any other prebuilt CSS framework.
Can the image shortcode handle remote images?
Yes. Pass a remote URL as the src parameter, and the shortcode will download the image, generate the multiple sizes and WebP version, and save them locally during the build.
What output does the image shortcode generate?
It produces a responsive picture element containing several resized versions of the image in the original format plus a WebP version, along with a tiny blurry placeholder. It also adds the native lazy loading attribute.
