ByMattLee 11ty Starter

ByMattLee 11ty Starter is an open-source boilerplate that combines Eleventy (11ty), Sanity CMS, Gulp, Tailwind CSS, rollup.js, Alpine.js, and Taxi.js into a ready-made static-site build system, producing a minified HTML site in a dist directory.

What is the ByMattLee 11ty Starter?

The starter is a pre-configured project scaffold for building static websites: Eleventy generates HTML, Sanity provides a headless CMS backend, Gulp orchestrates the build, Tailwind CSS handles utility-first styling, rollup.js bundles JavaScript, Alpine.js powers declarative UI interactions, and Taxi.js adds animated page transitions. It takes source files from src/site and src/assets, compiles them through a Gulp pipeline, and outputs a production-ready site to dist. The project is maintained by Matt Lee (@bymattlee), and a live demo is available at https://bymattlee-11ty-starter.netlify.app/.

Key Features

The starter bundles a complete build system with Gulp, Eleventy, Tailwind CSS, rollup.js, Alpine.js, and Taxi.js, handling HTML rendering, style and script compilation, and asset optimization in one workflow.

• Build pipeline — Gulp renders HTML, compiles SCSS and JS, optimizes images, and injects styles during development; staging and production builds remove unused CSS with PurgeCSS.
• Static site generation — Eleventy turns Nunjucks templates in src/site/_includes and content from Sanity's Cloud API into flat HTML files; markup is minified for staging and production.
• Tailwind CSS integration — Utility classes can be extended with custom SCSS in src/assets/scss/main.scss, including the @apply, theme(), and @screen directives from Tailwind.
• JavaScript bundling — rollup.js bundles ES modules from src/assets/js into dist/assets/js/main.min.js, with components in src/assets/js/components and vendor scripts in src/assets/js/vendors.
• Interactive UI toolkit — Alpine.js is included for declarative DOM behavior, and Taxi.js provides animated page transitions along with a custom framework for reusable content animations.
• Responsive images — Images placed in src/assets/images are optimized and resized to widths of 200, 400, 600, 800, 1000, 1200, 1400, 1600, and 1800 pixels; the imageSrc shortcode generates responsive srcset values.
• Asset processing — SVGs are optimized into a sprite at dist/assets/svg/sprite.svg, while fonts, videos, and other assets under src/assets are copied unchanged to dist/assets.
• SEO output — A sitemap is generated from the final HTML files, and a robots.txt is produced from src/site/robots.njk.

Who is the ByMattLee 11ty Starter for?

The starter is aimed at developers who want a modern static-site setup without wiring the pieces together themselves. Front-end developers can use it to launch a content-driven marketing site or blog with Sanity as the CMS and Eleventy as the output layer. Agencies and freelancers can use it as a base for client projects, since the Gulp build includes separate staging and production commands (yarn stage and yarn prod). Developers who prefer utility-first styling can use the Tailwind and SCSS workflow to rapidly prototype and maintain consistent spacing and typography.

What can you build with the ByMattLee 11ty Starter?

These project types are a natural fit for the starter's built-in features:

• Content-driven websites — With Sanity as the data source, you can build blogs, portfolios, or company sites whose content is editable in a headless CMS while Eleventy generates static pages.
• Prototypes and product sites — The included Alpine.js and Taxi.js transitions make it possible to create interactive marketing pages with smooth navigation between routes.
• Image-heavy galleries — Built-in responsive image generation and SVG sprite creation simplify shipping optimized visuals for a portfolio or photography site.

How does the ByMattLee 11ty Starter work?

After installing Node 16.17.1 LTS and Yarn, run yarn in the project root to install dependencies. Update the Sanity options and environment URLs in config.js, then use yarn dev for development with Browsersync and live reload, yarn stage for a staging build, or yarn prod for a production build. Files in src/site are compiled to dist, and all assets under src/assets are processed or copied into the output directory.

FAQ

What Node version does this starter require?

The installation instructions specify Node 16.17.1 LTS. Use this exact version to avoid compatibility issues with the Gulp pipeline and dependencies.

Is the ByMattLee 11ty Starter free to use?

Yes, the repository is publicly available on GitHub under a standard open-source license. No pricing or license restrictions are mentioned in the documentation.

Do I need a Sanity account to use this starter?

Yes, because the starter pulls data from the Sanity Cloud API. The README recommends pairing it with the ByMattLee Sanity Studio Starter repository, and you must set your Sanity options in config.js before building.

Can I use the starter without Sanity?

The starter is configured to fetch data from Sanity, but you could adapt it to use other data sources since Eleventy supports many data formats. The built-in configuration, however, is specifically wired for Sanity.

What happens to unused CSS?

In staging and production builds, PurgeCSS removes unused CSS. In development, all styles are injected into the browser for faster iteration.