A clean and fast Eleventy Starter Project with Vite.
- Eleventy 2.0.1
- New Eleventy 2.0 Dev Server with live reload
- Vite 5.0.10
- Vite as Middleware in Eleventy Dev Server (uses eleventy-plugin-vite)
- Eleventy build output is post-processed by Vite (with Rollup)
- CSS post-processing with PostCSS and Autoprefixer
- 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 💯💯💯💯
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
pnpm install
The project comes with Eleventy’s built-in development server. You can start the server with
pnpm serve
To trigger a production build, use
pnpm build
Autoprefixer adds necessary browser prefixes. The browserslist settings can be adjusted in package.json
.
- 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
Please provide feedback! 🤗 Ideally by filing an issue here – or via a pull request.
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:
- Matthias Ott matthiasott/eleventy-plus-vite
- Zach Leatherman zachleat.com
- Max Böck’s Eleventastic
- Stephanie Eckles’s 11ty Netlify Jumpstart
- Miriam Suzanne miriamsuzanne.com
- W3T web3templates.com