どのようなサイトを構築するか？

ここからは、Eleventyにより実際にサイトを構築していきます。

最終的には、

👉 テーマによってデザイン切り替えが可能な、ブログサイトを目指していきたいと思っています。

基本部分を作成し、少しずつ、機能追加を図っていくつもりです。

今回作成部分の動きの確認

まずは、今回作成する分イメージを下記のボタンを押して確認してください。

サイトの機能

  • 先頭ページ
    • 記事一覧ページへのリンクを用意
    • 記事一覧ページへのリンクをクリック ⇒ 記事一覧ページを表示
  • 記事一覧ページ
    • 全ての投稿記事へのリンクを投稿日付が新しいものが上になるように用意
    • 投稿記事へのリンクをクリック ⇒ 該当の投稿記事のページを表示
  • 投稿記事ページ
    • 投稿記事の内容を表示

👉　ブログサイトとしての基本部分となります。

サイトの作成時の注意点

Windows上で、構築していきます。

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

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

※　ファイル作成では、Windows標準の”メモ帳(notepad)”を使用していますが、普段お使いのエディタを使用していただいて問題ありません。

Windowのメモ帳アプリ(notepad)について

Windowsのメモ帳アプリは、2025年5月30日に発表されたバージョン11.2504.50.0から、Markdown形式のテキスト入力およびファイルをサポートする機能が追加されました。

しかし、マークアップの初期値が「書式付き」の為、そのままでは、サポートされていないマークアップ記号が入力されると自動でエスケープされてしまい、意図したとおりに書き込まれません。

👉 解決策として、メモ帳起動後、必ず下記のどちらかの対策を行うようにしてください。

  • メニューバーからマークアップを「構文」に変更（「表示」⇒「マークダウン」⇒「Ｍ↓構文」）
  • 設定から、書式設定をOFF

サイトの基本部分の作成（実践）

今回、作成するフォルダーとファイルは下記の通りです。

👉 記事を”src/posts”配下にMarkdownファイルとして、追加することで、投稿していく仕組みとします。

C:\users\test\blog-dev
│  .eleventy.js          → ルール
│ 
└─src
   │  index.njk          → 先頭ページ
   │  posts.njk          → 投稿記事一覧ページ
   │  style.css          → スタイルシート
   │  
   ├─posts
   │      hello.md       → 最初の投稿記事データ
   │      second.md      → ２つ目の投稿記事データ
   │      
   └─_includes
           layout.njk     → レイアウト用テンプレート

構築手順

下記の手順に従って、説明していきます。

  1. ターミナル起動
  2. サイト用フォルダー作成
  3. Node.jsによる初期化
  4. Eleventyの導入
  5. Eleventy定義の作成
  6. 入力用フォルダーの作成
  7. 先頭ページの作成
  8. 記事一覧ページの作成
  9. スタイルシートの作成
  10. 投稿記事の作成
  11. レイアウト用テンプレートの作成
  12. Eleventyの起動
  13. ブラウザによる表示確認

1. ターミナル起動

Windowsの場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

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

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

2. サイト用フォルダー作成

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

以下を入力：

mkdir blog-dev

作成したサイト用フォルダーに移動します。

以下を入力：

cd blog-dev

3. Node.jsによる初期化

サイト用フォルダーにnode_modulesをインストールする為、Node.jsの初期化を実施します。

以下を入力：

npm init -y

4. Eleventyの導入

サイト構築の為、Eleventy本体をNode.js経由でインストールします。

以下を入力：

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

5. Eleventy定義の作成

Eleventyの定義ファイル”.eleventy.js”をJavascriptで作成します。

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

以下を入力：

notepad .eleventy.js

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

module.exports = function (eleventyConfig) {

  eleventyConfig.addCollection("posts", function (collectionApi) {
    return collectionApi.getFilteredByGlob("src/posts/*.md");
  });

  eleventyConfig.addPassthroughCopy("src/style.css");

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes"
    },
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk"
  };
};

（説明）

⑪ 定義内容を外部関数として定義する

module.exports = function (eleventyConfig) {

  // 定義内容を書く

};

この関数では、定義用の”eleventyConfig”オブジェクトをパラメータとして受け取ります。定義を行う際は、このオブジェクトのメソッドを利用して行います。Eleventy起動時に最初に実行されます。

② ”posts”コレクションの作成部分

  eleventyConfig.addCollection("posts", function (collectionApi) {
    return collectionApi.getFilteredByGlob("src/posts/*.md");
  });

Eleventyには、コレクションという便利な機能が存在します。”addCollection”メソッドは、第1引数で指定した名前で、第2引数の値をコレクションとして保持します。 MarkdownファイルやNunjucksファイルの解析時に参照される為、各ファイルの中で、このコレクションを使用できます。

”collectionApi.getFilteredByGlob”は指定した複数ファイル（ワイルドカード*使用可能）を解析し、その内容をCollectionItem オブジェクトの配列として戻します。

👉 今回の定義では、”src/posts/*.md”に該当するMarkdownファイルを解析し、CollectionItem オブジェクトの配列として、”posts”というコレクションで保持します。

CollectionItem オブジェクトとは？

👉 MarkdownファイルやNunjucksファイルを解析して作成された、下記ようなオブジェクトをいいます。

{
  inputPath: "src/posts/xxx.md",
  fileSlug: "xxx",
  url: "/posts/xxx/",
  date: 2026-04-23T00:00:00.000Z,
  data: {
    title: "記事タイトル",
    tags: ["posts", "カテゴリ名"],
    categories: ["カテゴリ名"],
    ...frontMatterの内容
  },
  templateContent: "<p>本文HTML...</p>",
  // 他にも Eleventy が内部で使うプロパティが多数
}

③ スタイルシートの定義部分

  eleventyConfig.addPassthroughCopy("src/style.css");

Eleventyは、入力先フォルダーのMarkdownファイルやNunjucksファイルを解析し、出力先フォルダーにHTMLとして、書き出す処理を行います。通常、これら以外のファイルは対象外として無視されます。

”eleventyConfig.addPassthroughCopy”メソッドは、指定されたパスのフォルダーもしくは、ファイルを加工せず、そのまま出力先フォルダーにコピーするものです。

今回は、”src/style.css”のパス名で作成したスタイルシートをそのまま出力先フォルダーにコピーします。

④ 基本定義情報の受け渡し部分

  return {
    dir: {
      input: "src",                    →  入力用フォルダーの名前
      output: "_site",                 →  出力用フォルダーの名前
      includes: "_includes"            →  レイアウト用テンプレート格納フォルダーの名前
    },
    markdownTemplateEngine: "njk",     →  MarkDwon解析用デフォルトエンジンの指定
    htmlTemplateEngine: "njk"          →  HTML解析用デフォルトエンジンの指定
  };

関数の戻り値として、基本的な定義情報をオブジェクトとして戻します。

👉 入力用フォルダーの名前、出力用フォルダーの名前、レイアウト用テンプレート格納フォルダーの名前は、この値を変えることで自由に変更可能です。

6. 入力用フォルダーの作成

Eleventyに解析してもらうファイルを格納する入力用フォルダーを作成します。

今回は、Eleventyの定義”.eleventy”で指定した、”src”で作成します。

以下を入力：

mkdir src

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

以下を入力：

cd src

👉 ここまでで、サイト構築の準備が完了です。

（つづく）