🌟
Eleventy1.0という選択肢
自己紹介
- 大木尊紀 / Takanori Oki / @takanorip
- 無職（UI designer, Frontend web developer）
- https://blog.takanorip.com/
Eleventyとは？
Eleventy, a simpler static site generator.
公式ドキュメントより
Eleventyは非常にシンプルな静的サイトジェネレーターです。
2021年10月、ついに 1.0-beta が公開されました！🎉
特徴
- ReactやVue.jsなどに依存していないのでシンプルで扱いやすい
- ビルド後の成果物が非常にシンプル（JSがほぼ動作しないHTMLが作られる）
- 機能が充実している
- 柔軟な設定
- ページのパーツやレイアウトの管理
- Dataの注入
- プラグインが充実している
- https://www.11ty.dev/docs/plugins/
- 自分で作るのもけっこう簡単
- 様々なテンプレート言語を扱える（公式はNunjucks推し）
- HTML
*.html - Markdown
*.md - JavaScript
*.11ty.js - Liquid
*.liquid - Nunjucks
*.njk - Handlebars
*.hbs - Mustache
*.mustache - EJS
*.ejs - Haml
*.haml - Pug
*.pug
- HTML
1.0で Custom File Extension Handlers という機能が追加され、上記以外のテンプレート言語もプラグインを利用すればEleventy内で利用できるようになる可能性があります。
Eleventyのデメリット
- TypeScriptでの開発に対応してない
-
.eleventy.jsでTS使いたい気持わかる
-
- 利用するテンプレートによっては対応していないプラグインがある
- 慣れが必要
Eleventy1.0で追加されたもの
- Eleventy Serverless
-
0.xから1.xにアップグレードするためのプラグイン - Custom File Extension Handlers
- Data Deep Merge feature by default
Eleventy Serverless
サーバーレス環境でのSSR（例：CMSでのプレビュー）やNetlifyのOn-demand Builders上でEleventyを動作させるためのプラグインがリリースされました。
ドキュメントにデモがあるので、それを見てもらうとわかりやすいと思います。
On-demand Buildersとは、巨大なウェブサイトのビルド時間を短縮するための機能です。
デプロイ時に全てのコンテンツをビルドするのではなく、一部コンテンツを初めてリクエストされたタイミングでビルドすることでデプロイ時のビルド時間を短縮するアプローチをとっています。
Custom File Extension Handlers
利用者が独自拡張子のテンプレートを扱うことができる設定が追加されました。
プラグインを書くことで.vueや.jsxをEleventy内で扱えるようになります。
GitHubのIssue: https://github.com/11ty/eleventy/issues/117
データのディープマージのデフォルト化
レイアウトで設定している値と、そのレイアウトが使用されているマークダウンファイルで設定されている値が異なる場合、値がマージされる機能がデフォルトでONになりました。
my-template.md
---
title: This is a Good Blog Post
tags:
- CSS
- HTML
layout: my-layout.njk
eleventyNavigation:
key: my-key
---
_includes/my-layout.njk
---
title: This is a Very Good Blog Post
author: Zach
tags:
- JavaScript
eleventyNavigation:
parent: test
---
{
"title": "This is a Good Blog Post",
"author": "Zach",
"tags": [
"CSS",
"HTML",
"JavaScript"
],
"eleventyNavigation": {
"key": "my-key",
"parent": "test"
}
}
Eleventyはいいぞ
みなさんもどんどん使っていきましょう！
Discussion