Migration depuis VuePress

VuePress est un générateur de sites statiques open-source basé sur Vue.

Principales similitudes entre VuePress et Astro

VuePress et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

VuePress et Astro sont tous deux des générateurs de sites statiques Javascript modernes avec des structures de fichiers de projet similaires. Tous deux utilisent un dossier spécial src/pages/ pour le routage basé sur les fichiers. La création et la gestion des pages de votre site devraient vous sembler familières.
Astro et VuePress sont tous deux conçus pour les sites web axés sur le contenu, avec un excellent support intégré pour les fichiers Markdown. L’écriture en Markdown vous sera familière et vous pourrez conserver votre contenu existant.
Astro possède une intégration officielle pour l’utilisation des composants Vue et prend en charge l’installation des paquets NPM, dont plusieurs pour Vue. Vous serez en mesure d’écrire des composants d’interface utilisateur Vue et pourrez conserver tout ou partie de vos composants et dépendances Vue existants.

Principales différences entre VuePress et Astro

Lorsque vous reconstruisez votre site VuePress dans Astro, vous remarquerez quelques différences importantes.

VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l’aide de composants .astro, mais peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS et le templating HTML brut.
Modèles de mise en page : Les sites VuePress sont créés à l’aide de fichiers Markdown (.md) pour le contenu des pages et de modèles HTML (.html) pour la mise en page. Astro est basé sur des composants et utilise des composants Astro, qui incluent des modèles HTML pour les pages, les mises en page et les éléments individuels de l’interface utilisateur. Astro peut également créer des pages à partir de fichiers .md et .mdx, en utilisant un composant de mise en page Astro pour envelopper le contenu Markdown dans un modèle de page.
VuePress a été conçu pour construire des sites à fort contenu, centrés sur le Markdown, et possède des fonctionnalités intégrées spécifiques à la documentation que vous devriez construire vous-même dans Astro. Au lieu de cela, Astro offre des fonctionnalités spécifiques à la documentation par le biais d’un modèle de démarrage officiel Starlight. Ce site web a été la source d’inspiration de ce modèle ! Vous pouvez également trouver d’autres thèmes de documentation communautaires avec des fonctionnalités intégrées dans notre vitrine de thèmes.

Passer de VuePress à Astro

Pour convertir un site de documentation VuePress en Astro, commencez par notre modèle officiel de démarrage Starlight, ou explorez d’autres thèmes de documentation 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 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 starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

Apportez vos fichiers de contenu Markdown existants à créer des pages Markdown. Vous pouvez toujours profiter du routage basé sur les fichiers en déplaçant ces documents de docs dans VuePress vers src/pages/ dans Astro. Créez des dossiers avec des noms qui correspondent à votre projet VuePress existant, et vous devriez être en mesure de conserver vos URLs existantes.

VuePress, ou tout autre thème que vous avez installé, a probablement géré une grande partie de la mise en page et des métadonnées de votre site pour vous. Vous pouvez lire l’article sur la construction de Layouts Astro en tant qu’enveloppes de page Markdown pour voir comment gérer vous-même le templating dans Astro, y compris votre page <head>.

Vous pouvez trouver la documentation de démarrage d’Astro, ainsi que d’autres modèles, 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.