🌟

Eleventy1.0という選択肢

commits2 min read

この記事は takanorip Advent Calendar 2021 9日目の記事です。

これは2021年12月09日に行われたジャムジャム!!Jamstack_3の登壇資料です。

自己紹介

Eleventyとは?

Eleventy, a simpler static site generator.
公式ドキュメントより

Eleventyは非常にシンプルな静的サイトジェネレーターです。

2021年10月、ついに 1.0-beta が公開されました!🎉

https://www.11ty.dev/blog/eleventy-v1-beta/

特徴

  • ReactやVue.jsなどに依存していないのでシンプルで扱いやすい
  • ビルド後の成果物が非常にシンプル(JSがほぼ動作しないHTMLが作られる)
  • 機能が充実している
    • 柔軟な設定
    • ページのパーツやレイアウトの管理
    • Dataの注入
  • プラグインが充実している
  • 様々なテンプレート言語を扱える(公式はNunjucks推し)
    • HTML *.html
    • Markdown *.md
    • JavaScript *.11ty.js
    • Liquid *.liquid
    • Nunjucks *.njk
    • Handlebars *.hbs
    • Mustache *.mustache
    • EJS *.ejs
    • Haml *.haml
    • Pug *.pug

1.0Custom 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を動作させるためのプラグインがリリースされました。
ドキュメントにデモがあるので、それを見てもらうとわかりやすいと思います。

https://www.11ty.dev/docs/plugins/serverless/

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はいいぞ

みなさんもどんどん使っていきましょう!

GitHubで編集を提案

Discussion

ログインするとコメントできます