Eleventy Plus Vite
🏃💨

A clean and fast Eleventy Starter Project with Vite.

Features

• Eleventy v3
• Eleventy Dev Server with live reload
• Vite v5
• Vite as Middleware in Eleventy Dev Server (uses eleventy-plugin-vite)
• Eleventy build output is post-processed by Vite (with Rollup)
• CSS/Sass post-processing with PostCSS incl. Autoprefixer and cssnano
• Uses my own opinionated CSS/Sass structure
• Critical CSS, generated and inlined via rollup-plugin-critical. The main CSS file is then loaded asynchronously with Scott Jehl’s media loading strategy (adds media="print" and swaps to media="all" once loaded)
• Example implementation of a web font loading strategy (critical FOFT with preload)
• Basic fluid typography based on Utopia
• Basic dark mode support (using prefers-color-scheme and CSS Custom Properties)
• Polyfill for focus-visible
• RSS feed 🧡
• XML sitemap
• Four Hundos Lighthouse score 💯💯💯💯

Getting started

Start by generating a new repository based on this project.

After cloning (or downloading) the repository to your local machine, install all dependencies with the command

npm install

Run dev server

The project comes with Eleventy’s built-in development server. You can start the server with

npm start

or

npx @11ty/eleventy --serve

Build

To trigger a production build, use

npm run build

or

npx @11ty/eleventy

Deploy a fork of this template to Netlify

CSS

By default, this starter project uses Sass with an opinionated folder structure. Feel free to replace this structure with your own. If you prefer to write standards-compliant, good old plain CSS, this is also supported. Nesting is then possible via the PostCSS Nesting plugin, following the CSS Nesting specification.

Autoprefixer adds necessary browser prefixes. The browserslist settings can be adjusted in package.json.

Roadmap

• Add more base styles and a demo page that shows example styles and components
• Add a toggle button for the dark mode theme
• More advanced base styles for modern CSS layout
• Webmention/IndieWeb support

Feedback

Please provide feedback! 🤗 Ideally by filing an issue here – or via a pull request.

Thank you!

This starter project would not have been possible without the many great sites and projects I was able to learn from, use as inspiration, and shamelessly copy code from:

• Zach Leatherman zachleat.com
• Max Böck’s Eleventastic
• Stephanie Eckles’s 11ty Netlify Jumpstart
• Miriam Suzanne miriamsuzanne.com