Eleventonia is an Eleventy (11ty) starter project that bundles a pre-configured build pipeline for static sites, including SCSS processing, inline CSS, HTML minification, and RSS generation.
What is Eleventonia?
Eleventonia is a starter project for Eleventy, the static site generator known as 11ty, maintained in the GitHub repository mattdecamp/eleventonia. It takes Markdown content and SCSS source files as inputs and produces a static HTML site with all styles inlined in the head, minified markup, and an RSS feed. The README includes a Deploy to Netlify button for one-click publishing.
Key Features
Eleventonia ships with a set of pre-configured features that are activated automatically during the Eleventy build.
- HTML Minification — All HTML output is minified at production build time, reducing file size for faster page loads.
- CSS Pipeline — Styles are compiled from SCSS to CSS using CleanCSS, then inlined directly into the head of the base page template.
- Eleventy Dev Server — The development environment runs a local server that watches for changes and updates the browser automatically.
- Eleventy SVG Icon Sprites — The starter supports SVG icon sprites so you can embed reusable icons without duplicated markup.
- Eleventy RSS — An RSS feed is generated, making the starter suitable for blogs and content sites.
- Date Formatting Filter — A custom filter formats dates consistently across posts and pages.
- Post Excerpts — Posts can display short excerpts, which is useful for listing pages and index views.
Who is it for?
- Web developers who want a fast, pre-configured Eleventy setup and don't want to wire together build tools manually.
- Bloggers who need a static blog with RSS, post excerpts, and automatic HTML minification.
- Designers who prefer working in SCSS and want the compiled CSS safely inlined into the final HTML.
- Learners who are new to Eleventy and want to study a working example of a Sass-to-inline-CSS pipeline.
What can you do with Eleventonia?
- Build a blog: Write posts in Markdown and get a static blog with RSS, date formatting, and post excerpts out of the box.
- Deploy to Netlify: Use the included Deploy to Netlify button to launch the site without manual build configuration.
- Customize the design: Edit SCSS files in the src/assets/styles/scss folder, organized into base, components, and utility folders.
- Explore Eleventy workflows: Use the project as a learning resource to see how Eleventy integrates with Sass and Netlify.
How does Eleventonia work?
Install dependencies with npm install, start the development environment with npm run dev, and build for production with npm run build. The dev server watches Sass changes and pushes compiled CSS to main.css inside the includes folder; Eleventy then inlines those styles in the head. At production build time, all HTML files are minified.
Alternatives
Eleventonia's README credits several other Eleventy starter projects:
- Hylia — by Andy Bell
- Eleventastic — by Max Böck
- Eleventyone — by Phil Hawksworth
FAQ
Is Eleventonia free?
Eleventonia is an open-source starter project hosted on GitHub. No license or pricing is mentioned in the README, so you can freely use it as a foundation for your own projects.
How do I get started with Eleventonia?
Run npm install in the root folder, then use npm run dev for local development or npm run build for a production build. Additional Eleventy commands are listed on the Eleventy command line usage page linked from the README.
Does Eleventonia support RSS?
Yes, "Eleventy RSS" is one of the listed features, so the starter is configured to generate an RSS feed for your site. That makes it useful for blogs and any content that needs syndication.
Can I customize the styles?
Yes, the main Sass files are in the src/assets/styles/scss folder with subfolders for base, components, and utility styles. The dev environment automatically watches and applies changes to the inlined CSS.
