11ty を使ってみた
11ty とは
シンプルな
静的サイトジェネレータ
対抗馬としては
-
Gatsby
-
Next.js
-
Nuxt.js
-
VuePress
etc...
さまざまな
テンプレートエンジンを使える
-
HTML
-
Markdown
-
JavaScript
-
Liquid
-
Haml
-
Nunjucks
-
Handlebars
-
Mustache
-
EJS
-
Pug
その他の特徴
-
複数のテンプレートエンジンを
組み合わせられる -
Front Matter を使えるテンプレート
-
タグ付によるコレクション
-
ページネーションによるコレクションの
部分取得 -
グローバルデータファイル
-
ある程度のプラグイン
-
クリーンな HTML の出力
etc...
DEMO
# 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
11ty を使ってみた
By Syuji Higa
11ty を使ってみた
- 199