Eleventyで始める軽量ブログ開発 - Cloudflare Pagesで無料公開まで

Eleventyで始める軽量ブログ開発 - Cloudflare Pagesで無料公開まで

はじめに

モダンなブログを作りたいけど、WordPressは重いし、Next.jsは大げさすぎる...そんな悩みを抱えていませんか?

今回は、シンプルで高速な静的サイトジェネレーター Eleventy (11ty) を使って、技術ブログを構築する方法を紹介します。さらに、Cloudflare Pagesと連携することで、完全無料で自動デプロイ環境まで整えます。

なぜEleventyを選んだのか

他の選択肢との比較

特徴 Eleventy Next.js Astro Gatsby
ビルド速度 ⚡ 超高速 🐢 遅め ⚡ 高速 🐢 遅め
学習コスト 🟢 低い 🔴 高い 🟡 中程度 🔴 高い
テンプレート Nunjucks, Liquid等 React/JSX Astro/JSX React
ファイルサイズ 🟢 最小 🔴 大きい 🟡 中程度 🔴 大きい

Eleventyの強み

  1. ゼロJavaScript - デフォルトでクライアント側にJSを送信しない
  2. 柔軟なテンプレート - Nunjucks, Liquid, Markdown, HTMLなど10種類以上に対応
  3. 高速ビルド - 数百ページでも数秒でビルド完了
  4. シンプルな設定 - .eleventy.js 一つで完結

プロジェクトのセットアップ

1. 初期化

# プロジェクトディレクトリを作成
mkdir my-blog
cd my-blog

# package.jsonを作成
npm init -y

# Eleventyをインストール
npm install --save-dev @11ty/eleventy

2. ディレクトリ構成

my-blog/
├── src/
│   ├── posts/          # ブログ記事
│   │   └── 2026/
│   │       └── 0116-first-post.md
│   ├── layouts/        # レイアウトテンプレート
│   │   ├── base.njk
│   │   └── post.njk
│   ├── assets/         # 静的ファイル
│   │   └── style.css
│   └── index.njk       # トップページ
├── .eleventy.js        # Eleventy設定
└── package.json

3. Eleventy設定ファイル

.eleventy.js を作成して、基本設定を記述します:

module.exports = function(eleventyConfig) {
  // 静的ファイルのコピー
  eleventyConfig.addPassthroughCopy("src/assets");
  
  // 日付フォーマットのフィルター
  eleventyConfig.addFilter("dateFormat", (date) => {
    return new Date(date).toLocaleDateString('ja-JP', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  });

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

記事の書き方

Front Matterの活用

各記事ファイルの先頭にメタデータを記述します:

---
date: 2026-01-16
layout: post.njk
tags: post
title: 記事タイトル
description: 記事の説明文
image: https://example.com/image.jpg
---

## 記事の内容

ここから本文を書きます...

記事ファイルの命名規則

このプロジェクトでは、以下のルールを採用しています:

  • 形式: yyyy/mmdd-タイトル.md
  • 例: 2026/0116-eleventy-blog.md
  • 禁止事項: スペースや全角文字の使用

この命名規則により、記事の日付管理が容易になります。

レイアウトテンプレートの作成

ベースレイアウト (base.njk)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eleventyで始める軽量ブログ開発 - Cloudflare Pagesで無料公開まで | My Blog</title>
  <meta name="description" content="静的サイトジェネレーターEleventyを使った高速ブログの構築方法と、Cloudflare Pagesでの自動デプロイまでを解説します。">
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body>
  <header>
    <nav>
      <a href="/">ホーム</a>
    </nav>
  </header>
  
  <main>
    
  </main>
  
  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</body>
</html>

記事レイアウト (post.njk)

---
layout: base.njk
---

<article>
  <header>
    <h1>Eleventyで始める軽量ブログ開発 - Cloudflare Pagesで無料公開まで</h1>
    <time datetime="Fri Jan 16 2026 00:00:00 GMT+0000 (Coordinated Universal Time)">2026年1月16日</time>
  </header>
  
  <div class="post-content">
    
  </div>
</article>

Cloudflare Pagesでのデプロイ

1. GitHubリポジトリの準備

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/my-blog.git
git push -u origin main

2. Cloudflare Pagesの設定

  1. Cloudflare Dashboard にログイン
  2. Pages → Create a project を選択
  3. GitHubリポジトリを連携
  4. ビルド設定を入力:
    • Build command: npm run build
    • Build output directory: _site
    • Node version: 18 (環境変数で設定)

3. 自動デプロイの仕組み

Cloudflare Pagesは、GitHubへのプッシュを検知して自動的にビルド・デプロイを実行します:

git push → GitHub → Cloudflare Pages → 自動ビルド → 本番公開

これにより、記事を書いてプッシュするだけで、数分後には本番環境に反映されます 🚀

パフォーマンス最適化

画像の最適化

Cloudinaryを使うことで、画像を自動的に最適化できます:

<!-- 元のURL -->
https://res.cloudinary.com/demo/image/upload/v123/sample.jpg

<!-- 最適化されたURL -->
https://res.cloudinary.com/demo/image/upload/w_400,f_auto,q_auto/v123/sample.jpg

パラメータの意味:

  • w_400: 幅を400pxに制限
  • f_auto: 最適なフォーマット(WebP等)を自動選択
  • q_auto: 品質を自動最適化

ビルド速度の改善

Eleventyは非常に高速ですが、さらに改善するためのTips:

  1. インクリメンタルビルド: --incremental フラグを使用
  2. 不要なファイルを除外: .eleventyignore で指定
  3. キャッシュの活用: eleventyConfig.setDataDeepMerge(true)

開発ワークフロー

ローカル開発

# 開発サーバーを起動(ホットリロード有効)
npm run dev

# ブラウザで http://localhost:8080 を開く

記事の追加

  1. src/posts/yyyy/mmdd-title.md を作成
  2. Front Matterとコンテンツを記述
  3. ローカルサーバーを再起動して確認
  4. コミット & プッシュで本番反映

まとめ

Eleventyを使ったブログ構築の利点:

✅ シンプル - 複雑な設定不要で始められる
✅ 高速 - ビルドもページ表示も超高速
✅ 無料 - Cloudflare Pagesで完全無料運用
✅ 自動化 - GitHubプッシュで自動デプロイ
✅ 柔軟 - 好きなテンプレート言語を選択可能

特に個人ブログや技術ブログには最適な選択肢です。WordPressのような管理画面はありませんが、Markdownで記事を書くことに慣れているエンジニアにとっては、むしろ快適な執筆環境になるはずです。

参考リンク

この記事が、あなたのブログ構築の参考になれば幸いです。Happy Blogging! 🎉