Boilerplate Code 11ty

Boilerplate Code 11ty is an open-source Eleventy (11ty) static site starter from AppSeed that combines a pre-built Pixel Lite UI kit with a complete build pipeline for Sass, JavaScript, and SVG icons. It outputs a minified static site ready for deployment to Netlify.

What is Boilerplate Code 11ty?

Boilerplate Code 11ty is an Eleventy seed project created by AppSeed. It takes content written in Nunjucks templates and Markdown as input and generates static HTML files, styled with the Pixel Lite UI Kit by Themesberg. The project runs on Node.js and includes everything needed to develop locally and deploy to Netlify, making it a ready-to-use foundation for any static website.

Key Features

• Eleventy static site generator — Renders Nunjucks layouts and Markdown blog posts into plain HTML, with a simple src/ folder structure.
• Pixel Lite UI Kit — A free Themesberg UI kit with a navigation bar, left sidebar, footer, auth pages, and UI component pages, all included as templates.
• Sass CSS pipeline — SCSS from src/static/assets/styles/main.scss is compiled, optimized, and minified to dist/static/assets/styles/main.css.
• Webpack JavaScript bundling — ES6 code from src/static/assets/scripts/main.js is transpiled to ES5 with Babel, bundled, and minified for production output to dist/static/assets/scripts/main.js.
• SVG icon sprite generation — Every SVG file placed in src/static/assets/icons is combined into a symbol sprite and can be referenced by filename.
• Critical CSS inlining — The homepage automatically inlines critical CSS in the head using the critical package, improving first paint.
• HTML minification — Production builds generate optimised and minified HTML for faster loading.
• Netlify deployment — Includes netlify.toml and a one-click deploy button that forks the repository and connects it to Netlify.

Who is it for?

• Frontend developers who want a lightweight Eleventy alternative to frameworks like Next.js, with a clean separation between source and build output.
• Static site owners who need a pre-wired Pixel Lite UI kit with a sidebar, navigation, and auth pages to quickly launch a marketing or dashboard site.
• Agencies and freelancers who want to build multiple client sites on a fixed static stack and deploy each to Netlify within minutes.

What can you do with Boilerplate Code 11ty?

• Launch a marketing site: Replace the sample content in src/ with your own Nunjucks or Markdown, customise the supplied index.html and component pages, then build and ship.
• Create a blog or documentation site: Write posts in Markdown; the Eleventy render engine publishes them into the static output alongside the rest of the site.
• Prototype a dashboard or admin panel: The base.html and base-fullscreen.html layouts provide a consistent shell with navigation and sidebar, so you can focus on adding data-driven views.
• Deploy a client site to Netlify instantly: Use the provided deploy button or run the project through your own Netlify install; the netlify.toml handles the build settings automatically.

How does Boilerplate Code 11ty work?

Clone the repository from GitHub, install the dependencies with npm install, and start the development server with npm start. The project is served at http://127.0.0.1:8080/ by default. For production, run npm build to generate the static site in the dist/ directory. All source files live in src/, while utils/ holds JavaScript helpers and .eleventy.js contains the Eleventy configuration.

FAQ

Is Boilerplate Code 11ty free?

The boilerplate is an open-source Eleventy starter published on GitHub by AppSeed, and it uses the free version of the Pixel Lite UI Kit from Themesberg. You can clone, fork, and deploy it without paying a license fee.

How do I start developing with Boilerplate Code 11ty?

Clone the repository, run npm install, then npm start to launch the local dev server. When you are ready to ship, run npm build to generate the minified static site in dist/.

How does the CSS pipeline work?

Write your styles in src/static/assets/styles/main.scss. The project compiles this SCSS with Sass, runs it through asset optimization, and outputs the minified CSS to dist/static/assets/styles/main.css.

Can I deploy Boilerplate Code 11ty to Netlify?

Yes. The repository includes a netlify.toml configuration and a one-click deploy button. Clicking the button creates a fork of the repo on your GitHub account and sets up a Netlify site linked to it.

How should I add custom JavaScript?

Add your ES6 code to src/static/assets/scripts/main.js. Webpack bundles the file, Babel transpiles it to ES5 for older browsers, and the production build minifies and outputs it to dist/static/assets/scripts/main.js.