Elf

Elf is an Eleventy starter kit that ships a production-ready static-site workflow with webpack, Babel, and Sass already configured. It's built for developers who want to skip the setup and start generating HTML from EJS templates, Sass styles, and modern JavaScript.

What is Elf?

Elf is a production-ready Eleventy starter kit created by stowball, available as a public GitHub repository. It takes EJS templates, Sass stylesheets, and JavaScript files as input and outputs a static site to a dist directory. The toolchain includes webpack for asset compilation, Babel for JavaScript transpilation and polyfilling, and Autoprefixer for vendor-prefixing CSS.

What makes Elf stand out?

• EJS templating — Uses EJS (Embedded JavaScript) for page templates and UI partials in src/_components.
• Sass with Autoprefixer — Writes CSS in Sass; Autoprefixer automatically adds vendor prefixes during the build.
• Babel transpilation — Transpiles and polyfills modern JavaScript for improved browser compatibility.
• Webpack asset bundling — Compiles all Sass and JavaScript assets; files placed in the assets directory are handled by webpack.
• ESLint with Airbnb config — Lints JavaScript code against Airbnb's base ESLint configuration to enforce consistent style.
• Dev and prod build scripts — npm run dev serves a development build at localhost:8080; npm run prod builds a production bundle, and npm run serve:prod serves it at localhost:5000.
• Clean project structure — Separates components, data, layouts, pages, assets, and images into distinct directories, with output directed to a root-level dist folder.

Who should use Elf?

• Eleventy newcomers — Get a working static-site generator with a modern asset pipeline without configuring webpack, Babel, and Sass from scratch.
• Front-end developers — Build blogs, marketing sites, or documentation sites with EJS, Sass, and standard JavaScript, then produce a production-ready bundle with one command.
• Jamstack developers — Use the pre-configured build to deploy static output to any hosting service that serves HTML, CSS, and JS.

What can you do with Elf?

• Create a landing page — Add a page under src/_pages, use a layout from src/_layouts, and have global styles from assets/css/index.scss applied automatically.
• Prototype a small marketing site — Chain together UI partials from src/_components and use the npm run dev server to preview changes locally at localhost:8080.
• Build a production-ready static site — Run npm run prod to generate a minified, prefixed, and transpiled output in dist, ready for deployment.

How does Elf work?

To get started, clone or fork the repository, then run npm install to fetch dependencies. For development, run npm run dev and browse to localhost:8080. For production, run npm run prod to build the site and npm run serve:prod to serve the output at localhost:5000. Eleventy transforms directories prefixed with an underscore, while assets are processed by webpack and images are copied over.

FAQ

How do I install Elf?

Clone or fork the repository from GitHub, then run npm install in the project directory to install its dependencies. After that, you can use the npm scripts provided in the starter kit.

What templating language does Elf use?

Elf uses EJS (Embedded JavaScript) as its templating language. Page templates, layouts, and partials are all written with EJS and processed by Eleventy during the build.

How do I build Elf for production?

Run npm run prod to generate a production build. The output is written to a dist directory at the root level. You can preview it locally with npm run serve:prod, which serves the dist folder at localhost:5000.

Where does the built site go?

Eleventy outputs the final static site to a dist directory at the root of the project. This folder contains the compiled HTML, CSS, and JavaScript ready for deployment.