11ty Landing Page

11ty Landing Page is a Boilerplate template that combines the Eleventy static site generator with Tailwind CSS to produce a lightweight, multi-page landing site with no JavaScript framework required.

What is 11ty Landing Page?

11ty Landing Page is a static landing page template built with Eleventy (version 0.12.1) and Tailwind CSS, created by ttntm. It takes content stored in Markdown files, a JSON features file, and Nunjucks partial templates, then builds a static HTML site that includes a landing page, an imprint page, and a privacy page. The source is an open repository on GitHub, and the same author also publishes equivalent templates for Astro and Hugo.

Key Features

• Eleventy static generation — Built with Eleventy 0.12.1, the project outputs plain HTML files that require no server-side runtime, making it fast and cheap to host.
• Tailwind CSS with Just-in-Time mode — Styling is generated by Tailwind's JIT compiler via PostCSS, with configuration in tailwind.config.js; the build is triggered by src/css/page.11ty.js.
• Modular Nunjucks templates — The landing page is assembled from partial templates in src/includes, each section has its own section.**.njk file, and src/index.njk controls which sections appear and in what order.
• Ready for Netlify — A netlify.toml file is included so the project can be deployed to Netlify with a single push.
• Simple content editing — Page content for imprint and privacy lives in imprint.md and privacy.md; landing page features are defined in src/_data/features.json and section text in src/sections/.
• Placeholder images — All images in static/img are placeholders intended to be replaced with production assets during customization.
• Minimal dependencies — Apart from Eleventy and Tailwind, other dependencies are either linked from a CDN or already in the repository, so npm install sets up the entire build.

Who should use 11ty Landing Page?

Developers who want a no-framework static landing page using Eleventy and Tailwind will find this a ready starting point. It is also useful for anyone learning how to wire Tailwind's JIT mode into an Eleventy build through PostCSS, since the configuration is fully exposed in src/css/page.11ty.js. Freelancers or agencies that need a quick client landing page can fork the repo, swap in images and copy, and deploy to Netlify using the provided netlify.toml.

What can you do with it?

• Frontend developers: Customize the Nunjucks partials in src/includes to alter the layout of each landing page section, or reorder sections in src/index.njk.
• Content editors: Update the features list by editing src/_data/features.json, and change the imprint and privacy page texts in the Markdown files, without touching template code.
• Designers: Replace the placeholder images in static/img and adjust utility classes in the templates to match a brand visual style.
• Self-hosters: Deploy the generated static site to any static file hosting service; the included netlify.toml makes Netlify deployment zero-configuration.

How does it work?

To set up the project, fork or clone the repository, then run npm install and npm run serve. This starts a local dev server at http://localhost:8080. The CSS build is handled by PostCSS and Tailwind's JIT compiler, triggered by src/css/page.11ty.js, and the pages are generated by Eleventy from Nunjucks layouts. For production, the site can be built and deployed directly to Netlify thanks to the included configuration.

FAQ

Is this template free to use?

The project is hosted on GitHub and the README says to fork, clone, or download it for your own use, indicating it is free of charge.

What is 11ty/ Eleventy?

Eleventy (11ty) is a Node.js static site generator that compiles Markdown, JSON, and Nunjucks templates into plain HTML. This template specifies Eleventy version 0.12.1.

Does the template include a blog or CMS?

No, it includes only a landing page, an imprint page, and a privacy page, with no blog collection or CMS integration. Content is managed through Markdown files and a JSON data file.