EleventyでのMarkdown

EleventyでのMarkdownの書き方

👉 Eleventy では**「Markdown + 設定（フロントマター）+ レイアウト用テンプレート」**でページを作ります

つまり

設定（フロントマター） → ページ情報を書く
Markdown → 本文を書く
レイアウト用テンプレート → 見た目を決める

この3つがセットです。

設定（フロントマター）（最重要）

Eleventyでは、Markdownの先頭にこれを書きます👇

---
title: 記事タイトル
date: 2026-04-23
layout: layout.njk
tags: posts
---

👉 ２つの---の間に、”項目名:内容”の形式でデータを記述します。

これは何を意味しているか？

項目	意味
title	記事タイトル
date	投稿日
layout	レイアウト用テンプレート
tags	記事の分類

👉 これを書かないと「ただの文章」になります

本文

続けて、本文を（設定）フロントマターの下に、書きます。

ここは通常のMarkdownと同じです👇

# 見出し

これは本文です。

- リスト1
- リスト2

👉 これが、Eleventy用のMarkdownの書き方の基本です。

テンプレートとの連携

Eleventyは、Eleventy用に書かれたMarkdownとレイアウト用テンプレートを組み合わせてHTMLでページを作成します。

例えばレイアウト用テンプレート”layout.njk” にこう書いてあると👇

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

👉 Markdownの内容が：

設定（フロントマター）のtitle →　{{ title }}
本文 →　{{ content | safe }}

の部分に埋め込まれて、HTMLが作成されます。

注）レイアウト用テンプレート ”layout.njk” は、Nunjucks の構文で書かれています。Nunjucks の構文については、「サイト構築について/EleventyでのNunjucks」を参照してください。

その他の便利な書き方

コレクション（記事一覧）

コレクションは、Eleventyの強みの1つです👇

例えば、複数の記事とその記事一覧のページを作成したい場合、

各記事のMarkdownの（設定）フロントマターに、

tags: posts

記事一覧のMarkdownの本文に、

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

と書くと、

👉 自動で記事一覧が作れます。

パーマリンク（URL指定）

作成するページのURLを自由に決められます👇

作成するページのMarkdownの設定（フロントマター）に：

permalink: /blog/first-post/

と書くと

👉 表示URLを指定することができます

/blog/first-post/

本文中にNunjucks構文混在可能

本文をNunjucks構文で書く事ができます。

例：設定（フロントマター）でauthorが定義されている場合、著者を出力👇

---
title: テスト記事
author: 山田
---
{% if author }
  著者：{{ author }}
{% endif %}

本文中にHTMLを混在可能

本文にHTMLタグを含められます。

---
title: テスト記事
author: 山田
---
<p>著者：{{ author }}</p>

👉 Nunjucks構文とHTMLタグ、両方の混在も可能です。

よくある実用例（完成形）

---
title: Markdownの使い方
date: 2026-04-23
layout: layout.njk
tags: posts
permalink: /posts/markdown/
---

# {{ title }}

Markdownはとても便利です。

## メリット

- 簡単に書ける
- HTMLに変換される

👉 これだけで

ページ生成
一覧表示
URL管理

が全部できます

よくあるミス

❌ layoutを書き忘れる

👉 デザインが適用されない

❌ tagsを書かない

👉 一覧に出てこない

❌ date形式がバラバラ

date: 2026/04/23 ←場合によってはNG

👉 ISO形式推奨

date: 2026-04-23