Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthiasott/eleventy-plus-vite
A clean and fast Eleventy Starter Project with Vite
https://github.com/matthiasott/eleventy-plus-vite
11ty 11ty-template eleventy eleventy-starter jamstack vite vitejs
Last synced: about 21 hours ago
JSON representation
A clean and fast Eleventy Starter Project with Vite
- Host: GitHub
- URL: https://github.com/matthiasott/eleventy-plus-vite
- Owner: matthiasott
- License: mit
- Created: 2022-06-07T19:41:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-19T12:36:32.000Z (5 months ago)
- Last Synced: 2025-01-03T17:12:47.651Z (8 days ago)
- Topics: 11ty, 11ty-template, eleventy, eleventy-starter, jamstack, vite, vitejs
- Language: SCSS
- Homepage: https://eleventyplusvite.netlify.app
- Size: 255 KB
- Stars: 197
- Watchers: 4
- Forks: 30
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - matthiasott/eleventy-plus-vite - A clean and fast Eleventy Starter Project with Vite (others)
README
# Eleventy Plus Vite
🏃💨
A clean and fast Eleventy Starter Project with Vite.
[](https://app.netlify.com/sites/eleventyplusvite/deploys)
## Features
* Eleventy v3
* Eleventy Dev Server with live reload
* Vite v5
* Vite as Middleware in Eleventy Dev Server (uses [eleventy-plugin-vite](https://github.com/11ty/eleventy-plugin-vite/))
* Eleventy build output is post-processed by [Vite](https://vitejs.dev) (with Rollup)
* CSS/Sass post-processing with PostCSS incl. [Autoprefixer](https://github.com/postcss/autoprefixer) and cssnano
* Uses [my own opinionated CSS/Sass structure](https://matthiasott.com/notes/how-i-structure-my-css)
* Critical CSS, generated and inlined via [rollup-plugin-critical](https://github.com/nystudio107/rollup-plugin-critical). The main CSS file is then loaded asynchronously with [Scott Jehl’s `media` loading strategy](https://www.filamentgroup.com/lab/load-css-simpler/) (adds `media="print"` and swaps to `media="all"` once loaded)
* Example implementation of a web font loading strategy ([critical FOFT with preload](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload))
* Basic fluid typography based on [Utopia](https://utopia.fyi)
* Basic dark mode support (using `prefers-color-scheme` and CSS Custom Properties)
* Polyfill for [focus-visible](https://matthiasott.com/notes/focus-visible-is-here)
* RSS feed 🧡
* XML sitemap
* Four Hundos Lighthouse score 💯💯💯💯
## Getting started
Start by [generating a new repository based on this project](https://github.com/matthiasott/eleventy-plus-vite/generate).
After cloning (or downloading) the repository to your local machine, install all dependencies with the command
```sh
npm install
```
## Run dev server
The project comes with Eleventy’s built-in development server. You can start the server with
```sh
npm start
````
or
```sh
npx @11ty/eleventy --serve
````
## Build
To trigger a production build, use
```sh
npm run build
````
or
```sh
npx @11ty/eleventy
```
## Deploy a fork of this template to Netlify
[](https://app.netlify.com/start/deploy?repository=https://github.com/matthiasott/eleventy-plus-vite)
## 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](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), following the [CSS Nesting specification](https://drafts.csswg.org/css-nesting-1/).
[Autoprefixer](https://github.com/postcss/autoprefixer) adds necessary browser prefixes. The [browserslist](https://github.com/browserslist/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](https://github.com/matthiasott/eleventy-plus-vite/issues) – 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](https://github.com/zachleat/zachleat.com)
* Max Böck’s [Eleventastic](https://github.com/maxboeck/eleventastic)
* Stephanie Eckles’s [11ty Netlify Jumpstart](https://github.com/5t3ph/11ty-netlify-jumpstart)
* Miriam Suzanne [miriamsuzanne.com](https://www.miriamsuzanne.com)