はじめに
Eleventy（11ty）は、シンプルで柔軟性の高い静的サイトジェネレーターです。
この記事では、Eleventyを使用して基本的な静的サイトを構築する方法をステップバイステップで説明します。
1. 前提条件
Eleventyを使用するには、以下のソフトウェアがインストールされている必要があります。
- Node.js（バージョン12以上）
- npm（Node.jsに含まれています）
Node.jsのインストール
Node.jsがインストールされていない場合は、公式サイトからインストーラーをダウンロードしてインストールしてください。
2. プロジェクトのセットアップ
まず、プロジェクト用のディレクトリを作成し、初期化します。
# プロジェクトディレクトリの作成
mkdir my-eleventy-site
cd my-eleventy-site
# npmプロジェクトの初期化
npm init -y
Eleventyのインストール
Eleventyを開発依存としてインストールします。
npm install @11ty/eleventy --save-dev
3. ディレクトリ構造の作成
基本的なディレクトリ構造を作成します。
my-eleventy-site/
├── src/
│ ├── index.md
│ └── about.md
├── .eleventy.js
├── package.json
└── README.md
.eleventy.js の作成
Eleventyの設定ファイルを作成します。
プロジェクトのルートに .eleventy.js を作成し、以下の内容を追加します。
module.exports = function(eleventyConfig) {
return {
dir: {
input: "src",
output: "_site"
}
};
};
4. コンテンツの作成
src ディレクトリ内にコンテンツファイルを作成します。
ここではMarkdownファイルを使用しますが、HTMLや他のテンプレートエンジンも使用可能です。
index.md
---
title: ホームページ
layout: layout.njk
---
# ようこそ！
これはEleventyを使用して作成された静的サイトのホームページです。
about.md
---
title: About
layout: layout.njk
---
# About
これはAboutページです。
5. テンプレートエンジンの選択
Eleventyは複数のテンプレートエンジンをサポートしています。
ここではNunjucks（.njk）を使用します。
レイアウトの作成
src ディレクトリ内に _includes フォルダを作成し、layout.njk を追加します。
src/
├── _includes/
│ └── layout.njk
├── index.md
└── about.md
layout.njk
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<nav>
<a href="/">ホーム</a> |
<a href="/about/">About</a>
</nav>
<main>
{{ content | safe }}
</main>
</body>
</html>
6. ビルドとローカルサーバーの起動
package.json のスクリプト追加
ビルドやサーバー起動を簡単にするために、package.json にスクリプトを追加します。
{
"name": "my-eleventy-site",
"version": "1.0.0",
"description": "Eleventyを使用した静的サイト",
"main": ".eleventy.js",
"scripts": {
"build": "eleventy",
"start": "eleventy --serve"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.0"
}
}
サイトのビルド
以下のコマンドでサイトをビルドします。
npm run build
ビルド後、_site フォルダに生成された静的ファイルが出力されます。
ローカルサーバーの起動
開発中はローカルサーバーを起動してリアルタイムで変更を確認できます。
npm run start
ブラウザで http://localhost:8080 にアクセスすると、サイトを確認できます。
7. カスタマイズとデプロイ
CSSの追加
スタイルを追加するために、src ディレクトリ内に styles.css を作成し、レイアウトにリンクします。
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
nav a {
margin-right: 10px;
text-decoration: none;
color: #333;
}
layout.njk の更新
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<nav>
<a href="/">ホーム</a> |
<a href="/about/">About</a>
</nav>
<main>
{{ content | safe }}
</main>
</body>
</html>
デプロイ
生成された _site フォルダの内容を任意の静的サイトホスティングサービス（Netlify、Vercel、GitHub Pagesなど）にデプロイします。
GitHub Pagesへのデプロイ例
- リポジトリをGitHubにプッシュします。
- リポジトリの設定からGitHub Pagesを有効にし、ブランチを選択します（例：
mainブランチのrootまたはdocsフォルダ）。 -
_siteフォルダの内容をdocsフォルダに出力するように.eleventy.jsを設定します。
module.exports = function(eleventyConfig) {
return {
dir: {
input: "src",
output: "docs"
}
};
};
- 再度ビルドしてGitHubにプッシュすると、GitHub Pagesでサイトが公開されます。
8. まとめ
Eleventyを使用することで、シンプルかつ柔軟な静的サイトを迅速に構築できます。
今回のチュートリアルでは、基本的なセットアップからビルド、ローカルサーバーの起動、そしてデプロイまでの流れを紹介しました。
Eleventyのドキュメントを参照しながら、さらに高度な機能やカスタマイズを試してみてください。