前回からのつづき

前回までの作業で、サイト構築の準備が整いました。

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

7. 先頭ページの作成

サイトの先頭ページを作成します。名前、”index.njk”で作成します。 作成したファイルは、Eleventyにより解析され、HTML変換後、出力用フォルダー直下の”_site/index.html”として出力されます。

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

以下を入力：

notepad index.njk

メモ帳にて、以下を入力して保存：

---
title: ブログサイト構築の実践
date: 2026-04-24
layout: layout.njk
---

<a href="/posts/">投稿記事一覧</a>

（説明）

① 設定（フロントマター）部分

---
title: ブログサイト構築の実践
date: 2026-04-24
layout: layout.njk
---

Eleventy解析用の設定（フロントマター）を定義しています。

👉 レイアウト用テンプレートファイルとして、”layout.njk”を指定しています。

② 本文部分


<a href="/posts/">投稿記事一覧</a>

_site/index.htmlファイルの本文を定義しています。

👉 今回は、HTMLで投稿記事一覧ページへのリンクを定義しています。

補足

Eleventyによるファイル解析後、定義された値は、CollectionItem オブジェクトのプロパティとして保持されます。

{
  data: {
    title: "ブログサイト構築の実践",
    date: "2026-04-24"
    ...frontMatterの内容
  },
  templateContent: "<p><a href="/posts/">投稿記事一覧</a></p>",
  // 他にも Eleventy が内部で使うプロパティが多数
}

8. 投稿記事一覧ページの作成

投稿記事一覧ページを作成します。名前、”posts.njk”で作成します。 作成したファイルは、Eleventyにより解析され、HTML変換後、”_site/posts/index.html”として出力されます。

👉 Eleventyは、”index.*”という名前以外のファイルに関して、下記のルールでHTML出力を行います。

(名前).njk or (名前).md ⇒ (出力用フォルダー)/(名前)/index.html

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

以下を入力：

notepad posts.njk

メモ帳にて、以下を入力して保存：

---
title: 投稿記事一覧
layout: layout.njk
---

<h1>投稿記事一覧</h1>

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

（説明）

① 設定（フロントマター）部分

---
title: 投稿記事一覧
layout: layout.njk
---

Eleventy解析用の設定（フロントマター）を定義しています。

👉 レイアウト用テンプレートファイルとして、”layout.njk”を指定しています。

② 本文部分


<h1>投稿記事一覧</h1>

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

_site/posts/index.htmlファイルの本文をNunjucks構文とHTMLで定義しています。

👉 今回は：

  • 「投稿記事一覧」という見出しを定義
  • Eleventy構成”.eleventy.js”で定義したコレクション”posts”を逆順に並び替え、１つずつ抽出
  • 抽出した投稿記事へのリンクをHTMLでリスト形式に出力
  • リンク名には、取り出したpostの設定（フロントマター）に定義されていた”title”を使用

👉 Nunjucks構文では、Eleventy構成”.eleventy.js”で定義したコレクションをcollectionsというオブジェクトのプロパティとして、参照可能です。

例：postsコレクション ⇒ collections.posts

👉 設定（フロントマター）に定義されていた値は、”（オブジェクト名）.data.（定義名）”で参照可能です。

例：title ⇒ post.data.title

9. スタイルシートの作成

各ページで利用するスタイルシートを作成します。名前、”style.css”で作成します。

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

以下を入力：

notepad style.css

メモ帳にて、以下を入力して保存：

body {
  font-family: sans-serif;
  padding: 2rem;
  background-color: #f5f5f5;
}

👉 今回は、文字フォント、パディング、背景色を指定しています。

10. 投稿記事の作成

10-1. 投稿記事フォルダの作成

名前は、”posts”で作成します。

以下を入力：

mkdir posts

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

以下を入力：

cd posts

10-2. 投稿記事ページの作成

今回は、投稿記事一覧の確認も行いたいので、２つの記事を作成します。

最初の記事を、Markdownファイルで、名前”hello.md”として作成します。

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

以下を入力：

notepad hello.md

メモ帳にて、以下を入力して保存：

---
title: はじめての投稿
date: 2026-04-01
layout: layout.njk
---

こんにちは！これは最初の投稿です。

👉 レイアウト用テンプレートファイルとして、”layout.njk”を指定しています。

作成したファイルは、Eleventyにより解析され、HTML変換後、”_site/posts/hello/index.html”として出力されます。

つづいて、２つ目の記事を、同じくMarkdownファイルで、名前”second.md”で作成します。

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

以下を入力：

notepad second.md

メモ帳にて、以下を入力して保存：

---
title: ２回目の投稿
date: 2026-04-02
layout: layout.njk
---

２回目の投稿です。ブログサイトを構築していきます。

👉 レイアウト用テンプレートファイルとして、”layout.njk”を指定しています。

作成したファイルは、Eleventyにより解析され、HTML変換後、”_site/posts/second/index.html”として出力されます。

（つづく）