從 Eleventy 遷移至 Astro
你的 Eleventy 網站運作良好 — 直到你需要真正的元件
Why leave Eleventy (11ty)?
- Stop debugging Nunjucks — the project's maintainer abandoned it and Liquid's 11ty fork drops named arguments mid-template
- Quit stitching asset pipelines — every Eleventy project demands manual PostCSS, esbuild, and Sharp plugin wiring before you write a line
- Escape the data cascade maze — five merging data sources with implicit priority create bugs you can't trace without console logging globals
- Ditch pseudo-components — template includes and shortcodes lack typed props, scoped CSS, or any hydration path for interactivity
- Abandon the WebC dead end — introduced as '11ty's modern templating layer' but ignored by the ecosystem and unsupported by tooling
- Break free from config fatigue — your `.eleventy.js` balloons to 200+ lines just to match what Astro ships by default
What you gain
- Ship typed components that compile to zero JavaScript — scoped CSS, slot composition, and props validation without runtime overhead
- Catch content errors at build time — Zod-validated collections flag broken frontmatter and surface autocomplete in your editor before deploy
- Stop configuring image optimization — responsive srcset, WebP/AVIF conversion, and lazy loading work in three lines of JSX with no plugins
- Add interactivity without framework bloat — island architecture lets you drop React cart logic or a Svelte form into static pages, hydrating only what needs it
- Delete your tooling setup — Vite dev server, instant HMR, CSS bundling, and TypeScript support run out of the box with zero config files
- Keep your deploy speed and cut build time — your 90-second 11ty builds drop to sub-15 seconds while preserving full static output
為什麼要從 Eleventy 遷移到 Astro
Eleventy 是一個穩健的靜態網站產生器。它極簡、快速，並尊重你的內容，使用標準模板語言。如果你一直在執行 11ty 網站，你可能正是因為這些原因選擇了它。
那麼為什麼要遷移呢？
Astro 提供了 Eleventy 的所有優勢 — 預設零 JS、靜態優先輸出、快速構建 — 加上元件模型、內建資源最佳化、型別安全的內容集合，以及一級框架支援。相同的哲學，但開發者體驗好得多。
我們已遷移過數十個 Eleventy 網站到 Astro。這是我們處理的最流暢的轉換之一，因為心智模型對齐得非常緊密。兩個工具都尊重靜態輸出。兩個都運送最少的 JavaScript。區別在於當你需要更多功能時出現。
Eleventy 的痛點
模板語言碎片化
Eleventy 支援 HTML、Markdown、Nunjucks、Liquid、Handlebars、Mustache、EJS、Haml、Pug、WebC 和自訂語言。這被標榜為靈活性。實際上，它會造成碎片化。你的包含檔案可能是 Nunjucks、版面配置 Liquid、資料檔案 JavaScript。加入專案的新開發人員花他們的第一週就只是在弄清楚哪個模板語言做什麼。
Nunjucks 本身實際上已沒有人維護 — Mozilla 專案多年來沒有看到重大更新。Liquid 的 11ty 實現不完全支援命名引數。WebC 被引入作為現代替代方案，但尚未獲得廣泛採用。
手動資源管線
Eleventy 刻意不處理 CSS、JavaScript 或影像最佳化。你自己接線構建管線 — 通常是 PostCSS、esbuild 或 Vite，以及 eleventy-img 外掛。如果你知道自己在做什麼，功能強大，但每個專案在你寫一行內容之前都會開始進行大量工具配置。
資料級聯複雜性
11ty 資料級聯功能強大但不透明。資料流入全域資料檔案、目錄資料檔案、模板前置資料、計算資料和 JavaScript 資料檔案 — 所有資料都按特定優先順序合併。除錯資料問題意味著理解整個級聯。即使是經驗豐富的開發人員也會對此感到困惑。
沒有元件模型
Eleventy 使用包含和簡碼來實現可重複使用的 UI。這些有效，但它們不是元件。你不能傳遞型別化的 prop、共同定位樣式，或逐進增強特定 UI 元素，使其具有用戶端互動性，除非從頭開始構建自訂解決方案。
Astro 提供的功能
真正的元件，零執行時
Astro 元件看起來像帶有前置資料指令碼區塊的 HTML。它們支援型別化 prop、作用域樣式和基於插槽的組合。預設情況下，它們編譯為零 JavaScript — 與你的 Nunjucks 模板相同，但背後有實際的元件模型。
---
interface Props {
title: string;
date: Date;
}
const { title, date } = Astro.props;
---
<article>
<h2>{title}</h2>
<time datetime={date.toISOString()}>{title}</time>
<slot />
</article>
<style>
article { /* 自動作用域 */ }
</style>
具有型別安全的內容集合
Astro 的內容集合用模式驗證、型別安全的系統取代了 11ty 資料級聯。你使用 Zod 定義內容架構，Astro 在構建時驗證每一段內容。沒有更多來自生產環境中發現的遺漏前置資料欄位的驚訝。
const blog = defineCollection({
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()).optional(),
draft: z.boolean().default(false),
}),
});
這會將隱式資料級聯換為明確的、經過驗證的架構。你的 IDE 自動完成內容欄位。構建錯誤在部署前捕捉遺漏的資料。
內建資源最佳化
Astro 開箱即用地處理 CSS 組合、JavaScript 處理和影像最佳化。<Image /> 元件產生具有適當 srcset 的回應式影像，轉換為 WebP/AVIF，並處理延遲載入 — 無需外掛配置。
當你需要時的框架島嶼
需要用戶端互動性 — 搜尋小工具、互動圖表、帶驗證的表單？Astro 的島嶼架構讓你放入 React、Svelte、Vue 或 Solid 元件，這些元件獨立註水。使用 Eleventy，每個互動元素都需要自訂 JavaScript 組合。你自己構建該基礎設施。
我們的遷移流程
第 1 階段：稽核和架構（第 1 週）
我們分析你現有的 11ty 專案結構 — 使用的模板語言、資料級聯依賴性、簡碼、外掛和自訂篩選。每個 Nunjucks/Liquid 模板都對應到其 Astro 元件等效物，並且我們在寫一行新程式碼之前記錄完整的資料流程。
第 2 階段：內容遷移（第 1-2 週）
你的 Markdown 內容直接轉移 — Astro 讀取相同的前置資料格式。我們根據你現有的前置資料模式定義 Zod 架構，並設定內容集合。如果你使用 11ty 的計算資料或 JavaScript 資料檔案，我們將其轉換為 Astro 的資料載入模式。
模板轉換遵循可預測的模式：
| Eleventy | Astro |
|---|---|
{% include "header.njk" %} |
<Header /> |
{% block content %}{% endblock %} |
<slot /> |
{{ variable | filter }} |
{variable} 使用 JS 轉換 |
{% for item in collection %} |
{collection.map(item => ...)} |
| 簡碼 | Astro 元件 |
_data/ 全域資料 |
Astro.glob() 或內容集合 |
第 3 階段：設計和元件構建（第 2-3 週）
我們將你的模板重建為具有作用域樣式的 Astro 元件。這是升級發揮作用的地方。曾經是笨拙 Nunjucks 包含檔案的模板變成乾淨、型別化、可組合的單位。我們實現回應式影像、最佳化字體，並新增你的網站需要的任何互動島嶼。
第 4 階段：測試和 SEO 驗證（第 3-4 週）
完整的 Lighthouse 稽核。針對你現有的網站地圖驗證每個 URL。重新導向已測試。結構化資料已驗證。我們檢查 RSS 摘要、社交中繼標籤和規範 URL 都與你現有的設定相符，才能讓任何東西上線。
SEO 保護策略
Eleventy 和 Astro 都產生靜態 HTML，這使得 SEO 遷移遠比從用戶端轉譯框架遷移簡單。以下是我們具體處理的事項：
- URL 同位性：我們對應每個現有 URL，並確保 Astro 中的路徑完全相同。如果你的 11ty 網站使用自訂永久連結結構，我們會精確複製它們。
- 301 重新導向：對於任何必須更改的 URL，我們在託管級別配置適當的重新導向。
- 網站地圖產生：Astro 的
@astrojs/sitemap整合自動產生準確的網站地圖。 - 中繼標籤：所有標題標籤、中繼描述、Open Graph 標籤和結構化資料轉移到 Astro 的
<head>管理。 - 效能增益：內建影像最佳化和資源組合通常會改善 Core Web Vitals，這會回饋到搜尋排名。
時間表和定價
Eleventy 到 Astro 的遷移是我們最快的遷移。內容轉移的變化最少，模板轉換遵循機械模式。哲學接近到足以不需要基礎重新思考。
- 小型網站（少於 20 個模板、部落格/文件）：2-3 週，起價 $4,000
- 中型網站（20-50 個模板、多種內容類型）：3-5 週，起價 $8,000
- 大型網站（50+ 個模板、複雜資料關係、互動功能）：5-8 週，起價 $15,000
每次遷移都開始進行免費稽核 — 我們評估你目前的 11ty 設定並產生詳細的範圍文件。不會有意外。
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 |
|---|---|---|
| Lighthouse Mobile | 70-85 | 95-100 |
| TTFB | 0.3-0.8s | <0.2s |
| Asset Pipeline Setup | Manual (PostCSS, esbuild, eleventy-img) | Built-in (Vite, <Image />) |
| Hosting Cost | $0-20/mo | $0-20/mo |
| Content Type Safety | None (implicit data cascade) | Full (Zod schema validation) |
| Component Model | Includes + shortcodes | Typed components with scoped styles + framework islands |
Common questions
遷移到 Astro 時，我可以保留現有的 Markdown 內容嗎？
可以。Astro 讀取具有 YAML 前置資料的標準 Markdown 和 MDX — 與 Eleventy 使用的格式相同。你的內容檔案直接轉移。我們定義 Zod 架構來在構建時驗證你的前置資料，這會捕捉你的 11ty 網站可能一直默認忽視的任何不一致。
Astro 內容集合與 11ty 資料級聯相比如何？
Astro 內容集合是明確的和型別安全的。與 11ty 隱式合併全域資料檔案、目錄資料和前置資料的方式不同，你使用 Zod 驗證定義架構。你的 IDE 自動完成欄位名稱。如果內容不符合架構，構建失敗。它更結構化，但在出現問題時遠容易除錯。
遷移到 Astro 時，我的 URL 會改變嗎？
如果我們正確處理，不會。Astro 支援基於檔案的路由和自訂路由，可以複製任何 Eleventy 永久連結結構。我們在稽核階段對應每個現有 URL，並確保 1:1 同位性。任何確實需要更改的 URL 都會在託管級別配置適當的 301 重新導向。
對於靜態網站，Astro 實際上比 Eleventy 快嗎？
對於內容繁重的網站，構建時間相當 — 兩者都是快速靜態網站產生器。真正的差異在輸出中顯示。Astro 的內建影像最佳化、CSS 組合和自動資源雜湊產生更好的 Lighthouse 分數，而無需 Eleventy 需要的手動工具設定。預期開箱即用達到 90-100 的 Lighthouse 分數。
我的 Eleventy 簡碼和篩選會發生什麼？
簡碼變成具有型別化 prop 的 Astro 元件 — 真正的升級。Nunjucks/Liquid 篩選轉換為在 Astro 的前置資料或模板表達式中直接呼叫的標準 JavaScript 函式。邏輯保持相同。語法變得更乾淨且更容易維護。
遷移後，我可以將 React 或 Svelte 元件新增至我的 Astro 網站嗎？
絕對可以。Astro 的島嶼架構讓你新增 React、Svelte、Vue、Solid 或 Preact 元件，這些元件獨立註水。這是相對於 Eleventy 的最大升級之一 — 使用框架元件逐進增強，而無需將完整用戶端執行時運送到每個頁面。
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.