Eleventy から Astro への移行 | Migration Service
Eleventy サイトは動作していますが、コンポーネント、型、またはスケーリングが必要になったら
Why leave Eleventy (11ty)?
- Community plateaued while Astro's Discord hit 25,000 active developers
- Nunjucks templates break when your team tries to pass typed props
- Framework components require custom shortcodes and brittle passthrough
- Data cascade complexity spirals once you exceed 200 pages
- TypeScript support stops at config files — templates stay untyped
- Plugin ecosystem stalled with 90% of packages unmaintained since 2023
What you gain
- Component boundaries with full TypeScript inference across props and slots
- Islands architecture drops React calendar into static pages without hydrating the rest
- Content Collections enforce Zod schemas on every Markdown file at build time
- Astro's community ships 40+ official integrations maintained by core team
- Image optimization, sitemap, RSS built-in — no hunting for working plugins
- Zero-JS output preserved by default while opt-in hydration stays scoped per component
Eleventy to Astro: 哲学的な一致
Eleventy (11ty) と Astro は気が合う仲間です。どちらも JavaScript 出力がゼロの設定をデフォルトにしています。どちらもコンテンツを優先します。どちらもテンプレート言語を独自に選択できます。違いは、Astro がコンポーネントアーキテクチャ、TypeScript サポート、フレームワーク統合 (React、Vue、Svelte)、および Eleventy のより小さいコミュニティが実現できない急速に成長するエコシステムを追加していることです。
移行をスムーズにするもの
Eleventy は Nunjucks、Liquid、または Markdown テンプレートを使用します。Astro コンポーネントは HTML ファースト設計で、ロジック用のスクリプトセクションがあります。概念的なマッピングは直接的です: Eleventy テンプレートが Astro コンポーネントになり、Eleventy データファイルがコンテンツコレクションになり、Eleventy フィルターがユーティリティ関数になります。Markdown コンテンツは変更なしで移行します。
エコシステムの利点
Astro には Tailwind、MDX、サイトマップ、RSS、画像最適化、およびその他多数の公式統合があります。npm エコシステムに完全にアクセスできます。React、Vue、および Svelte コンポーネントは islands を介して Astro ページ内で機能します。このエコシステムアクセスは、Eleventy ユーザーが移行する主な理由です。哲学は同じですが、ツーリングはより充実しています。
The migration process
Discovery & Audit
We map every page, post, media file, redirect, and plugin. Nothing gets missed.
Architecture Plan
New stack designed for your content structure, SEO requirements, and performance targets.
Staged Migration
Content migrated in batches. Each batch verified before the next begins.
SEO Preservation
301 redirects, canonical tags, sitemap, robots.txt — every ranking signal carried over.
Launch & Monitor
DNS cutover with zero downtime. 30-day monitoring period included.
Eleventy (11ty) vs Astro
| Metric | Eleventy (11ty) | Astro |
|---|---|---|
| JavaScript shipped | Zero by default | Zero by default |
| Component system | Partials/includes | Full component architecture |
| TypeScript | Limited | First-class |
| Framework components | Not supported | React, Vue, Svelte via islands |
| Content typing | Untyped data cascade | Typed content collections |
| Community size | Smaller | Larger and growing |
Common questions
Eleventy も JavaScript がゼロで動作するなら、なぜ移行するのか？
Eleventy と Astro はゼロ JS の哲学を共有しています。移行する理由は、エコシステムアクセス (npm パッケージ、フレームワークコンポーネント)、TypeScript サポート、型安全性を備えたコンテンツコレクション、および大きなコミュニティです。Eleventy があなたのニーズを完璧に満たしている場合、移行を急ぐ必要はありません。
Eleventy と Astro はどの程度似ていますか？
哲学的には非常に似ています。どちらも JavaScript がゼロをデフォルトにし、どちらもコンテンツファースト、どちらも Markdown をサポートしています。主な違いは、Astro のコンポーネントアーキテクチャ、TypeScript サポート、および islands を介して React/Vue/Svelte コンポーネントを含める能力です。
Nunjucks テンプレートは Astro に変換されますか？
Nunjucks テンプレートは Astro コンポーネントに変換されます。構文は異なりますが、概念は直接マップされます: Nunjucks extends は Astro レイアウトになり、Nunjucks include はコンポーネントインポートになり、Nunjucks マクロは props を持つ Astro コンポーネントになります。変換は移行の一部として処理します。
Markdown コンテンツを保持できますか？
はい。Markdown ファイルは Astro のコンテンツコレクションに直接移行します。Front matter は型付きスキーマにマップされます。コンテンツは Astro の Markdown パイプラインを通じてレンダリングされます。コンテンツの変更は不要です。
Eleventy のデータカスケードについてはどうですか？
Eleventy のデータカスケード (グローバルデータ、ディレクトリデータ、テンプレートデータ) は Astro のコンテンツコレクションとコンポーネント props に置き換えられます。アプローチは異なりますが、同じ結果を実現します。コンテンツコレクションは Eleventy のデータカスケードが提供しない型安全性を追加します。
Eleventy から Astro への移行にはどのくらい時間がかかりますか？
10～30 ページのサイトは 2～3 週間かかります。100 以上の投稿を含むブログは 3～4 週間かかります。移行は、2 つのツール間の哲学的な一致のため、スムーズな SSG 移行の 1 つです。
Ready to migrate?
Free assessment. We'll audit your current site and give you a clear migration plan — no commitment.
Let's build
something together.
Whether it's a migration, a new build, or an SEO challenge — the Social Animal team would love to hear from you.