Frontenso 11ty Starter

Frontenso 11ty Starter is a production-ready boilerplate for building Jamstack static websites with Eleventy (11ty) as the HTML generator and Gulp orchestrating the rest of the build pipeline. It pairs Nunjucks templating, SCSS, Tailwind CSS, Webpack v5, and ESNext into a component-based workflow, and it ships with a live demo on Netlify.

What is the Frontenso 11ty Starter?

It is a GitHub template repository that combines Eleventy for HTML generation, Gulp for asset processing, and Webpack v5 for JavaScript bundling. As input, it takes Nunjucks templates (in src/_layouts/ and src/components/), SCSS files, JavaScript modules, and source images; as output it produces a fully static HTML/CSS/JS site with optimized AVIF and WebP images, an SVG sprite, and minified production HTML. The starter is configured through .env files and the .eleventy.js config, and it is designed to work with any data source — headless CMS, JSON, Markdown, or fetched APIs.

Key Features

• Component-based structure — Markup, styles, and JavaScript for a component live together under src/components/, so reusable UI pieces like buttons and sliders are easy to maintain.
• Modern image formats — Uses @11ty/eleventy-img to auto-generate AVIF and WebP images at multiple sizes for srcset, with compression settings for avif, webp, and jpeg adjustable in .eleventy.js.
• Nunjucks template engine — Provides layouts, macros, and an {% image %} tag that emits <picture> elements; a Twig-style syntax with Jinja2-like features.
• Tailwind CSS with JIT (optional) — Utility-first CSS is included out of the box and can be disabled by removing one <link> line from src/_layouts/base.njk plus the related PostCSS and Gulp tasks.
• TypeScript via JSDoc (optional) — Built-in TypeScript support uses JSDoc annotations (officially supported by the TypeScript team); delete tsconfig.json to disable it.
• Environment variables — The dotenv package loads .env for JavaScript code via Webpack's EnvironmentPlugin; Nunjucks templates can access values through data files in src/_data/.
• SVG sprite generation — gulp-svgstore combines all SVGs in src/svg into one sprite inlined in the base layout; icons are referenced with <svg><use xlink:href="#icon-filename"></use></svg>.
• Production HTML minification — The beautify-html script runs html-minifier with settings that collapse whitespace, remove comments, optional tags, and redundant attributes, and minify inline CSS/JS.

Who is it for?

• Frontend developers who want a preconfigured 11ty starter with a component-based architecture and modern asset optimization without building the toolchain from scratch.
• Jamstack site builders who need to publish static marketing sites, landing pages, or blogs with any data source — headless CMS, JSON, Markdown, or remote APIs.
• Agencies and freelancers shipping multiple static sites who value fast builds (Gulp) and a flexible configuration that can be adapted per project (custom static path, optional Tailwind/TypeScript).

What can you do with it?

• Build a marketing site — Assemble Nunjucks components with Tailwind utilities, generate AVIF/WebP images from a single source, and output a minified static site ready for Netlify.
• Create a blog — Use 11ty's Markdown and data-feeding capabilities to publish content, with the starter's component library providing the structure.
• Prototype a custom design system — Develop components in isolation inside src/components/, then combine them into pages with Nunjucks.
• Integrate a headless CMS — Fetch data via JavaScript and render it with Nunjucks templates, since the starter is data-source agnostic.

How does it work?

After creating a repository from the GitHub template, run npm install and npm start to launch a live-reloading dev server at http://localhost:9000/. npm run build produces the production site, and npm run zip creates a build.zip archive of the output. For custom deployments, set STATIC_PATH in .env to point to a CDN or custom base URL.

Pros and cons

• Pros — Fast builds, component colocation, automatic AVIF/WebP generation, optional Tailwind/TypeScript, environment variable support, SVG sprite, and HTML minification.
• Cons — Webpack has no hot reloading (by design for static sites, so only full reloads during development); inlining images as base64 via the inline filter or postcss-assets can bloat HTML/CSS files and is advised only for small assets.

FAQ

Is this starter free to use?

The repository is published as a public GitHub template, so you can click "Use this template" and clone it for your own projects; no pricing or licensing terms are stated on the page.

Do I need to keep Tailwind CSS and TypeScript?

No. Tailwind can be removed by deleting its <link> tag from src/_layouts/base.njk and the related PostCSS/Gulp config; TypeScript can be disabled by removing tsconfig.json. Both are optional.

How do I add a new SVG icon?

Place the SVG file in src/svg, run the build, and reference it in markup as <svg><use xlink:href="#icon-filename"></use></svg>. The gulp-svgstore task inlines all icons into a single sprite in the base template.

Can I use this with a CMS?

Yes. The starter is built on Eleventy, which supports data from any source — headless CMS, JSON, Markdown, or JavaScript-fetched APIs. Consult the 11ty data documentation for details.

What is the difference between 11ty and Gulp here?

Eleventy handles HTML generation from Nunjucks/Markdown templates and data; Gulp runs the remaining build tasks — SCSS compilation, Tailwind/PostCSS processing, Webpack bundling, SVG sprite creation, and image optimization.