あらためてEleventyとは？

Eleventy（公式サイト）は、Zach Leatherman（ザック・レザーマン）さんが中心になって開発された静的サイトジェネレーターです。2018年にリリースされました。

特徴を一言でいうと、

👉 「MarkdownやHTMLから、そのままWebページを作るツール」

です。

アクセシビリティやパフォーマンスを大事にする開発者たちに支持されています。

Node.jsが導入されている環境下であれば、コマンド1つで、使い始めることが可能です。

なぜ人気なのか？

よくあるツールは、

  • 設定が多い
  • 専用ルールが多い

ですが、Eleventyは違います。

  • HTMLがそのまま使える
  • Markdownも使える
  • 出力されるHTMLがシンプル

👉つまり 「覚えることが少ない」＝　挫折しにくい

実際に動かしてみる（最短ルート）

ここでは「とにかく動かす」ことを目的に説明します。

前提としてNode.jsの導入が必要です。

※　Node.jsの導入に関しては、過去投稿「開発環境について/Node.js環境の作成」を参照してください。

① ターミナルを開く

Windowsの場合：

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

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

② サイト用フォルダ作成＆移動

ホームフォルダー(例：C:\Users\test)に、名前は、”blog-test”で作成します。

以下を入力：

mkdir blog-test
cd blog-test

③ 初期化（これを忘れる人が多い）

サイトのフォルダをNode.js用として初期化します。

以下を入力：

npm init -y

👉 これをやらないと後でエラーになります

④ Eleventyをインストール

Node.jsにより、Eleventyを開発用としてインストールします。

以下を入力：

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

⑤ 最小のページを作る

ページの名前を、”index.md”で作成します。

以下を入力：

@"
---
title: はじめて
---

# Hello Eleventy

"@ | Out-File index.md -Encoding utf8

⑥ 実行（ここが感動ポイント）

Eleventyを実行します。

以下を入力：

npx eleventy --serve

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

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

http://localhost:8080/

👉 ”Hello Eleventy”の文字が表示されます。

作成されたHTMLファイルを確認する

上記作業の結果、”blog-test”のフォルダ構成が下記のようになっています。

C:\USERS\TEST\BLOG-TEST
│  index.md                → 作成したMarkdownファイル
│  package-lock.json       → Node.jsのファイル
│  package.json            → Node.jsのファイル
│  
├─node_modules            → Node.jsのモジュール
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      （以下省略）
│              
└─_site                   → Eleventyにより作成されたフォルダ
        index.html          → Eleventyにより作成されたHTMLファイル

_site"の名前でフォルダが作成され、”index.html”が作成されています。

index.htmlの中身は：

<h1>Hello Eleventy</h1>

👉 index.md　→　index.html にEleventyが変換

*.mdファイルとは何か？

*.mdファイルは、Markdownファイルのことです。タグではなく、記号（#,*,-）などを使い文書構造を簡略化した表記方法です。

👉 HTMLに変換するための“シンプルな下書き記法”です。

Markdown は：

  • 記号で構造を書く
  • 最終的にHTMLに変換される

という2段構えの仕組みです

イメージで理解すると

Markdown（書く）

# タイトル
- 項目1
- 項目2

⬇ 変換される ⬇

HTML（表示用）

<h1>タイトル</h1>
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

👉 Markdownは「人が書きやすい形」 👉 HTMLは「ブラウザが理解する形」

なぜこの仕組みが重要か

■ 役割が違う

役割 内容
Markdown 人が書くため
HTML 表示するため

👉 目的が最初から違う

よくある誤解

❌ Markdown = HTMLの簡略版

→ 少し違います

👉 正しくは 「HTMLを生成するための入力フォーマット」

Eleventy の内部では、何が行われているか？

この流れが自動で動いています：

  • Markdownを読みこむ
  • HTMLに変換する
  • サイトとして出力する

👉 人が書いたMarkdownファイルをHTMLに正しく変換（ここが重要）

---
title: はじめて
---                      ⇒　　　　　<h1>Hello Eleventy</h1>
　　　　　　　　　　　　 （変換）
# Hello Eleventy

まとめ

  • 最小構成なら数分で動く。
  • 「人が書きやすい形」のMarkdownを「ブラウザが理解する形」のHTMLに変換する。
  • サイトとして出力してくれる。

👉 最後に一番大事なこと

  • Eleventyはサーバー不要、「ファイルだけ」で完結する。