Micro Site

Micro Site is an opinionated Eleventy (11ty) starter template in the Boilerplate category, built to create single-page websites such as landing pages and sign-up pages.

What is Micro Site?

Micro Site is a minimal, bring-your-own front-end skeleton project that runs on the Eleventy static site generator. It takes your content files — an index.njk page, a metadata.json data file, and static assets — and outputs a fully static _site folder with inlined, minified CSS and JavaScript. The project is authored by Danny de Vries and published under an MIT license.

Key Features

• Inlined and minified CSS — Styles from _includes/style.css are minified with clean-css and inlined directly into the generated HTML, reducing render-blocking requests.
• Inlined and minified JavaScript — Scripts from _includes/script.js are minified with terser and inlined, with no external script files required.
• Global metadata data file — A metadata.json in _data/ holds site-wide metadata (title, description, etc.) that can be referenced across Nunjucks templates.
• Base Nunjucks layout — A base.njk layout template provides the HTML skeleton, so you only fill in page-specific content.
• Static asset passthrough — An assets/ folder copies images, fonts, and other files untouched into the output, following Eleventy's passthrough copy behavior.
• Opinionated defaults — Common Eleventy configuration is pre-set in .eleventy.js, so you get a working development server with live reload via npm run dev.

Who is it for?

• Front-end developers who want a clean, minimal starting point for a one-pager without any pre-built components or CSS framework to strip out.
• Designers who prefer to bring their own styling and markup and just need a build pipeline that optimizes and inlines their assets.
• Developers experimenting with Eleventy who want a small, readable project structure to learn how global data, layouts, and passthrough copy fit together.

What can you do with Micro Site?

• Launch a landing page fast: clone the repo, update metadata.json, edit index.njk, and deploy to Netlify with the provided one-click deploy link.
• Create a sign-up page: use the same structure to produce a single-page sign-up form, wiring in your own CSS and any front-end library you like.
• Learn Eleventy fundamentals: explore a minimal, opinionated configuration that demonstrates inlining, minification, and passthrough copy in under a handful of files.

How does Micro Site work?

After cloning and running npm i, you start the development server with npm run dev, which activates live reload. Edit index.njk and metadata.json, and the site is generated into _site/ with all CSS and JS inlined. The roadmap notes that image optimization via eleventy-image, asset caching via eleventy-cache-assets, and syntax highlighting via eleventy-plugin-syntaxhighlight are planned but not yet included.

FAQ

Does Micro Site include components or basic styling?

No. It is explicitly a skeleton project — you bring your own front-end. The repository ships only the build pipeline, a base layout, and a data file, with no CSS framework or UI components included.

What static site generator does Micro Site use?

It uses Eleventy (11ty) with Nunjucks as the template language, configured through .eleventy.js. The output is a fully static site that can be hosted anywhere static files are served.

Is Micro Site free to use?

Yes, the project is released under the MIT license, so you can use, modify, and redistribute it freely, including for commercial projects.

Can I deploy Micro Site to Netlify?

Yes, the README includes an optional one-click deployment link to Netlify. After updating your metadata and page content, you can connect the repository and publish the _site output.