ここで、改めてEleventyについて述べたいと思います。

Eleventy（公式サイト）は、開発者のZach Leatherman（ザック・レザーマン）さんが中心になって作成されたもので、2018年にリリースされました。

JavaScript開発者にとって親しみやすいツールを作ることを目的として開発がすすめられています。

開発者が自由に構成を変えられるようにすること、HTMLやMarkdownを中心に据えてシンプルなブログやドキュメントサイトに合うようにすること、出力されるHTMLは軽量であること等、たくさんのこだわりが詰め込まれています。

そのおかげで、とても使いやすく、アクセシビリティやパフォーマンスを大事にする開発者たちに支持されています。（Google Chrome Developers Blog もEleventyで作られているらしいです。）

導入も簡単で、Node.jsが導入されている環境下であれば、プロジェクトのフォルダーを作成し、下記のコマンドを実行するだけで、使い始めることが可能です。

npm install @11ty/eleventy --save-dev

以降では、下記の11工程の手順を追って、Windows11環境下のもと、サイトのひな形を実際に構築していきたいと思います。
なお、前提としてNode.jpが既に導入済みであることとします。

  1. ターミナル起動
  2. サイト用フォルダー作成
  3. Node.jsによる初期化
  4. Eleventyの導入
  5. ソースフォルダーの作成
  6. ひな形頁の作成
  7. 頁構成の作成
  8. 頁デザインの作成
  9. Eleventy定義作成
  10. Eleventyの起動
  11. プラウザによる表示確認

1. ターミナル起動

タスクバーのウインドウアイコンを右クリック後、表示されたメニューバーから「ターミナル」を選択する。
以降、「10.Eleventyの起動」まで、この起動された「ターミナル」のウインドウ内へのコマンド入力となります。

2. サイト用フォルダー作成

まずは、サイト用フォルダーを用意します。場所は任意の場所でかまいませんが、今回は、自分のホームフォルダー(C:\Users\test)の配下に”blog-dev”というフォルダーを作成し、そこにサイトを構築していくことにします。

ターミナルにて、下記のコマンドで、サイト用フォルダーを作成し、作成したフォルダーに移動します。

mkdir blog-dev
cd blog-dev

3. Node.jsによる初期化

下記のコマンドで、サイト用フォルダーを初期化し、node_modulesをインストールします。

npm init -y

4. Eleventyの導入

下記のコマンドで、サイト用フォルダーにEleventyをインストールします。

npm install @11ty/eleventy --save-dev

5. ソースフォルダーの作成

サイト用フォルダーの配下にソース用のフォルダーを作成します。名前は、”src”とします。
下記のコマンドで、ソースフォルダーを作成し、作成したフォルダーに移動します。

mkdir src
cd src

6. ひな形頁の作成

サイトの投稿記事一覧となる、Markdownの”posts.md”ファイルを作成します。ここでは、下記のコマンドで、「メモ帳」アプリを起動して、作成します。

notepad posts.md

「メモ帳」アプリが立ち上がったら、下記内容を打ち込み、メニューの「ファイル」から「保存」を選択します。

---
title: 記事一覧
layout: layout.njk
---

<h1>記事一覧</h1>

<ul>
  {% for post in collections.posts | reverse %}
    <li>
      <a href="{{ post.url }}">{{ post.data.title }}</a>
    </li>
  {% endfor %}
</ul>

サイトの投稿記事を保存するフォルダーを”posts”という名前で作成し、そのフォルダーに移動します。

mkdir posts
cd posts

投稿記事となる、Markdownの”hello.md”ファイルを作成します。ここでは、下記のコマンドで、「メモ帳」アプリを起動して、作成します。

notepad hello.md

「メモ帳」アプリが立ち上がったら、下記内容を打ち込み、メニューの「ファイル」から「保存」を選択します。

---
title: はじめての投稿
date: 2024-04-01
layout: layout.njk
---

こんにちは！これは最初の投稿です。

7. 頁構成の作成

一度ソースディレクトリ”src”直下に戻り、サイトの構成を保存するフォルダーをソースディレクトリーの配下に”_includes”という名前で作成後、そのフォルダーに移動します。

cd ..
mkdir _includes
cd _includes

頁構成となる、Nunjucksの”layout.njk”ファイルを作成します。ここでは、下記のコマンドで、「メモ帳」アプリを起動して、作成します。

notepad layout.njk

「メモ帳」アプリが立ち上がったら、下記内容を打ち込み、メニューの「ファイル」から「保存」を選択します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

8. 頁デザインの作成

再びソースディレクトリ”src”直下に戻り、下記のコマンドで、頁デザインファイルを作成します。

cd ..
notepad style.css

「メモ帳」アプリが立ち上がったら、下記内容を打ち込み、メニューの「ファイル」から「保存」を選択します。

body {
  font-family: sans-serif;
  padding: 2rem;
  background-color: #f5f5f5;
}

9. Eleventy定義作成

サイト用フォルダー”blog-dev”に戻り、下記のコマンドで、頁デザインファイルを作成します。

cd ..
notepad .eleventy.js

「メモ帳」アプリが立ち上がったら、下記内容を打ち込み、メニューの「ファイル」から「保存」を選択します。

module.exports = function (eleventyConfig) {

  eleventyConfig.addCollection("posts", function (collectionApi) {
    return collectionApi.getFilteredByGlob("src/posts/*.md");
  });

  eleventyConfig.addPassthroughCopy("src/style.css");

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes"
    },
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk"
  };
};

10. Eleventyの起動

ここまでの作業で下記のようなディレクトリ構成とファイルが作成されます。

C:\users\test\blog-dev
│  .eleventy.js
│  package-lock.json
│  package.json
│
├─node_modules
│
└─src
    │  posts.md
    │  style.css
    │
    ├─posts
    │      hello.md
    │
    └─_includes
            layout.njk

サイト用フォルダーの直下に戻り、下記のコマンドで、Eleventyを起動します。ひな形をもとに、HTMLファイルが作成され、テスト用のサーバーが起動されます。

npx eleventy --serve

11. プラウザによる表示確認

ブラウザを起動し、下記URLにアクセスします。

http://localhost:8080/posts/

投稿記事の一覧が表示され、クリックすると投稿記事が表示されるのが、確認できると思います。