johannschopplich / 11th

🧰 Generic Eleventy starterkit with an emphasis on hashing assets and SEO

11th

Simple, Generic Eleventy Template
Explore the demo »

Key Features

• 🍃 Generic: Solely basics – but those well thought out
• 🔢 Hashed Assets: Cachebust CSS & JS files in production, like main.ac3afb.css
• 🔍 SEO-friendly: Generate meta tags for each page
• 🗂 Reasonable Directory Names: As little nesting as possible
• 🏗 Default Layout: Standard layout if no custom one specified
• ⚡️ HTML Minification: Minify generated HTML in production
• 🚤 Rollup: Simple ES module bundler setup

How did we get here?

When creating my first website with Eleventy, I was reading through many starter projects to grasp how one could setup an Eleventy site. Sometimes being overwhelmed by the complexity. I didn't need pagination or support for Webmentions. Just the basics. I forked a few but often found myself stripping out parts I didn't need.

So I constructed a setup which I felt comfortable working with. A light base for future projects. Of course, every starterkit is opiniated, this is my take.

What other templates lacked was a reliabe way to cachebust CSS and JS assets (without query strings) that doesn't get in the way in development environment. That's one of the core features of this starter project.

Setup

Install npm dependencies:

npm install

Spin up the development server:

npm run start

Build for production (compiles into _site):

npm run build

Credits

• pack11ty for default layout fallback and permalink options in src.11tydata.js