はじめに

今回は、前回の Eleventy v3 への変更点を踏まえ、実際に現在構築中のブログサイトの変更を行っていきたいと思います。

現状、タグ機能の追加までしか、完了していない為、それほど多くの修正が必要ないというのが、現実です。

対照となるのは、下記の 3 つの定義です。

  • Node.js 定義
  • Eleventy 定義
  • タグ読み替え定義

Node.js 定義の変更点

  • "type" 定義を CommonJS から ESM に変更

package.json ファイル内の commonjs 👉 module

Eleventy 定義の変更点

  • export 方法を CommonJS から ESM 変更

.eleventy.js ファイル内の module.exports = 👉 export default

タグ読み替え定義の変更点

  • export 方法を CommonJS から ESM 変更

.eleventy.js ファイル内の module.exports = 👉 export default

それでは、以前作成したブログサイトを実際にカスタマイズし、v3 への対応を行っていきます。

Eleventy v3 への対応（実践）

今回、修正するフォルダーとファイルは下記の通りです。

👉 前々回までのブログサイト構築の実践で作成したプロジェクトを引き続き使用していきます。

C:\users\test\blog-dev
│  .eleventy.js               → 今回編集する Eleventy 定義
│  package-lock.json
│  package.json               → 今回編集する Node.js 定義
│  
├─node_modules
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      (以降省略)
│              
├─src
│  │  index.njk 
│  │  posts.njk
│  │  style.css
│  │  tags.njk
│  │  
│  ├─posts
│  │      hello.md
│  │      second.md
│  │      
│  ├─tags
│  │      index.njk
│  │      
│  ├─_data
│  │      tagDefine.js       → 今回編集するタグ読み替え定義
│  │      
│  └─_includes
│          layout.njk
│          
└─_site
    │  index.html
    │  style.css
    │  
    └─posts
        │  index.html
        │  
        ├─hello
        │      index.html
        │      
        └─second
                index.html

Eleventy v3 への対応手順

下記の手順に従って、説明していきます。

  1. ターミナル起動
  2. Node.js 定義の編集
  3. Eleventy 定義の編集
  4. タグ読み替え定義の編集
  5. Eleventy の起動
  6. ブラウザによる表示確認

1. ターミナル起動

Windows の場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

  • スタートボタンを右クリック
  • 「ターミナル」をクリック

👉 これからの作業はすべて起動された「ターミナル」のウインドウに入力します

2. Node.js 定義の編集

プロジェクトのフォルダー(例：C:\Users\test\blog-dev)に移動し、 Node.js 定義を編集します。

👉 ここでは、Windows 標準の「メモ帳」アプリを使用します。

以下を入力：

cd C:\Users\test\blog-dev
notepad package.json

メモ帳で開かれた、package.json ファイルの "type" 定義を commonjs から module に変更して保存：

{
  "name": "blog-dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "devDependencies": {
    "@11ty/eleventy": "^3.1.5"
  }
}

3. Eleventy 定義の編集

同じく、プロジェクトのフォルダー(例：C:\Users\test\blog-dev)内の Eleventy 定義を編集します。

👉 ここでは、Windows 標準の「メモ帳」アプリを使用します。

以下を入力：

notepad .eleventy.js

メモ帳で開かれた、.eleventy.js ファイルの "type" 定義を module.exports = から export default に変更して保存：

export default function (eleventyConfig) {

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

  eleventyConfig.addCollection("tagList", function (collectionApi) {
    let tagSet = new Set();
    collectionApi.getAll().forEach(item => {
      if ("tags" in item.data) {
        let tags = item.data.tags;
        if (typeof tags === "string") tags = [tags];
        tags = tags.filter(tag => !["all", "nav", "post", "posts"].includes(tag));
        for (const tag of tags) tagSet.add(tag);
      }
    });
    return [...tagSet];
  });

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

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

4. タグ読み替え定義の編集

ソースのデータフォルダー(例：C:\Users\test\blog-dev\src\_data)に移動し、タグ読み替え定義を編集します。

👉 ここでは、Windows 標準の「メモ帳」アプリを使用します。

以下を入力：

cd C:\Users\test\blog-dev\src\_data
notepad tagDefine.js

メモ帳で開かれた、tagDefine.js ファイルの "type" 定義を module.exports = から export default に変更して保存：

export default {
  "はじめて": {
    yomi: "hajimete"
  },
  "２回目": {
    yomi: "2-kaime"
  },
  "JavaScript": {
    yomi: "javascript"
  },
};

5. Eleventy の起動

プロジェクトのフォルダー（例：C:\Users\test\blog-dev）に移動し、古い _site フォルダーを削除後、Eleventy を起動します。

以下を入力：

cd ../../
rmdir _site -Recurse
npx eleventy --serve

👉 HTMLファイルが作成され、テスト用のサーバーが起動されます。

6. ブラウザによる表示確認

ブラウザ（Edge または Chrome）を起動し、下記URLにアクセスします。

http://localhost:8080/

先頭ページが表示され、従来と同様に稼働することが、確認できると思います。

今回編集したサイトのフォルダーとファイル構成

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

C:\users\test\blog-dev
│  .eleventy.js              → 今回編集したEleventy定義
│  package-lock.json
│  package.json              → 今回編集したNode.js定義
│  
├─node_modules
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      (以降省略)
│              
├─src
│  │  index.njk
│  │  posts.njk
│  │  style.css
│  │  tags.njk
│  │  
│  ├─posts
│  │      hello.md
│  │      second.md
│  │      
│  ├─tags
│  │      index.njk
│  │      
│  ├─_data
│  │      tagDefine.js      → 今回編集したタグ読み替え定義
│  │      
│  └─_includes
│          layout.njk
│          
└─_site
    │  index.html        　　→ Eleventyにより再作成されたトップページ
    │  style.css
    │  
    ├─posts
    │  │  index.html        → Eleventyにより再作成された投稿記事一覧ページ
    │  │  
    │  ├─hello
    │  │      index.html    → Eleventyにより再作成された投稿記事ページ
    │  │      
    │  └─second
    │          index.html    → Eleventyにより再作成された投稿記事ページ
    │          
    └─tags
        │  index.html        → Eleventyにより再作成された全タグ一覧ページ
        │  
        ├─2-kaime
        │      index.html    → Eleventyにより再作成されたタグ毎の記事一覧ページ
        │      
        ├─hajimete
        │      index.html    → Eleventyにより再作成されたタグ毎の記事一覧ページ
        │      
        └─javascript
                index.html    → Eleventyにより再作成されたタグ毎の記事一覧ページ

まとめ

  • Eleventy v3 への対応は、それほど難しくない。
  • 基本、書き換えが必要なのは、下記の3点
    • package.json での　"type" = "commonjs" から　"type" = "module" への変更　もしくは、追加
    • require から　import への変更
    • module.exports = から　export default への変更