前回からのつづき

前回までの作業で、投稿記事ページの作成が完了しました。

今回は、そのつづきからになります。

11. レイアウト用テンプレートの作成

11-1. レイアウト用テンプレート格納フォルダーの作成

”src”フォルダーに戻り、名前は、”_includes”で作成します。

以下を入力：

cd ..
mkdir _includes

作成したフォルダーに移動します。

以下を入力：

cd _includes

11-2. レイアウト用テンプレートの作成

投稿記事一覧ページや投稿記事ページで指定した、レイアウト用テンプレートを作成します。名前は、Eleventy定義”.eleventy.js”で定義した”layout.njk”で作成します。

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

以下を入力：

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>

Nunjucks構文を利用してHTMLで作成しています。

👉 Eleventy実行により、各ページ毎に、下記項目が差し込まれて、HTMLファイルが作成されます。

  • {{ title }}：各ページの設定（フロントマター）のtitleに定義した文字列
  • {{ content | safe }}：各ページの本文

👉 safeフィルターとは？

safe フィルターは「HTML エスケープを無効化し、そのまま生の HTML として出力する」ための仕組みです。 Eleventy では レイアウト用エンプレートの出力で、必ず使用されます。理由は、Markdown を HTML に変換した結果をNunjucksエンジンが自動エスケープしないようにする為です。

12. Eleventyの起動

サイト用フォルダー”blog-dev”に戻り、Eleventyを起動します。

以下を入力：

cd ../../
npx eleventy --serve

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

テスト用サーバーは、一度起動されると終了するまで、入力用フォルダー”src”配下のファイルの変更を監視し、変更の書き込みを検知すると、自動で出力用フォルダーの再作成を行ってくれます。 ただし、入力用フォルダー”src”以外のファイルを変更した場合は、再起動が必要になります。

テスト用サーバーの停止は、Ctrl＋ｃキーで表示されるメッセージに”ｙ”を入力するか、ターミナルの終了で行えます。

            :
PS C:\Users\test\blog-dev> npx eleventy --serve
[11ty] Writing ./_site/index.html from ./src/index.njk
[11ty] Writing ./_site/posts/hello/index.html from ./src/posts/hello.md (njk)
[11ty] Writing ./_site/posts/second/index.html from ./src/posts/second.md (njk)
[11ty] Writing ./_site/posts/index.html from ./src/posts.njk
[11ty] Copied 1 Wrote 4 files in 2.45 seconds (612.7ms each, v3.1.5)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
バッチ ジョブを終了しますか (Y/N)? y
PS C:\Users\test\blog-dev>

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

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

http://localhost:8080/

先頭ページが表示され、今回作成したブログサイトの動作を確認できると思います。

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

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

C:\users\test\blog-dev
│  .eleventy.js               → 今回作成したルール
│  package-lock.json          → Node.jsのファイル
│  package.json               → Node.jsのファイル
│  
├─node_modules               → Node.jsのフォルダー
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      (以降省略)
│ 
├─src
│  │  index.njk              → 今回作成した先頭ページ
│  │  posts.njk              → 今回作成した記事一覧ページ
│  │  style.css              → 今回作成したスタイルシート
│  │  
│  ├─posts
│  │      hello.md           → 今回作成した最初の記事データ
│  │      second.md          → 今回作成した２つ目の記事データ
│  │      
│  └─_includes
│          layout.njk         → 今回作成したレイアウト用テンプレート
│          
└─_site                      → Eleventyにより作成された出力用フォルダー
    │  index.html             → Eleventyにより作成された先頭ページ
    │  style.css              → Eleventyによりコピーされたスタイルシート
    │  
    └─posts
        │  index.html         → Eleventyにより作成された投稿一覧ページ
        │  
        ├─hello
        │      index.html     → Eleventyにより作成された投稿記事ページ
        │      
        └─second
                index.html     → Eleventyにより作成された投稿記事ページ

👉 ”_site”以下のフォルダーとファイルはEleventy実行時に作成されます。

コマンド実行ログ

下記は、今回説明で使用したコマンドの実行ログです。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

PS C:\Users\test> mkdir blog-dev


    ディレクトリ: C:\Users\test


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2026/04/27     22:50                blog-dev


PS C:\Users\test> cd blog-dev
PS C:\Users\test\blog-dev> npm init -y
Wrote to C:\Users\test\blog-dev\package.json:

{
  "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": "commonjs"
}


PS C:\Users\test\blog-dev> npm install @11ty/eleventy --save-dev

added 129 packages, and audited 130 packages in 11s

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Users\test\blog-dev> notepad .eleventy.js
PS C:\Users\test\blog-dev> mkdir src


    ディレクトリ: C:\Users\test\blog-dev


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2026/04/27     22:52                src


PS C:\Users\test\blog-dev> cd src
PS C:\Users\test\blog-dev\src> notepad index.njk
PS C:\Users\test\blog-dev\src> notepad posts.njk
PS C:\Users\test\blog-dev\src> notepad style.css
PS C:\Users\test\blog-dev\src> mkdir posts


    ディレクトリ: C:\Users\test\blog-dev\src


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2026/04/27     22:54                posts


PS C:\Users\test\blog-dev\src> cd posts
PS C:\Users\test\blog-dev\src\posts> notepad hello.md
PS C:\Users\test\blog-dev\src\posts> notepad second.md
PS C:\Users\test\blog-dev\src\posts> cd ..
PS C:\Users\test\blog-dev\src> mkdir _includes


    ディレクトリ: C:\Users\test\blog-dev\src


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2026/04/27     22:55                _includes


PS C:\Users\test\blog-dev\src> cd _includes
PS C:\Users\test\blog-dev\src\_includes> notepad layout.njk
PS C:\Users\test\blog-dev\src\_includes> cd ../../
PS C:\Users\test\blog-dev> npx eleventy --serve
[11ty] Writing ./_site/index.html from ./src/index.njk
[11ty] Writing ./_site/posts/hello/index.html from ./src/posts/hello.md (njk)
[11ty] Writing ./_site/posts/second/index.html from ./src/posts/second.md (njk)
[11ty] Writing ./_site/posts/index.html from ./src/posts.njk
[11ty] Copied 1 Wrote 4 files in 2.45 seconds (612.7ms each, v3.1.5)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

まとめ

  • Eleventyはシンプルで理解しやすい
  • 最小構成なら数分で動く

👉 最後に一番大事なこと

  • Eleventyはサーバー不要、「ファイルだけ」で完結する。
  • 最小構成から、徐々に発展させていくことができる。