Eleventy（11ty）を使って既存のWebサイトにブログを導入してみた

Eleventyとは？

Eleventy（11ty）は、Node.jsベースのシンプルで柔軟な静的サイトジェネレーターです。複雑なビルド環境を必要とせず、HTML、Markdown、Nunjucksなど複数のテンプレート言語を自由に組み合わせてサイトを構築できます。

Eleventy is a simpler static site generator

Eleventy is a simpler static site generator.

https://www.11ty.dev/

この先は略称である「11ty」をなるべく使用します。ちなみに読み方は「イレブンティー」です！

サイトのコンテンツ管理を楽にしたい

11ty導入の解説にあたって、まずは「なぜ静的サイトジェネレーターを導入したか？」の背景を説明しようと思います。

プロジェクトの要件

とあるウェブサイトにおいて、サイト内に色々な形で存在する記事コンテンツをまとめて管理することになりました。

• コラム記事
• イベントレポート
• その他の読み物コンテンツ

これまでは通常のHTMLで管理・更新していましたが、どうやら難しそうです…。

というのも、単にディレクトリを統合するだけであれば手動でコツコツと作業していけば問題ないのですが、以下のように、いわゆるブログ機能をもたせる必要もあります。

• 記事一覧ページを作成し、記事数に応じてページ分割をする
• 記事の公開日・更新日を設定し、最新順に並べる
• 記事にタグ（カテゴリー）を設定し、タグごとの一覧ページも生成する

CMSではなく静的サイトジェネレーター？

ここまで読むと「CMSを入れればいいのでは？」と思うかもしれません。たしかにこの要件であれば、CMSを導入して記事の管理を効率化したほうが良さそうです。

ただし今回は限られた期間内での改修が必要でした。セキュリティ対策を含めた費用なども制約があるため、CMS導入は現実的ではありません。将来的なCMS導入も視野に入れつつ、まずは静的ページとして管理していく方向になりました。

こうした背景から、静的サイトジェネレーターである11tyを導入することになりました。

11tyを選んだ理由

静的サイトジェネレーターにはさまざまな選択肢がありますが、今回11tyを選んだ理由は以下の2点です。

• 柔軟性が高い
• 学習コストが低い

11tyは、既存サイトの運用に組み込みやすい柔軟さと、はじめての人でも扱いやすいシンプルさが魅力です。今回はその中でもとくに「柔軟性の高さ」と「学習コストの低さ」が選定理由となりました。

柔軟性が高い

11tyは既存のHTMLファイルをそのままテンプレートとして利用でき、現在管理しているファイルへの影響を最小限にできます。既存のページ構造を壊さず、少しずつテンプレート化を進められる点が大きな魅力でした。

今回のようなブログ機能の追加に限らず、「今あるサイトの管理を効率化したい」と考えている会社や制作担当者にとっても、参考になる選択肢だと思います。

学習コストが低い

他のフレームワークなどと比較して、11tyは学習コストが低めです。Webサイトを構築するために必要な最低限の機能に絞り込まれており、静的サイトジェネレーターにはじめて触れる人でも比較的簡単に使い始めることができます。

今後のプロジェクトでも、活用の機会が増えそうだと感じています。

実際のサイト構造と実現したいこと

既存サイトのディレクトリ構成は以下のようになっており、ブログ機能は/product/column/配下にのみ適用しています。

project-root/
├── htdocs/          // サイトのルートディレクトリ
│   ├── assets/
│   │   └── inc/
│   └── product/
│       └── column/  // 公開するディレクトリ
├── src/
│   └── column/
│       └── posts/   // 作業用のディレクトリ
└── .eleventy.js

現状のサイト構造や開発環境をベースにするため、以下の点に考慮しながら開発しました。

• 既存のHTMLファイルを活用する
• インクルードファイルはSSI
• 他のディレクトリに影響が出ないようにする
• Gulpとも共存させる

既存のHTMLファイルを活用する

通常、静的サイトジェネレーターではテンプレート言語というものを用いて、ページ制作を効率化します。11tyにはなんと10種類以上あり、全部は紹介できないですが、代表的なものが以下になります。

• Markdown
• Nunjucks
• EJS
• Pug

もちろんこれらを活用することで、より効率的なHTML生成が可能なのですが、今回は既存のHTMLファイルをなるべくそのまま活用したいので、.html ファイルのままとしました。

以下のようにFront Matterと呼ばれる記述でメタ情報などの設定を行い、それ以外は通常のHTMLをそのまま記述していくだけになります。

---
title: "タイトル"
description: "ディスクリプション"
date: 2025-07-07
tags:
  - name: "製品情報"
    slug: "product"
thumbnail: "/assets/img/column/thumb.jpg"
---
<!-- 以降は通常のHTML -->

<p>Eleventyを活用してHTML制作を効率化！</p>

インクルードファイルはSSI

ヘッダー・フッター・ナビゲーションといった共通パーツは、このサイトではSSI（Server Side Include）で管理しています。

以下のような記述を含めると、11tyでページを生成する際に、安全のためにエスケープ処理をしたり、余計な部分を削除することがあります。

<!--# include virtual="/assets/inc/header.html" -->

そのため、テンプレートで本文（記事の中身など）を出力する箇所では以下のように記述します。

<main>
  {{ content | safe }}
</main>

これにより、HTMLコメントを変換・エスケープせず、そのままHTMLとして出力するようになります。

他のディレクトリに影響が出ないようにする

11tyの出力ディレクトリは/product/column/配下に限定し、他のディレクトリや既存のHTMLコンテンツには影響を与えないようにしました。

.eleventy.js の設定で出力先ディレクトリを次のようにしています。

// .eleventy.js
module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",          // テンプレートや記事のソース
      includes: "column/layouts",  // レイアウト用ファイル
      output: "htdocs/product"   // 出力先ディレクトリを htdocs/product/ に設定
    }
  };
};

output: "htdocs/product" の記述によって、11tyが生成するファイルはすべてhtdocs/product配下に限定されます。これによりブログ記事は/product/column/に配置されるので、他のディレクトリに影響を与えることはありません。

さらに、各記事のパーマリンク（URL）も明示的に指定しています。

---
slug: "first-post"
permalink: "column/{{ slug }}.html"
---

こうすることで、11tyでビルドを実行した時に生成される記事のパスが確実に/product/column/配下に収まるようになります。

たとえばslug: "first-post"の場合、生成されるのは/product/column/first-post.htmlです。

こうしたディレクトリ設定とパーマリンクの明示によって、11tyの生成物が既存コンテンツに干渉せず、安全に共存できるようになりました！

Gulpとも共存させる

今回作業するファイルは元々、ローカルサーバーの立ち上げやSassのコンパイルにGulpを使用しています。これらの設定も活かしつつ、11tyと共存させるための設定を行いました。

もとからあるGulpの設定はいじらず、npm-run-allを用いて複数のnpm-scriptsを実行できるようにしています。

// package.json
"scripts": {
  "dev": "npm start",
  "start": "run-p start:*",
  "build": "run-s build:*",
  "start:eleventy": "eleventy --watch",
  "start:gulp": "gulp",
  "build:eleventy": "eleventy",
  "eleventy:serve": "eleventy --serve",
  "eleventy:watch": "eleventy --watch",
},

詳細な説明は省きますが、これでGulpと11tyを同時に実行できるようになりました。

開発時に必要なスクリプトを"dev": "npm start" に集約しているので、ローカル環境の開発時にはnpm run dev コマンドを入力することで、Gulpと11tyが同時に実行されます。

ローカル環境での開発が完了すれば npm run build を実行して、ページを生成します。生成されたファイルをサーバー上の/product/column/に丸ごとアップすれば公開完了となります。

11tyを導入して良かったこと

作業を進める中で、多少困ったこともありましたが、全体を通してメリットがとても多かったと思います。

• 記事一覧・タグ一覧の生成、日付によるソートが自動化された
• 既存のHTMLファイルやSSIをそのまま生かせた
• 静的生成なので高速で軽量なページが作れた
• 出力先のディレクトリ構造を柔軟に指定でき、既存サイトと共存しやすかった
• テンプレート化により、メタ情報（canonical、og:imageなど）の管理が楽になった
• テンプレート化により、共通箇所（パンくずリストなど）のデザイン管理が楽になった

まとめ

11tyは「既存の静的HTMLサイトにブログ機能を追加したい」という要件にとても合っていました！とくに、既存のディレクトリ構造やファイルに影響を与えず、少しずつ移行・テンプレート化していける柔軟性は大きな強みです。

今回紹介したのはブログ機能の追加でしたが、それに限らずあらゆるWebサイト・コンテンツに応用できると思います。

• 製品紹介
• 採用情報（募集要項）
• お知らせ
• FAQ（よくあるご質問）
• 用語集

これらは、用意されたフォーマットに情報を流し込むような構造が多いページなので、11tyによるテンプレート化の恩恵をおおいに受けられるでしょう。

すでにCMSなどで管理していれば問題ないですが、静的ページとして作成していて、「管理が面倒だな…」と思ったらEleventy（11ty）の導入をぜひ検討してみてください！