Migrate Eleventy (11ty) to Astro

Eleventy is a solid static site generator. It's minimal, fast, and it respects your content by keeping it in standard template languages. If you've been running an 11ty site, you probably chose it for those exact reasons.

So why move?

Astro gives you everything Eleventy does — zero JS by default, static-first output, fast builds — plus a component model, built-in asset optimization, type-safe content collections, and first-class framework support. Same philosophy, but with a much better developer experience.

We've migrated dozens of Eleventy sites to Astro. It's one of the smoothest transitions we handle because the mental models align so closely. Both tools respect static output. Both ship minimal JavaScript. The difference shows up when you need more.

The Pain Points with Eleventy

Template Language Fragmentation

Eleventy supports HTML, Markdown, Nunjucks, Liquid, Handlebars, Mustache, EJS, Haml, Pug, WebC, and custom languages. That's marketed as flexibility. In practice, it creates fragmentation. Your includes might be Nunjucks, your layouts Liquid, your data files JavaScript. New developers joining the project spend their first week just figuring out which template language does what.

Nunjucks itself is effectively unmaintained — the Mozilla project hasn't seen significant updates in years. Liquid's 11ty implementation doesn't fully support named arguments. WebC was introduced as a modern alternative but hasn't gained broad adoption.

Manual Asset Pipeline

Eleventy deliberately doesn't handle CSS, JavaScript, or image optimization. You wire up your own build pipeline — typically PostCSS, esbuild or Vite, and the eleventy-img plugin. Powerful if you know what you're doing, but every project starts with significant tooling configuration before you write a single line of content.

The Data Cascade Complexity

The 11ty data cascade is powerful but opaque. Data flows in from global data files, directory data files, template front matter, computed data, and JavaScript data files — all merging in a specific priority order. Debugging data issues means understanding the entire cascade. It trips up even experienced developers.

No Component Model

Eleventy uses includes and shortcodes for reusable UI. These work, but they're not components. You can't pass typed props, colocate styles, or progressively enhance specific UI elements with client-side interactivity without building a custom solution from scratch.

What Astro Gives You

Real Components, Zero Runtime

Astro components look like HTML with a frontmatter script block. They support typed props, scoped styles, and slot-based composition. They compile to zero JavaScript by default — same as your Nunjucks templates, but with an actual component model behind them.

---
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 { /* scoped automatically */ }
</style>

Content Collections with Type Safety

Astro's content collections replace the 11ty data cascade with a schema-validated, type-safe system. You define your content schema using Zod, and Astro validates every piece of content at build time. No more surprises from missing frontmatter fields discovered in production.

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false),
  }),
});

This swaps the implicit data cascade for explicit, validated schemas. Your IDE autocompletes content fields. Build errors catch missing data before deployment.

Built-in Asset Optimization

Astro handles CSS bundling, JavaScript processing, and image optimization out of the box. The <Image /> component generates responsive images with proper srcset, converts to WebP/AVIF, and handles lazy loading — no plugin configuration required.

Framework Islands When You Need Them

Need client-side interactivity — a search widget, an interactive chart, a form with validation? Astro's island architecture lets you drop in React, Svelte, Vue, or Solid components that hydrate independently. With Eleventy, every interactive element requires custom JavaScript bundling. You build that infrastructure yourself.

Our Migration Process

Phase 1: Audit and Architecture (Week 1)

We analyze your existing 11ty project structure — template languages in use, data cascade dependencies, shortcodes, plugins, and custom filters. Every Nunjucks/Liquid template gets mapped to its Astro component equivalent, and we document the full data flow before writing a line of new code.

Phase 2: Content Migration (Week 1-2)

Your Markdown content transfers directly — Astro reads the same frontmatter format. We define Zod schemas based on your existing frontmatter patterns and set up content collections. If you're using 11ty's computed data or JavaScript data files, we convert those to Astro's data loading patterns.

Template conversion follows predictable patterns:

Eleventy	Astro
{% include "header.njk" %}	<Header />
{% block content %}{% endblock %}	<slot />
{{ variable | filter }}	{variable} with JS transforms
{% for item in collection %}	{collection.map(item => ...)}
Shortcodes	Astro components
_data/ global data	Astro.glob() or content collections

Phase 3: Design and Component Build (Week 2-3)

We rebuild your templates as Astro components with scoped styles. This is where the upgrade pays off. Templates that were awkward Nunjucks includes become clean, typed, composable units. We implement responsive images, optimize fonts, and add any interactive islands your site needs.

Phase 4: Testing and SEO Verification (Week 3-4)

Full Lighthouse audits. Every URL validated against your existing sitemap. Redirects tested. Structured data verified. We check that RSS feeds, social meta tags, and canonical URLs all match your existing setup before anything goes live.

SEO Preservation Strategy

Both Eleventy and Astro generate static HTML, which makes SEO migration far simpler than moving from a client-rendered framework. Here's what we specifically handle:

• URL parity: We map every existing URL and ensure identical paths in Astro. If your 11ty site uses custom permalink structures, we replicate them exactly.
• 301 redirects: For any URLs that must change, we configure proper redirects at the hosting level.
• Sitemap generation: Astro's @astrojs/sitemap integration generates an accurate sitemap automatically.
• Meta tags: All title tags, meta descriptions, Open Graph tags, and structured data transfer to Astro's <head> management.
• Performance gains: Built-in image optimization and asset bundling typically improve Core Web Vitals, which feeds back into search rankings.

Timeline and Pricing

Eleventy to Astro migrations are among our fastest. Content transfers with minimal changes, and template conversion follows mechanical patterns. The philosophies are close enough that there's no fundamental rethinking required.

• Small sites (under 20 templates, blog/docs): 2-3 weeks, starting at $4,000
• Medium sites (20-50 templates, multiple content types): 3-5 weeks, starting at $8,000
• Large sites (50+ templates, complex data relationships, interactive features): 5-8 weeks, starting at $15,000

Every migration starts with a free audit — we assess your current 11ty setup and produce a detailed scope document. No surprises.