12周年記念パーティ開催! 2024/5/10(金) 19:00

静的サイトジェネレーターEleventy

全8回

シンプルな静的サイトジェネレーター、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の使い方を解説します。まずはほかの静的サイトジェネレーターとどう違うのか、その特徴を整理します。