11ty を使ってみた

11ty とは

https://www.11ty.dev/

シンプルな

静的サイトジェネレータ

対抗馬としては

  • Gatsby

  • Next.js

  • Nuxt.js

  • VuePress

etc...

さまざまな

テンプレートエンジンを使える

  • HTML

  • Markdown

  • JavaScript

  • Liquid

  • Haml

  • Nunjucks

  • Handlebars

  • Mustache

  • EJS

  • Pug

その他の特徴

  • 複数のテンプレートエンジンを
    組み合わせられる

  • Front Matter を使えるテンプレート

  • タグ付によるコレクション

  • ページネーションによるコレクションの
    部分取得

  • グローバルデータファイル

  • ある程度のプラグイン

  • クリーンな HTML の出力

etc...

DEMO

https://github.com/syuji-higa/demo-11ty​

# package.json の追加
$ npm init -y

# 11ty のインストール
$ npm install --save-dev @11ty/eleventy

インストール

---
title: タイトル
---
<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

テンプレートの用意

---
layout: layout.njk
title: 11tyのデモ
---
# {{ title }}

サンプルとテキストだよ。

- その1
- その2
- その3

テンプレートの使用

# ビルド
$ npx @11ty/eleventy

# 開発サーバ起動
$ npx @11ty/eleventy --serve

ビルド

感想

  • デフォルトであれば設定なしで動くので簡単

  • 複雑なことをするなら各テンプレートエンジンの機能をつかう必要がある

  • Babel と SASS のプラグインがあるので基本的なビルド環境をつくるだけなら簡単

  • 開発者ブログやドキュメントを作るのであればひとつの選択肢としてありかも

  • 出力後に JS による余計な記述がないのでレガシーな HTML を納品する形式にはあっている（二度とやりたくない）

今後つかうかは...

わかりません

END

Made with Slides.com