Eleventy Filter Coffee Starter is a minimal Eleventy (11ty) boilerplate for building static websites, bundling Gulp, Sass, asset hashing, image optimization, and critical CSS into a single starting point. It is a small, opinionated starter kit that aims to simplify the setup of new Eleventy projects by automating common build tasks. The template is maintained by Yeshwanthyk and draws heavily from the lessons in Andy Bell's "Learn Eleventy From Scratch" course and Max Boch's Eleventastic starter.
What is the Eleventy Filter Coffee Starter?
The Eleventy Filter Coffee Starter is a project template for the Eleventy static site generator. It takes Markdown content and Nunjucks templates as input and produces a fully optimized static HTML site as output. The template runs on your local machine via Node.js, requiring an npm install followed by npm start for a development server with live reloading, or npm run production for a production build. It is open source and hosted on GitHub at the Yeshwanthyk repository.
Key Features
- Gulp integration — Gulp orchestrates the build pipeline for fonts and Sass, so styles are compiled automatically from source files.
- Asset hashing — Generated filenames include content hashes, enabling long-term caching for static assets.
- Image optimization — Uses
imageminto compress images during the build, reducing page weight. - HTML minification — Production output is minified to strip whitespace and comments.
- Critical CSS — Inline critical above-the-fold styles for faster initial render.
- Sass styling — Add new CSS in the
src/scssfolder; page-level styles can be injected using asetPageCriticalStylesvariable. - Netlify deployment — A one-click deploy button is provided, plus a Netlify status badge for continuous deployment.
Who is it for?
The starter is aimed at developers who want a fast, configured Eleventy project without spending time wiring up Gulp and Sass. It suits front-end developers who are comfortable with npm and prefer a build step for styling. It is also valuable for those following Andy Bell's "Learn Eleventy From Scratch" course, as the structure closely mirrors that curriculum. Finally, anyone creating lightweight, content-driven sites like blogs or small marketing pages can use it as a foundation.
What can you do with the Eleventy Filter Coffee Starter?
- Blog authors: Create a blog by writing posts in Markdown and letting Eleventy generate the static pages, with Sass handling the design system.
- Front-end developers: Use the built-in Gulp tasks for Sass and fonts, and rely on asset hashing and image optimization to produce a production-ready site.
- Netlify users: Deploy a fork of the repository to Netlify in one click and get autodeploys from Git.
How does the Eleventy Filter Coffee Starter work?
After cloning the repository, run npm install to install dependencies. Use npm start to launch a development server with live reloading, or npm run production to generate a minified production build. To customize styles, add Sass files to the src/scss directory; to inject page-specific critical CSS, add a setPageCriticalStyles line at the top of a template. The Gulp pipeline processes fonts, Sass, asset hashing, image compression, and HTML minification automatically.
