Eleventy Encore

Eleventy Encore is a starter template for the Eleventy static site generator (11ty) that uses Webpack Encore to bundle CSS and JavaScript assets, created and maintained by disjfa. It provides a minimal, npm-driven workflow for building fast static websites and automatically deploying them to GitHub Pages.

What is Eleventy Encore?

Eleventy Encore is a starter template for the Eleventy static site generator (11ty) that uses Webpack Encore to compile and bundle CSS and JavaScript assets. It takes content written in Markdown or other templating languages and outputs a fully static HTML site, with the asset pipeline handled by Webpack Encore. The template is maintained by disjfa and released under the MIT license.

Key Features

• 11ty as the static site generator — Eleventy builds static HTML pages from templates with a focus on simplicity and performance.
• Webpack Encore integration — A single entry point for JavaScript and CSS assets that are compiled and versioned for production.
• One-command development workflow — npm run start launches a local server that runs both the Webpack Encore watch script and the Eleventy server for hot-reloading during development.
• Pre-configured deployment to GitHub Pages — The npm run deploy command builds the CSS and JavaScript, generates all static files, and publishes the site to gh-pages automatically.
• Simple npm-based setup — Install dependencies with a single npm install after cloning or forking the repository.
• MIT licensed — Free to use, modify, and distribute, with a permissive open-source license.

Who is it for?

Eleventy Encore is suitable for developers who want a pre-configured starting point for building static websites with 11ty and Webpack Encore. For example:

• Static site developers who want to skip the boilerplate setup and start writing content immediately.
• Front-end developers who prefer Webpack Encore as their asset bundler and want a working integration with 11ty.
• Portfolio and blog creators who need a simple, fast static site with a build pipeline that handles CSS and JS compilation.

What can you do with Eleventy Encore?

• Create a new static site: Clone the repository, run npm install, and start developing with a local server that watches your assets.
• Deploy to GitHub Pages: Use the built-in npm run deploy script to build and publish the site to gh-pages without extra configuration.
• Customize the asset pipeline: Modify the Webpack Encore config to add Sass/LESS support, loaders, or other asset processing (though the default setup is minimal).

How does it work?

1. Clone or fork the repository.
2. Run npm install to fetch dependencies.
3. Run npm run start to start the local development server with both Webpack Encore watch mode and the 11ty server.
4. Run npm run deploy to build production assets, generate static files, and push the result to the gh-pages branch.

Pros and cons

• Pros:
  • Simple, minimal setup with two npm scripts for development and deployment.
  • Uses Webpack Encore, which is well-documented and familiar to developers coming from Symfony.
  • Automatically deploys to GitHub Pages via the npm run deploy script.
• Cons:
  • The template is spartan; the README documents no included CSS framework or pre-built page layouts.
  • It requires Node.js and npm, and the Webpack Encore pipeline adds a build step compared to using 11ty alone.

FAQ

Is Eleventy Encore free to use?

Yes, the project is licensed under the MIT License, which permits free use, modification, and distribution.

What does the npm run start command do?

It starts two processes simultaneously: Webpack Encore's watch mode to recompile assets on change, and an Eleventy development server that serves the static site locally with live reload.

Does this template include a CSS framework?

The visible README does not mention any CSS framework. You can add your preferred framework (e.g., Bootstrap, Tailwind) via npm, but the default setup includes only the Webpack Encore asset pipeline.

Where can I see a live demo?

The repository README links to a live demo at https://disjfa.github.io/eleventy-encore/.