v60 - Eleventy Vite Starter

A clean and fast Eleventy Starter Project with Vite.

Features

• 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 💯💯💯💯

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

pnpm install

Run dev server

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

pnpm serve

Build

To trigger a production build, use

pnpm build

Deploy a fork of this template to Netlify

CSS

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:

• 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