Eleventy Base

Eleventy Base is a publicly available Eleventy starter project that extends the official Eleventy Base Blog with Sass compilation, custom webfonts, and Parcel-based JavaScript bundling. This starter takes Markdown, Nunjucks, Sass, and JavaScript files as input and outputs a complete static site into a _site directory, ready to deploy anywhere static hosting works.

What is Eleventy Base?

Eleventy Base is a starter template for building static blogs and portfolio sites with Eleventy (11ty), a JavaScript static site generator. It builds on the Eleventy Base Blog, so it inherits a blog-focused structure with tag collections, a feed, and navigation, while adding a Sass pipeline, custom webfont support, and Parcel for bundling client-side JavaScript. The project lives on GitHub.

Key Features

• Sass compilation — Write SCSS files and have them compiled into CSS automatically as part of the Eleventy build process.
• Custom webfonts — Includes support for serving custom webfonts with the site, so fonts are bundled and output correctly.
• JavaScript bundling with Parcel — Client-side JavaScript is processed and bundled using Parcel, enabling modern ES modules and dependencies in a static site.
• Tag-based collections — Posts only need the post tag to be added to the blog collection; adding the nav tag puts a page in the top-level site navigation.
• Flexible content formats — Content can be authored in any template format you configure in .eleventy.js via templateFormats; blog posts don't have to be Markdown.
• Pass-through file copying — Non-template file types like css and png listed in templateFormats are copied to the output unchanged, keeping the directory structure intact.
• Three layouts — _includes/layouts/base.njk provides the top-level HTML, home.njk the home page template, and post.njk the blog post template, all wrapping into base.njk.
• Reusable post list include — _includes/postlist.njk is a Nunjucks include that renders a list of all posts, and index.njk shows how to use it.

Who should use Eleventy Base?

• Independent bloggers — It provides a ready-made blog with posts, tags, a feed, and navigation, so you can focus on writing Markdown content.
• Front-end developers — The Sass and Parcel integration means you can develop with SCSS and bundled JavaScript while still getting a static, fast-loading output.
• Portfolio site creators — The repo metadata lists "portfolio" as a use case; you can use tags and flexible content formats to organize projects as posts and add them to navigation.

What can you do with Eleventy Base?

• Blog authors: Write posts in Markdown inside posts/ (or any directory), tag them with post, and they automatically appear in the post list and feed.
• Site maintainers: Add the nav tag to any template to include it in the top-level navigation, as already done on index.njk and about/index.md.
• Developers: Extend the global data in _data/metadata.json to change site metadata, and use the about/index.md example to add new content pages.

How does Eleventy Base work?

Install dependencies with npm install, then run npm start for local development with hot-reload. Use npm run debug for detailed build output, or npm run build to generate the static site into the _site directory.

FAQ

What is Eleventy?

Eleventy is a JavaScript static site generator that produces fast static sites from templates like Markdown, Nunjucks, and Liquid. Eleventy Base is built on it and uses the official Eleventy Base Blog as its starting point.

How do I add a new page?

Create a new file in any supported template format, add the nav tag to its front matter to include it in the top-level navigation, and set a layout. The about/index.md file provides a working example.

How do I add a blog post?

Add a Markdown file in the posts/ directory or any other folder, and give it the post tag in front matter. It will automatically be added to the post list, the blog collection, and the RSS feed.

How do I build the site?

Run npm run build to compile everything into the _site directory. For local development with hot-reload, run npm start; use npm run debug for debug mode.