Eleventy Themes Logo Eleventy Themes
Eleventy Plus Vite screenshot

Eleventy Plus Vite

Author Avatar Theme by Matthiasott
Updated: 19 Aug 2024
204 Stars

A clean and fast Eleventy Starter Project with Vite

Github Live Preview

Categories

Vite Scss

Overview

Eleventy Plus Vite is a clean and fast Eleventy Starter Project with Vite. It incorporates several features to enhance development efficiency and performance. This project has a focus on providing a seamless workflow for developers using Eleventy.

Features

  • Eleventy 2.0.0-canary: This project utilizes the latest version of Eleventy, offering improved performance and new features.
  • New Eleventy 2.0 Dev Server: The project includes a new development server with live reload, making it easier for developers to preview their changes.
  • Vite Middleware: Vite is used as middleware in the Eleventy Dev Server, utilizing the eleventy-plugin-vite. This speeds up the development process by providing faster build times.
  • CSS/Sass Post-Processing: The project uses PostCSS to post-process CSS/Sass files. This includes features like autoprefixing and minification with cssnano.
  • Opinionated CSS/Sass Structure: The project adopts a structured approach to organizing CSS/Sass files, ensuring a clean and maintainable codebase.
  • Critical CSS Generation: The project generates critical CSS and inlines it using the rollup-plugin-critical. This helps to optimize the loading speed of the website.
  • Web Font Loading Strategy: An example implementation of a web font loading strategy is provided, incorporating critical FOFT (Flash of Unstyled Text) with preload to improve performance.
  • Fluid Typography: The project includes basic support for fluid typography based on the Utopia CSS framework.
  • Dark Mode Support: The project implements basic dark mode support using prefers-color-scheme and CSS Custom Properties. This allows for seamless switching between light and dark themes.
  • Focus-Visible Polyfill: A polyfill for the focus-visible CSS selector is included, ensuring consistent styling for focusable elements across different browsers.
  • RSS Feed and XML Sitemap: The project generates an RSS feed and XML sitemap for improved SEO and content discovery.
  • Excellent Lighthouse Score: The project achieves a perfect Lighthouse score of 100 on all four metrics, indicating a high level of performance, accessibility, best practices, and SEO.

Installation

  1. Start by generating a new repository based on this project.
  2. Clone or download the repository to your local machine.
  3. Install all dependencies by running the command npm install.
  4. Start the development server with the command npm run dev.
  5. To trigger a production build, use npm run build.
  6. Deploy a fork of this template to Netlify or your preferred hosting platform.

Summary

Eleventy Plus Vite is an Eleventy Starter Project that combines the power and flexibility of Eleventy with the speed and efficiency of Vite. It offers various features such as a new Eleventy dev server with live reload, Vite middleware integration, CSS/Sass post-processing, critical CSS generation, web font loading strategy, fluid typography, dark mode support, and more. With a perfect Lighthouse score and built-in support for RSS feed and XML sitemap, it provides developers with a solid foundation for building performant and SEO-friendly websites.