Migration depuis Eleventy

Eleventy est un générateur de sites statiques open source qui fonctionne avec plusieurs langages de modèles.

Principales similitudes entre Eleventy (11ty) et Astro

Eleventy (11ty) et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

Astro et Eleventy sont tous deux des générateurs de sites modernes, basés sur JavaScript (Jamstack).
Astro et Eleventy vous permettent tous deux d’utiliser un CMS headless, des APIs ou des fichiers Markdown pour les données. Vous pouvez continuer à utiliser votre système préféré de création de contenu et conserver votre contenu existant.

Principales différences entre Eleventy (11ty) et Astro

Lorsque vous recréez votre site Eleventy (11ty) dans Astro, vous remarquerez quelques différences importantes :

Eleventy prend en charge une variété de langages de création de modèles. Astro prend en charge l’utilisation de composants de plusieurs frameworks JS populaires (par exemple React, Svelte, Vue, Solid), mais utilise des mises en page, des pages et des composants Astro pour la plupart des modèles de pages.
Astro utilise un répertoire src/ pour tous les fichiers, y compris les métadonnées du site, qui sont disponibles pour être interrogés et traités pendant la création du site. Dans ce dossier se trouve un dossier spécial src/pages/ pour le routage basé sur les fichiers.
Astro utilise un dossier public/ pour les ressources statiques qui n’ont pas besoin d’être traitées ou transformées pendant la compilation.
Dans Eleventy, le regroupement du CSS, du JavaScript et des autres ressources doit être configuré manuellement. Astro gère cela pour vous dès le départ.

Passer d’Eleventy à Astro

Pour convertir un blog Eleventy en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d’autres thèmes de blog communautaires dans notre vitrine de thèmes.

Vous pouvez passer un argument --template à la commande create astro pour démarrer un nouveau projet Astro avec l’un de nos modèles de démarrage officiels. Vous pouvez aussi démarrer un nouveau projet à partir de n’importe quel dépôt Astro existant sur GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu pour créer des pages Markdown ou MDX.

Votre projet Eleventy vous a permis d’utiliser une variété de langages de création de modèles pour créer votre site. Dans un projet Astro, la création de modèles pour vos pages sera principalement réalisée à l’aide de composants Astro, qui peuvent être utilisés comme éléments d’interface utilisateur, de mises en page et même de pages complètes. Vous pouvez explorer la syntaxe des composants Astro pour découvrir comment créer des modèles dans Astro en utilisant des composants.

Pour convertir d’autres types de sites, comme un portfolio ou un site de documentation, consultez d’autres modèles de départ officiels sur astro.new. Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.