Back to templates

Template details

Eleventest

Trying 11ty static-site generator with Bootstrap 5.

About this template

Eleventest is a minimal boilerplate for the Eleventy static-site generator that pairs 11ty with Bootstrap 5 to produce fast, dependency-light static websites.

What is Eleventest?

Eleventest is a starter project for building static sites with the Eleventy (11ty) static-site generator. It takes HTML, Markdown, and template files as input and outputs a static site ready to deploy to any web host or CDN. The project runs on Node.js and uses npm for package management. The repository is authored as a personal experiment by a developer exploring 11ty, with the official description simply stating "trying 11ty static-site generator."

Key Features

  • Eleventy (11ty) integration — Uses the @11ty/eleventy package as a dev dependency, enabling static-site generation from templates and Markdown content.
  • Bootstrap 5 styling — Installs bootstrap@5.2.3 as a direct dependency, providing a responsive CSS grid, components, and utility classes out of the box.
  • Live development server — Running npx @11ty/eleventy --serve or npm start starts a local server that automatically rebuilds the site after every file change.
  • Simple project structure — Contains an index.html file as the template entry point and a .gitignore file to exclude node_modules and generated output from version control.
  • npm-based setup — Initialized with npm init -y, so all dependencies and scripts are managed through a standard package.json file.
  • Static output — Generates plain HTML, CSS, and JavaScript with no backend required, making the output portable across hosting platforms.

Who is Eleventest for?

  • Front-end developers — who want a plain-Eleventy baseline with Bootstrap already wired, so they can skip repetitive setup and start authoring static pages.
  • Designers prototyping — who need a quick local server that reloads on changes while they iterate on HTML and Bootstrap classes.
  • Technical bloggers — who want a minimal static site generator to learn how 11ty processes templates and Markdown without the overhead of a full theme.

What can you do with Eleventest?

  • Build a static marketing page — Lay out a landing page with Bootstrap's responsive grid and components, then deploy the generated HTML to Netlify, GitHub Pages, or any static host.
  • Prototype a Bootstrap design — Use the live-reload development server to fine-tune Bootstrap utility classes and custom CSS in real time.
  • Learn Eleventy fundamentals — Study the minimal project structure to understand how index.html maps to the generated output and how to add layouts or partials later.

How does Eleventest work?

The setup uses two npm commands: npm install @11ty/eleventy --save-dev installs the 11ty generator as a development dependency, and npm install bootstrap@5.2.3 --save adds Bootstrap as a runtime dependency. After that, creating an index.html file and running npx @11ty/eleventy --serve triggers Eleventy to process the file into an output directory and start a local server that rebuilds on change.

FAQ

Is Eleventest free to use?

Yes. Eleventy is open-source software released under the MIT License, and Bootstrap 5 is also open-source under the MIT License. The starter itself is a public repository with no associated fees.

What does Eleventest output?

Eleventest outputs a static website consisting of plain HTML, CSS, and JavaScript files. Because there is no server-side runtime, the generated files can be copied to any static file host or content delivery network.

Why use Bootstrap with Eleventy?

Bootstrap provides prebuilt responsive layout components and an extensive set of utility classes, which speeds up styling when building static pages. Adding it to the project as a direct dependency keeps the CSS framework available in the generated site.

Does Eleventest include a blog section?

No. The current starter only includes an index.html file. Adding a blog would require creating layout templates and placing Markdown files in an _posts or similar directory, which is a natural next step for learning 11ty's content collections.

screenshot of Eleventest on template0.com