Skip to content

Eleventy

Eleventy, a simpler static site generator.

Categories

Template engines

Plugins

List of Official Plugins

All official plugins live under the @11ty npm organization and plugin names will include the @11ty/ prefix.

  • Image: A utility to resize and generate images.
  • Fetch: A utility to fetch and cache network requests.
  • <is-land>: A plugin to smartly and efficiently load and initialize client-side components to your web site.
  • Render: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.
  • RSS: Generate an Atom feed to allow others to subscribe to your content using a feed reader.
  • Internationalization (i18n): Utilities to manage pages and linking between localized content on Eleventy projects.
  • Syntax Highlighting: Code syntax highlighting using PrismJS without client-side JavaScript.
  • Navigation: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
  • InputPath to URL: Maps an Eleventy input file path to its output URL.
  • HTML <base>: Emulate the <base> element by adding a prefix to all URLs in .html output files.
  • Directory Output: A plugin to group and sort console output by directory, with file size and benchmarks.
  • Inclusive Language: A plugin to check for inclusive language in markdown files.
  • Serverless: A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with On-demand Builders.
  • Edge: A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.

Community plugins

Features

  • Jekyll 대체제
  • 현재 폴더 구조를 그대로 이용
  • 다양한 템플릿 엔진 동시 지원 : HTML, 마크다운, JS, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug..
  • JS(Node.js)로 개발되었지만, JS 프레임워크는 아님(생성된 페이지에 별도 JS 포함할 필요 없음)

Quick Start

devDependencies로 설치한다: 

npm install @11ty/eleventy --save-dev

Create a Markdown file. 

echo '# Page header' > index.md

Eleventy requires Node.js 14 (expand to learn more). Run Eleventy. 

npx @11ty/eleventy

Eleventy compiles any files in the current directory matching valid file extensions (.md is one of many) to the output folder (_site by default). It might look like this: 

Writing _site/index.html from ./index.md (liquid)
Wrote 1 file in 0.03 seconds (v2.0.1)

Run 

npx @11ty/eleventy --serve

to start up a local development server and open http://localhost:8080/ in your web browser of choice to see your web site.

명령행 참조 

## 도움말
npx @11ty/eleventy --help

## 빌드:
npx @11ty/eleventy --input=. --output=_site

## 사용 포맷
npx @11ty/eleventy --formats=md,html,ejs

## 서버 실행
npx @11ty/eleventy --serve
npx @11ty/eleventy --serve --port=8081

## 왓치모드로 빌드
npx @11ty/eleventy --watch

## 샷다마우스
npx @11ty/eleventy --quiet

## 테스트
npx @11ty/eleventy --dryrun

## 설정파일 위치 변경
npx @11ty/eleventy --config=myeleventyconfig.js

## 출력포맷: Output a JSON structure (does not write to the file system)
npx @11ty/eleventy --to=json

## 출력포맷: Output a Newline Deliminated JSON structure (does not write to the file system)
npx @11ty/eleventy --to=ndjson

## 출력포맷: Default behavior (Output to file system)
npx @11ty/eleventy --to=fs

## 증분빌드: *Repeat* builds only operate on files that have changed
npx @11ty/eleventy --watch --incremental
npx @11ty/eleventy --serve --incremental

## 증분빌드: Skip the initial full build with `--ignore-initial`
npx @11ty/eleventy --serve --incremental --ignore-initial

## 초기 빌드 없이 실행
npx @11ty/eleventy --watch --ignore-initial
npx @11ty/eleventy --serve --ignore-initial
npx @11ty/eleventy --serve --incremental --ignore-initial

ESM 지원

Configuration

다음 구성 파일을 찾습니다.

발견된 첫 번째 구성 파일이 사용됩니다. 다른 것들은 무시됩니다.

  • markdownTemplateEngine - 마크다운 파일을 사전 처리하는 기본 전역 템플릿 엔진입니다. false일 경우 사전 처리를 방지하고 마크다운만 변환하는 데 사용합니다.
  • htmlTemplateEngine - HTML 파일을 전처리하는 기본 전역 템플릿 엔진입니다. false일 경우 전처리를 방지하고 콘텐츠를 통과하여 복사하는 데 사용합니다. (HTML은 변환되지 않으므로 기술적으로 일반 텍스트일 수 있음).

Transforms

URL 지원

{{ "/pages/two" | url }} 처럼 입력하면 된다. 설정에서 pathPrefix를 지정할 경우 자동으로 prefix 가 추가된다.

Minify HTML output

html-minifier와 #Transforms을 사용하면 된다.

Working with Templates

Template 란
Eleventy가 구축된 사이트에서 페이지(또는 여러 페이지)로 변환하는 Markdown, HTML, Liquid, Nunjucks 등과 같은 형식 으로 작성된 콘텐츠 파일입니다.
템플릿은 템플릿 구문을 사용하여 데이터 계단식을 통해 노출된 데이터 에 액세스할 수 있습니다 .

Add CSS, JS, Fonts

Add assets to your Eleventy project.

Layouts

Eleventy:Layouts 항목 참조

Wrap content in other content.

Layout Chaining

Wrap layouts in other layouts.

Collections

흥미로운 방식으로 콘텐츠를 그룹화하고, 재사용하고, 정렬합니다.

Create Pages From Data

데이터 세트를 반복하고 여러 출력 파일을 만듭니다.

Pagination

데이터 세트를 반복하고 단일 템플릿에서 여러 파일을 만듭니다.

Pagination Navigation

페이지 매김 템플릿에서 페이지가 매겨진 모든 페이지에 대한 링크 목록을 만듭니다.

Content Dates

머리말의 날짜를 사용하여 콘텐츠에 날짜를 지정합니다.

템플릿을 새 출력 위치로 다시 매핑(또는 파일 쓰기 방지)

Internationalization (i18n)

현지화된 다국어 콘텐츠를 가장 잘 전달하는 방법.

Common Pitfalls

사람들이 겪는 몇 가지 일반적인 문제입니다.

Using Data

Data 란
템플릿 구문을 사용하여 템플릿 및 레이아웃 내에서 사용할 수 있는 변수를 통해 노출됩니다.
특정 템플릿의 데이터는 데이터 계단식 이라는 프로세스를 통해 집계됩니다.

Configure your Templates

템플릿 작동 방식을 제어하기 위해 데이터에 할당할 수 있는 몇 가지 특수 데이터 키가 있습니다. 이는 데이터 캐스케이드의 어느 곳에나 존재할 수 있습니다.

  • permalink - 현재 템플릿의 출력 대상을 변경합니다. 일반적으로 템플릿 구문을 사용하여 데이터의 다른 변수를 참조할 수는 없지만 permalink는 예외입니다. #Permalinks 항목 참조.
  • layout - 현재 템플릿을 _includes 폴더에 있는 레이아웃 템플릿으로 래핑합니다. #Layouts 항목 참조.
  • pagination - 데이터를 반복할 수 있습니다. 단일 템플릿에서 여러 HTML 파일을 출력합니다.
  • tags - 콘텐츠가 컬렉션의 일부임을 식별하는 단일 문자열 또는 배열입니다. 컬렉션은 다른 템플릿에서 재사용할 수 있습니다.
  • date - 컬렉션에서 파일이 정렬되는 방식을 사용자 정의하려면 기본 날짜(파일 생성)를 재정의합니다.
  • templateEngineOverride - 파일별로 템플릿 엔진을 재정의합니다. 이 옵션은 Front Matter ⚠️(현재)에서만 작동합니다. Issue #445를 읽어보세요.
  • eleventyExcludeFromCollections - 모든 컬렉션 (구성 API를 사용하여 데이터 또는 설정에 태그가 지정된 컬렉션)에서 이 콘텐츠를 제외하려면 true로 설정합니다.
  • eleventyComputed - 데이터 계단식의 다른 값을 기반으로 프로그래밍 방식으로 데이터 값을 설정합니다.
  • eleventyNavigation - 탐색 플러그인 에서 사용됩니다.

Advanced:

  • eleventyImport.collections - v2.0.0에 추가됨증분 빌드에 대한 템플릿 종속성을 알리고 올바른 순서로 템플릿을 렌더링하는 데 사용되는 컬렉션 이름 배열입니다.
  • dynamicPermalink - 키에 대한 템플릿 구문을 비활성화하는 옵션입니다 permalink.
  • permalinkBypassOutputDir - 출력 디렉터리가 아닌 다른 곳에 파일을 씁니다.

Eleventy Supplied Data

Data Cascade

특정 템플릿 의 모든 데이터를 평가 하고 발생하는 충돌을 해결하기 위한 Eleventy의 작업 순서입니다.

데이터 캐스케이드는 코로케이션 원칙을 따르므로 많은 템플릿에 적용하기 위해 광범위하게 정의된 데이터는 특정 템플릿을 보다 구체적으로 대상으로 하는 데이터에 의해 무시됩니다.

  • Front Matter Data
  • Template & Directory Data Files
  • Global Data Files
  • Data Deep Merge
  • Config Global Data
  • Computed Data

Environment Variables

JavaScript Data Files

Custom Data File Formats

Themes

Vite example

Tailwind example

daisyUI 예제 참고함.

tailwind.config.js 

module.exports = {
  content: ['./src/**/*.{njk,md}'],
  plugins: [require('daisyui'), require('@tailwindcss/typography')],
};

package.json 

{
  "name": "11ty-starter",
  "version": "0.0.0",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "eleventy"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.0",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.2",
    "daisyui": "^2.6.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23",
    "vite": "^2.8.6"
  }
}

.eleventy.js 

const postcss = require('postcss');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksAsyncFilter('postcss', (cssCode, done) => {
    postcss([tailwindcss(require('./tailwind.config.js')), autoprefixer()])
      .process(cssCode)
      .then(
        (r) => done(null, r.css),
        (e) => done(e, null)
      );
  });
  eleventyConfig.addWatchTarget('styles/**/*.css');
  return {
    dir: {
      input: 'src',
      output: 'dist',
    },
  };
};

./src/_includes/layouts/default.njk 

---
title: My Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    {% set css %}
    {% include "src/styles/index.css" %}
    {% endset %}
    <style>
      {{css | postcss | safe}}
    </style>
  </head>
  <body class="prose">
    {{ content | safe }}
  </body>
</html>

./src/styles/index.css 

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/index.md 

---
layout: layouts/default.njk
---

# Markdown heading

## Markdown heading

### Markdown heading

<div class="not-prose">
  <button class="btn">Hello 11ty</button>
</div>

Web template engine

해당 항목 참조.

11ty with Nunjucks

Troubleshooting

require() of ES Module .../eleventy.config.js from .../node_modules/@11ty/eleventy/src/Util/Require.js not supported 

[11ty] Eleventy CLI Fatal Error: (more in DEBUG output)
[11ty] 1. Error in your Eleventy config file 'eleventy.config.js'. (via EleventyConfigError)
[11ty] 2. require() of ES Module /home/yourname/Project/yourid-ui/eleventy.config.js from /home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
[11ty] eleventy.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
[11ty] Instead rename eleventy.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/yourname/Project/yourid-ui/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). (via Error)
[11ty]
[11ty] Original error stack trace: Error [ERR_REQUIRE_ESM]: require() of ES Module /home/yourname/Project/yourid-ui/eleventy.config.js from /home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
[11ty] eleventy.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
[11ty] Instead rename eleventy.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/yourname/Project/yourid-ui/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
[11ty]
[11ty]     at requireLocal (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js:6:10)
[11ty]     at TemplateConfig.requireLocalConfigFile (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:287:23)
[11ty]     at TemplateConfig.mergeConfig (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:334:28)
[11ty]     at TemplateConfig.getConfig (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:159:26)
[11ty]     at new Eleventy (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Eleventy.js:109:39)
[11ty]     at Object.<anonymous> (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/cmd.js:60:16)

로그에 내용에 나와있다. package.json의 "type": "module" 필드로 인해 ES module로 해석한다. CommonJS로 읽기 원한다면 확장자를 .cjs로 바꿔달라는 내용.

이넘 때문에 문제가 스노우볼 굴리기 된다...

  1. 근데 2023-03-15 현재, 아직도 11ty에 이 문제가 해결되지 않은듯
  2. 설정파일을 강제로 CommonJS로 읽도록 eleventy.config.cjs 설정파일명 변경.
  3. tailwind 쓰고 있는데 설정파일이 UMD로 되어 있어서 안심했더니 안읽힌다. -_- 줵일
  4. 그래서 tailwind.config.js를 CommonJS 스타일로 변경하여 required 했다. (import() 를 사용하니 플러그인이 안읽히더라 -> 플러그인 함수는 async 함수가 아니라 await 불가)
  5. vite를 사용하고 있는데 이넘은 ES Module을 사용한다. -> package.json에 type: module 을 쓰고 있어서 이걸 지우고 vite.config.mts 로 확장자 변경. 해당 이슈 참고

이놈의 11ty 의 @11ty/eleventy/src/Util/Require.js가 CommonJS를 읽는 과정에서 require() 함수만 읽어들이는듯하다.

esm 사용한 외도

#836 에서 node -r esm node_modules/.bin/eleventy 로 작동하게 할 수 있다는데... 11ty에서 공식적으로 제공하는 방법은 아닌듯...

.esmrc.json 

{
  "cjs": {
    "dedefault": true
  }
}

플러그인에서 적용할 수 있는 방법

이를 기다리는 동안 누군가 ESM 전용 종속성을 가져오는 데 어려움을 겪고 있다면 다음을 수행할 수 있습니다. 

module.exports = function(eleventyConfig) {
  let esmDep;

  eleventyConfig.on('eleventy.before', async ({}) => {
    esmDep = await import('esm/dep/name');
  });

  // you can use esmDep here
};

pull request 3074 에서 병합된듯 ... v3.0.0 부터 사용 가능할듯

List of Static Site Generator

See also

Favorite site

References

  1. Manage_your_SVG_files_with_Eleventy_Render_plugin_-_chriskirknielsen.pdf ↩