静的サイトジェネレーターEleventy
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
シンプルな静的サイトジェネレーター、Eleventyを紹介します。単純な静的サイトを生成する場合には特に便利で、JAMstack構成での動的なサイトを生成するのにも使われます。
第8回 EleventyでCSSを扱う
Eleventyは主にHTMLを生成するツールです。しかし、実際のウェブサイト作成ではHTMLと合わせてCSSも必要でしょう。今回は、EleventyでCSSを扱う方法を紹介します。
第7回 ページ一覧を作成するコレクションデータ
何らかのルールに基づいて整理されたページ群を見やすく一覧したい場合に利用できる、「コレクション」について解説します。Eleventyで生成するページの一覧を配列データとして提供する機能です。
第6回 提供される日時データと表示方法
ページに関するデータとして提供される、日時を扱う方法を中心に紹介します。独自に設定するフィルタや日付処理ライブラリと合わせることで、柔軟に出力できます。
第5回 配列データからの複数ページの生成
Eleventyではデータを柔軟に扱うことができますが、そうなるとデータをもとに複数ページ作成したくなります。そんな場合に利用できる、配列データから複数のページを生成する方法を紹介します。
第4回 データファイルとそのルール
Eleventyでは、ソースとなるデータは、front-matter以外にデータファイルと呼ばれるものがあります。今回はこのデータファイルと、それぞれのルールについて解説します。
第3回 テンプレートとfront-matter
Nunjucksを利用してfront-matterで指定した変数を出力する仕組みを見ていきます。layoutでの指定と組み合わせ、柔軟に変数を出力できる様子を見てみましょう。
第2回 複数ファイルの変換とルールの変更
Eleventyで複数のファイルからHTMLに変換する方法と、入力ディレクトリと出力ディレクトリの変換ルールを解説します。Eleventyの設定を使うと、柔軟に自分の用途に合わせた設定ができます。
第1回 Eleventyとその特徴
ビルドにより静的サイトを生成するツール、Eleventyの使い方を解説します。まずはほかの静的サイトジェネレーターとどう違うのか、その特徴を整理します。