Eleventy Test Bed is a minimal open-source Eleventy (11ty) boilerplate and test bench by dollplayer2501 for experimenting with Eleventy's navigation and image plugins, featuring a custom article-sorting filter, Pico.css styling, and a Netlify-ready demo site.
What is Eleventy Test Bed?
Eleventy Test Bed is a minimal Eleventy (11ty) static site template created by dollplayer2501 to explore how Eleventy's navigation and image plugins behave. It takes Markdown files placed in source/contents as input and outputs a compressed static HTML site in _product for production or serves a development version in _develop. The project uses Pico.css v1.5.10 for styling and Lightbox2 v2.11.3 for image overlays, and it ships with a live demo on Netlify.
Key Features
- Custom article sorting — Implements an Eleventy Filter in
source/_config/eleventy.filters.jsthat generates sort keys from file paths and anorderfront-matter value, using sprintf-js for zero-padding; the README includes a table mapping source paths to URLs and sort orders for nested parent/child/grandchild structures. - Pico.css v1.5.10 — A minimalist CSS framework is included for the site's default styling, pinned to v1.5.10.
- Lightbox2 v2.11.3 — Integrated for image lightbox functionality; the README explicitly pins Lightbox2 to v2.11.3 because the newer v2.11.4 conflicts with Pico.css v1.5.10.
- Development and production workflows —
npm run develop:watchstarts a local dev server at http://localhost:8080 storing data in_develop, whilenpm run product:buildcreates a compressed production build in_product, previewable withnpm run product:serveat http://localhost:3000. - Netlify deployment — The repository includes a Netlify deploy badge and a demo site at
https://eleventy-test-bed-dollplayer2501.netlify.app/. - Documented URL conventions — The README specifies that generated URLs must follow
/path/index.htmlpatterns and that/path.htmlis not allowed, with a detailed comparison table.
Who is it for?
- Eleventy newcomers who want to examine a complete, small test project that shows how a custom sorting filter can replace Eleventy's built-in tag, date, and navigation plugins.
- Developers evaluating static site generators who need a minimal, readable codebase to understand Eleventy's filtering and build pipeline before committing to a larger project.
- Site builders with hierarchical content who need ordered, nested sections (like parent/child/grandchild documentation structures) and prefer a custom sorting approach over file dates.
What can you do with it?
- Test Eleventy's image and navigation plugins in a controlled environment; the author built this specifically to see how those plugins behave.
- Study the custom sorting implementation by comparing the Markdown files in
source/contentswith the generated HTML output, as suggested in the README. - Use it as a starting template for a Pico.css-styled static site with Netlify hosting and distinct development/production build scripts.
How does it work?
After cloning, run npm install, then use npm run develop:watch to start the dev server at localhost:8080. For a production build, run npm run product:build to generate compressed HTML in _product, and optionally npm run product:serve to preview it at localhost:3000. The sorting logic runs as an Eleventy Filter called during build and uses an order field in each Markdown file's front matter.
FAQ
What versions of Pico.css and Lightbox2 does this template use?
The template pins Pico.css v1.5.10 and Lightbox2 v2.11.3. The README warns that Lightbox2 v2.11.4 has compatibility problems with Pico.css v1.5.10, so the version is deliberately fixed at v2.11.3.
Does Eleventy Test Bed support production builds?
Yes, it includes a production build script. npm run product:build generates compressed HTML into the _product directory, and npm run product:serve serves that output locally at localhost:3000.
Where is the demo site hosted?
The demo is hosted on Netlify at https://eleventy-test-bed-dollplayer2501.netlify.app/. The repository includes a Netlify deploy badge and is clearly set up for Netlify deployment.
Is this template intended for real-world use?
The author describes it as a personal test bench for exploring Eleventy features, not necessarily a production-ready template. It is meant as a learning resource, and the README references a separate production site (https://dollplayer2501.netlify.app/) built with Eleventy.
