Migration depuis Eleventy

Eleventy est un générateur de site statique open-source qui fonctionne avec plusieurs langages de template.

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 constructeurs 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 reconstruisez votre site Eleventy (11ty) dans Astro, vous remarquerez quelques différences importantes :

Eleventy supporte une variété de langages de modélisation. Astro supporte les composants de plusieurs frameworks JS populaires (par exemple React, Svelte, Vue, Solid), mais utilise des mises en page Astro, des pages et des composants pour la plupart des templates 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 construction 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 actifs statiques qui n’ont pas besoin d’être traités ou transformés pendant la construction.
Dans Eleventy, le regroupement des fichiers CSS, JavaScript et autres actifs doit être configurés manuellement. Astro s’en charge 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 templates pour construire votre site. Dans un projet Astro, la modélisation de vos pages sera principalement réalisée à l’aide de composants Astro, qui peuvent être utilisés comme éléments d’interface utilisateur, de mise en page et même de pages complètes. Vous pouvez explorer la syntaxe des composants Astro pour voir 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 StackBlitz, CodeSandbox et Gitpod.