Eleventy（11ty）を使用したビルドチュートリアル

# はじめに

Eleventy（11ty）は、シンプルで柔軟性の高い静的サイトジェネレーターです。
この記事では、Eleventyを使用して基本的な静的サイトを構築する方法をステップバイステップで説明します。

## 1. 前提条件

Eleventyを使用するには、以下のソフトウェアがインストールされている必要があります。

- **Node.js**（バージョン12以上）
- **npm**（Node.jsに含まれています）

### Node.jsのインストール

Node.jsがインストールされていない場合は、公式サイトからインストーラーをダウンロードしてインストールしてください。

[Node.js公式サイト](https://nodejs.org/ja/)

## 2. プロジェクトのセットアップ

まず、プロジェクト用のディレクトリを作成し、初期化します。

```bash
# プロジェクトディレクトリの作成
mkdir my-eleventy-site
cd my-eleventy-site

# npmプロジェクトの初期化
npm init -y
```

### Eleventyのインストール

Eleventyを開発依存としてインストールします。

```bash
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` を作成し、以下の内容を追加します。

```javascript
module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "_site"
    }
  };
};
```

## 4. コンテンツの作成

`src` ディレクトリ内にコンテンツファイルを作成します。
ここではMarkdownファイルを使用しますが、HTMLや他のテンプレートエンジンも使用可能です。

### `index.md`

```markdown
---
title: ホームページ
layout: layout.njk
---

# ようこそ！

これはEleventyを使用して作成された静的サイトのホームページです。
```

### `about.md`

```markdown
---
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`

```html
<!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` にスクリプトを追加します。

```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"
  }
}
```

### サイトのビルド

以下のコマンドでサイトをビルドします。

```bash
npm run build
```

ビルド後、`_site` フォルダに生成された静的ファイルが出力されます。

### ローカルサーバーの起動

開発中はローカルサーバーを起動してリアルタイムで変更を確認できます。

```bash
npm run start
```

ブラウザで `http://localhost:8080` にアクセスすると、サイトを確認できます。

## 7. カスタマイズとデプロイ

### CSSの追加

スタイルを追加するために、`src` ディレクトリ内に `styles.css` を作成し、レイアウトにリンクします。

#### `styles.css`

```css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

nav a {
  margin-right: 10px;
  text-decoration: none;
  color: #333;
}
```

#### `layout.njk` の更新

```html
<!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へのデプロイ例

1. リポジトリをGitHubにプッシュします。
2. リポジトリの設定からGitHub Pagesを有効にし、ブランチを選択します（例：`main` ブランチの `root` または `docs` フォルダ）。
3. `_site` フォルダの内容を `docs` フォルダに出力するように `.eleventy.js` を設定します。

```javascript
module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "docs"
    }
  };
};
```

4. 再度ビルドしてGitHubにプッシュすると、GitHub Pagesでサイトが公開されます。

## 8. まとめ

Eleventyを使用することで、シンプルかつ柔軟な静的サイトを迅速に構築できます。
今回のチュートリアルでは、基本的なセットアップからビルド、ローカルサーバーの起動、そしてデプロイまでの流れを紹介しました。
Eleventyのドキュメントを参照しながら、さらに高度な機能やカスタマイズを試してみてください。

### 参考リンク

- [Eleventy公式ドキュメント](https://www.11ty.dev/docs/)
- [Eleventy GitHubリポジトリ](https://github.com/11ty/eleventy)

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/