---
title: "Eleventy (11ty)"
description: "Eleventy is a Static Site Generator built by Zach Leatherman."
canonical_url: "https://codex.republic.se/cms/eleventy-11ty"
section: "Pages"
---

# Eleventy

*Eleventy* is a Static Site Generator built by [Zach Leatherman](https://www.zachleat.com/).

---

## Resources

- [11ty Rocks!](https://11ty.rocks/)
- [Writing by Sia tagged "Eleventy"](https://sia.codes/tags/eleventy/)
- [11ty Blog Posts](https://bryanlrobinson.com/blog/category/11ty)
- [A New Site with Eleventy](https://benjaminandrew.net/posts/2022/redesign/)
- <https://github.com/google/eleventy-high-performance-blog>

## Introductions

- [Learn Eleventy From Scratch | Learn Eleventy From Scratch](https://learneleventyfromscratch.com)
- [Beginner's Guide to Eleventy \[Part I\]](https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti)

## Plugins

### Eleventy + Vite

#### Official 11ty Vite plugin

- Runs Vite as Middleware in Eleventy Dev Server
- Runs Vite build to postprocess your Eleventy build output
- <https://github.com/11ty/eleventy-plugin-vite>
- <https://github.com/matthiasott/eleventy-plus-vite>

#### Eleventy with Vite

This is a template (or demo) for integrating [Vite](https://vitejs.dev/) with [Eleventy](https://www.11ty.dev/). This allows you to use Vite for its very fast bundling of JS and assets for client-side scripts, while building the static pages (and anything related) with Eleventy.

- <https://github.com/fpapado/eleventy-with-vite>

#### **Vite Plugin Eleventy**

Eleventy as Middleware in Vite (instead of the post-processing approach used here)

- <https://github.com/Snugug/vite-plugin-eleventy>

### Slinkity

Slinkity is the simplest way to handle styles and component frameworks on your 11ty site.

- [Slinkity](https://slinkity.dev/)

### Eleventy + Sass

- [Add a Sass workflow - 11ty Recipes](https://11ty.recipes/recipes/add-a-sass-workflow/)
- https://github.com/5t3ph/11ty-sass-skeleton

### Config samples

- [.eleventy.js Config Samples | 11ty Rocks!](https://11ty.rocks/eleventyjs/)

### Images

- [@jlengstorf/cloudinary-11ty-helpers](https://www.npmjs.com/package/@jlengstorf/cloudinary-11ty-helpers)

### Storybook

- [Using Storybook With 11ty | The WebStorm Blog](https://blog.jetbrains.com/webstorm/2022/04/using-storybook-with-11ty/)

### Multilingual solutions

- [Eleventy (11ty) setup for multilingual component-based flexible pages (aka One Page Websites with i18n)](https://www.andberry.me/articles/11ty-multilanguage-multi-sections-components-setup)

### Experiments

- https://github.com/thiagomgd/eleventy\_notion\_starter
- https://github.com/larryhudson/11ty-text-to-mp3