Pack11ty

Pack11ty is a heavily opinionated Eleventy starter project and companion plugin that outputs a static website with automatic collections, PWA offline support, and performance-optimized JavaScript and Sass.

What is Pack11ty?

Pack11ty is an open-source Eleventy starter (template project) maintained by nhoizey on GitHub, designed to build static websites with performance and modern web capabilities baked in. It takes Markdown content, Sass, and JavaScript as inputs and outputs a static HTML site with optimized assets, automatic collections, and PWA offline support. The project is split into two parts: the eleventy-plugin-pack11ty plugin, which can be added to any Eleventy site, and the pack11ty template repository, which pre-configures the plugin with a responsive layout and extra defaults. Deployment is supported through Netlify and other hosting options.

Key Features

• Automatic collections — Collections are generated automatically from root folders, with pagination for yearly and monthly archives.
• Performance-optimized assets — JavaScript and Sass/CSS are split into critical inline assets and external async files with hashes for cache busting; dev mode includes live reload.
• Responsive images — Simple Markdown and presets generate responsive image markup without manual srcset editing.
• Enhanced Markdown — A set of Markdown-it plugins adds footnotes, attributes, heading anchors, abbreviations, and containers.
• PWA support — Service Worker pre-caches UI assets, auto-caches visited pages, and provides an offline fallback; a manifest enables installation.
• Indieweb features — Webmentions are supported, and an Atom feed combines all collections for syndication.
• Responsive layout — The template uses Flexbox and Every Layout patterns to achieve responsiveness without CSS media queries.
• YouTube sharing — A simple, responsible way to embed YouTube videos in content.

Who should use Pack11ty?

Pack11ty suits developers who want a fast, opinionated baseline for content-focused Eleventy sites. It's for bloggers who need archives and feeds out of the box, developers who want PWA offline support without writing a Service Worker by hand, and Eleventy enthusiasts who want to reuse a well-tested plugin in their own projects.

What can you do with Pack11ty?

• Bloggers: publish posts with yearly/monthly archives, Atom feed, and Webmentions built in.
• Developers: build a static site with Sass, optimized JS/CSS, and live reload during development.
• Indieweb advocates: set up a personal site with Webmention support and offline capability.
• Video creators: share YouTube videos using a dedicated shortcode.

How does Pack11ty work?

To start, click the deploy-to-Netlify button on the repository page, which clones the template and sets up a new site, or follow the installation documentation for other hosting options. The plugin automatically scans root folders for content, applies the Markdown and image pipelines, and generates the static output through Eleventy's build process.

FAQ

Is Pack11ty free to use?

Yes, Pack11ty is free — the template repository and plugin are publicly accessible on GitHub, and the documentation site is available without charge.

Does Pack11ty include a service worker?

Yes, the template includes a Service Worker that pre-caches UI assets, automatically caches visited pages, and provides an offline fallback, along with a manifest for PWA installation.

Can I use Pack11ty with an existing Eleventy site?

Yes, the eleventy-plugin-pack11ty plugin can be added to any Eleventy project to gain features like automatic collections, asset optimization, and responsive image presets. The template repository itself is meant for starting new projects.

Does Pack11ty require Sass?

The template uses Sass for styling, and the asset pipeline compiles Sass/CSS and JavaScript. The configuration can be customized, but the default setup relies on Sass.

How do I deploy Pack11ty?

Pack11ty offers a one-click deploy-to-Netlify button, and the documentation lists additional installation and deployment options for other hosts or local development.