Eleventy (11ty)
Simple and flexible JavaScript-based SSG. Over 16k GitHub stars with zero configuration to get started.
トレンド・動向
Popular among developers prioritizing simplicity and performance. Human-centric approach without corporate backing is appreciated.
# Static Site Generator
Eleventy (11ty)
## Overview
Eleventy (11ty) is "a simple and flexible JavaScript-based SSG" developed to get started immediately with zero configuration required. Boasting over 16k GitHub stars, it's popular among developers prioritizing simplicity and performance. The human-centric approach without corporate backing is appreciated, making it an ideal choice for developers who want to avoid complex configurations and build sites intuitively. With support for 11 template languages, efficient development is possible while leveraging existing knowledge.
## Details
Eleventy 3.x has been established as a mature SSG pursuing the balance between simplicity and flexibility through continuous development since 2018. The key feature is "zero configuration" while enabling advanced customization, with standard support for 11 template languages: HTML, Markdown, Nunjucks, Liquid, Handlebars, Mustache, EJS, Haml, Pug, JavaScript, and WebC. The data cascade system enables unified management of multiple data sources like JSON, JavaScript, and front matter, while the collections feature allows efficient construction of dynamic site structures. Through extensibility via the plugin system and fast build performance, it's adopted for various purposes from personal blogs to corporate sites.
### Key Features
- **Zero Configuration**: Start site construction immediately without configuration files
- **11 Template Language Support**: Maximize utilization of existing knowledge
- **Data Cascade System**: Unified management of multiple data sources
- **Fast Build**: Excellent performance through minimal design
- **Flexible Plugin System**: Feature extension and external service integration
- **Collections Feature**: Dynamic site structure and navigation generation
## Pros and Cons
### Pros
- Low learning cost through zero configuration and immediate development start
- High flexibility through 11 template language support
- Fast build and stability through lightweight, simple design
- Intuitive and flexible data management through data cascade
- Continuous development through community-driven approach independent of corporations
- Rich plugin ecosystem and customizability
### Cons
- Limited advanced features and optimization for large-scale sites
- Complex integration with modern frameworks like React/Vue
- Lack of advanced features like GraphQL data layer
- Limited enterprise-level large-scale development experience and case studies
- Build time may be inferior to other SSGs for large-scale sites
- Smaller community size compared to major SSGs
## Reference Pages
- [Eleventy Official Site](https://www.11ty.dev/)
- [Eleventy Documentation](https://www.11ty.dev/docs/)
- [Eleventy GitHub Repository](https://github.com/11ty/eleventy)
## Code Examples
### Installation and Project Creation
```bash
# Install Eleventy
npm install @11ty/eleventy
# Create new project
mkdir my-eleventy-site
cd my-eleventy-site
npm init -y
npm install @11ty/eleventy
# Start development server
npx @11ty/eleventy --serve
# Production build
npx @11ty/eleventy
# Build from specific directory
npx @11ty/eleventy --input=src --output=dist
```
### Basic Page Creation
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Eleventy Site</title>
</head>
<body>
<header>
<h1>Welcome to Eleventy Site</h1>
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<h2>Latest Blog Posts</h2>
<p>Built a simple and fast site with Eleventy.</p>
<section>
<h3>Features</h3>
<ul>
<li>Zero configuration to start immediately</li>
<li>Fast build processing</li>
<li>Flexible templates</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 My Eleventy Site</p>
</footer>
</body>
</html>
```
```markdown
---
title: About Page
layout: base.njk
permalink: /about/
---
# About Us
This site is built with Eleventy static site generator.
## Features
- **Simple**: No complex configuration required
- **Fast**: Optimized build process
- **Flexible**: Support for various templates
## Contact
Feel free to reach out if you have any questions.
```
### Data Files and Collections
```json
// _data/site.json
{
"title": "My Eleventy Site",
"description": "Fast and beautiful site built with Eleventy",
"author": "John Doe",
"url": "https://example.com",
"social": {
"twitter": "https://twitter.com/example",
"github": "https://github.com/example"
}
}
```
```javascript
// _data/posts.js
module.exports = [
{
title: "Building Sites with Eleventy",
slug: "getting-started-eleventy",
date: "2024-01-15",
excerpt: "Learn the basics of using Eleventy",
tags: ["tutorial", "eleventy", "ssg"]
},
{
title: "Benefits of Static Sites",
slug: "benefits-static-sites",
date: "2024-01-20",
excerpt: "About the advantages static sites bring",
tags: ["web", "performance", "ssg"]
},
{
title: "Using Eleventy Plugins",
slug: "eleventy-plugins",
date: "2024-01-25",
excerpt: "Extend your site with useful plugins",
tags: ["plugins", "eleventy", "development"]
}
];
```
### Templates and Layouts
```html
<!-- _includes/base.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - {{ site.title }}</title>
<meta name="description" content="{{ description or site.description }}">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<h1><a href="/">{{ site.title }}</a></h1>
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</nav>
</div>
</header>
<main class="main-content">
<div class="container">
{{ content | safe }}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2024 {{ site.author }}. All rights reserved.</p>
<div class="social-links">
<a href="{{ site.social.twitter }}">Twitter</a>
<a href="{{ site.social.github }}">GitHub</a>
</div>
</div>
</footer>
</body>
</html>
```
```html
<!-- blog/index.njk -->
---
title: Blog
layout: base.njk
permalink: /blog/
---
<h1>Blog Posts</h1>
<div class="blog-posts">
{% for post in posts %}
<article class="blog-post-card">
<header>
<h2><a href="/blog/{{ post.slug }}/">{{ post.title }}</a></h2>
<time datetime="{{ post.date }}">{{ post.date | date: "%B %d, %Y" }}</time>
</header>
<p>{{ post.excerpt }}</p>
<footer>
<div class="tags">
{% for tag in post.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
<a href="/blog/{{ post.slug }}/" class="read-more">Read more</a>
</footer>
</article>
{% endfor %}
</div>
<aside class="blog-sidebar">
<h3>Tags</h3>
<div class="tag-cloud">
{% for tag in collections.all | getAllTags | sort %}
<a href="/tags/{{ tag }}/" class="tag-link">{{ tag }}</a>
{% endfor %}
</div>
</aside>
```
### Filters and Shortcodes
```javascript
// .eleventy.js
module.exports = function(eleventyConfig) {
// Custom filters
eleventyConfig.addFilter("dateFormat", function(date, format) {
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(new Date(date));
});
eleventyConfig.addFilter("excerpt", function(content, limit = 150) {
const text = content.replace(/<[^>]*>/g, '');
return text.length > limit ? text.substring(0, limit) + '...' : text;
});
eleventyConfig.addFilter("getAllTags", function(collection) {
let tagSet = new Set();
collection.forEach(item => {
if (item.data.tags) {
item.data.tags.forEach(tag => tagSet.add(tag));
}
});
return [...tagSet];
});
// Shortcodes
eleventyConfig.addShortcode("currentYear", function() {
return new Date().getFullYear();
});
eleventyConfig.addShortcode("button", function(text, url, style = "primary") {
return `<a href="${url}" class="btn btn-${style}">${text}</a>`;
});
eleventyConfig.addPairedShortcode("callout", function(content, type = "info") {
return `<div class="callout callout-${type}">${content}</div>`;
});
// Collections
eleventyConfig.addCollection("featuredPosts", function(collectionApi) {
return collectionApi.getFilteredByTag("featured").reverse();
});
eleventyConfig.addCollection("postsByYear", function(collectionApi) {
const posts = collectionApi.getFilteredByTag("post");
const postsByYear = {};
posts.forEach(post => {
const year = new Date(post.data.date).getFullYear();
if (!postsByYear[year]) {
postsByYear[year] = [];
}
postsByYear[year].push(post);
});
return postsByYear;
});
return {
dir: {
input: "src",
output: "_site",
includes: "_includes",
data: "_data"
},
templateFormats: ["html", "md", "njk", "liquid"],
htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk"
};
};
```
### Configuration Customization
```javascript
// eleventy.config.js
import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import rssPlugin from "@11ty/eleventy-plugin-rss";
export default function(eleventyConfig) {
// Add plugins
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.addPlugin(syntaxHighlight);
eleventyConfig.addPlugin(rssPlugin);
// Copy static files
eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("src/js");
eleventyConfig.addPassthroughCopy("src/images");
eleventyConfig.addPassthroughCopy("src/favicon.ico");
// Watch targets
eleventyConfig.addWatchTarget("src/css/");
eleventyConfig.addWatchTarget("src/js/");
// Global data
eleventyConfig.addGlobalData("currentYear", () => new Date().getFullYear());
eleventyConfig.addGlobalData("buildTime", () => new Date().toISOString());
// Markdown library customization
eleventyConfig.amendLibrary("md", mdLib => {
mdLib.set({
html: true,
breaks: true,
linkify: true,
typographer: true
});
});
// Development server settings
eleventyConfig.setServerOptions({
port: 8080,
showAllHosts: true,
open: true,
notify: true
});
// Build settings
return {
dir: {
input: "src",
output: "_site",
includes: "_includes",
layouts: "_layouts",
data: "_data"
},
templateFormats: ["html", "md", "njk", "liquid", "js"],
htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk",
pathPrefix: process.env.NODE_ENV === 'production' ? '/my-site/' : '/'
};
};
```
```json
{
"scripts": {
"start": "eleventy --serve --port=8080",
"build": "eleventy",
"build:production": "NODE_ENV=production eleventy",
"clean": "rm -rf _site",
"debug": "eleventy --debug"
},
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@11ty/eleventy-plugin-rss": "^2.0.0"
}
}
```