EleventyOne

EleventyOne is a free boilerplate starter for building static sites with the Eleventy static site generator, preconfigured for Netlify deployment and serverless functions.

What is EleventyOne?

EleventyOne is an open-source project scaffold created by Phil Hawksworth for starting new Eleventy sites. It provides a skeleton site with an Eleventy setup, Nunjucks templating with a Luxon-based date filter, a PostCSS pipeline, and a JavaScript pipeline. The project runs on Node.js and is designed to be deployed to Netlify, including local testing of Netlify redirects and serverless functions via Netlify Dev.

Key Features

• Eleventy skeleton — A minimal site structure ready to build on, using the Eleventy static site generator.
• Luxon date filter — A Nunjucks filter for formatting dates using the Luxon library.
• PostCSS pipeline — A tiny CSS processing pipeline that runs through PostCSS.
• Inline JS pipeline — A minimal JavaScript processing pipeline that keeps scripts inline.
• JS search index generator — Generates a search index for client-side search.
• Netlify Dev integration — Allows testing Netlify redirects and proxies locally using netlify dev.
• Serverless functions pipeline — Includes Netlify Functions support, with example functions like hello and fetch-joke.
• One-click Netlify deploy — A Deploy to Netlify button that clones the repo to your GitHub account and creates a new Netlify site.

Who is it for?

• Jamstack developers starting a new Eleventy project who want a working scaffold with Netlify integration out of the box.
• Developers new to Eleventy who need a minimal example of how to structure an Eleventy site with common pipelines.
• Netlify users who want to experiment with Netlify Functions and redirects inside an Eleventy project without configuring everything from scratch.

What can you do with EleventyOne?

• Deploy a site instantly: Click the Deploy to Netlify button, and Netlify clones the repository to your GitHub account and wires up a new site for you.
• Test serverless functions locally: Run netlify dev and access functions like /.netlify/functions/hello and /.netlify/functions/fetch-joke.
• Use friendly redirects: Access the functions through proxied URLs like /api/hello and /api/fetch-joke thanks to Netlify's Redirects API.
• Add search to your site: Use the included JS search index generator to build a client-side search index.

How does EleventyOne work?

1. Click the Deploy to Netlify button, which clones the repository to your GitHub account.
2. Netlify creates a new site linked to that repository, so future pushes trigger deployments.
3. Clone the repo locally, run npm install and npm run seed to stash external data, then npm start to build.
4. For local Netlify features, install the Netlify CLI and run netlify dev.

FAQ

Is EleventyOne free?

Yes, the scaffold is open source, hosted on GitHub under the philhawksworth/eleventyone repository.

What is EleventyOne?

It's a starting template for Eleventy sites, created by Phil Hawksworth, with Netlify Dev and serverless functions preconfigured.

Does EleventyOne include a CMS?

No, it doesn't include a CMS. It comes with a skeleton site, a CSS pipeline, and serverless functions, but you can add any CMS that works with Eleventy.

How do I deploy EleventyOne?

Use the Deploy to Netlify button, which handles cloning the repo and setting up a Netlify site. You can also deploy from your own Git repository by connecting it to Netlify.