Migrando do VuePress

VuePress é um gerador de sites estáticos de código aberto construído em Vue.

Semelhanças Chave entre VuePress e Astro

VuePress e Astro compartilham algumas semelhanças que ajudarão você a migrar seu projeto:

Tanto VuePress quanto Astro são modernos geradores de sites estáticos em JavaScript, com estruturas de arquivos de projeto semelhantes. Ambos utilizam uma pasta especial src/pages/ para roteamento baseado em arquivos. Criar e gerenciar páginas em seu site deverá parecer familiar.
Astro e VuePress são ambos projetados para sites focados em conteúdo, com excelente suporte integrado para arquivos Markdown. Escrever em Markdown será algo familiar, e você poderá manter seu conteúdo existente.
Astro possui uma integração oficial para usar componentes Vue e suporta a instalação de pacotes NPM, incluindo vários para Vue. Você poderá escrever componentes de UI Vue, e talvez manter alguns ou todos os seus componentes e dependências Vue existentes.

Diferenças Chave entre VuePress e Astro

Ao reconstruir seu site VuePress no Astro, você notará algumas diferenças importantes.

VuePress é uma aplicação de página única (SPA) baseada em Vue. Os sites Astro são aplicativos multipáginas construídos usando componentes .astro, mas também podem suportar React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit e modelos em HTML puro.
Modelos de layout: Sites VuePress são criados usando arquivos Markdown (.md) para o conteúdo da página e modelos HTML (.html) para o layout. Astro é baseado em componentes e utiliza componentes Astro, que incluem modelos HTML para páginas, layouts e elementos individuais da interface do usuário. Astro também pode criar páginas a partir de arquivos .md e .mdx, usando um componente de layout Astro para envelopar o conteúdo Markdown em um modelo de página.
VuePress foi projetado para construir sites focados em conteúdo e centrados em Markdown, e tem alguns recursos específicos de sites de documentação integrados que você precisaria construir manualmente no Astro. Em vez disso, Astro oferece alguns recursos específicos de documentação através de um tema oficial de documentação. Este website foi a inspiração para esse modelo! Você também pode encontrar mais temas de documentação da comunidade com recursos integrados em nossa Vitrine de Temas.

Migrar de VuePress para Astro

Para converter um site de documentação VuePress para Astro, comece com nosso modelo inicial de documentação Starlight, ou explore mais temas de documentação da comunidade em nossa vitrine de temas.

Você pode passar um argumento --template ao comando create astro para iniciar um novo projeto Astro com um de nossos modelos oficiais. Ou você pode iniciar um novo projeto a partir de qualquer repositório Astro existente no GitHub.

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

Traga seus arquivos de conteúdo Markdown existentes para criar páginas em Markdown. Você ainda pode aproveitar o roteamento baseado em arquivos movendo esses documentos de docs no VuePress para src/pages/ no Astro. Crie pastas com nomes que correspondam ao seu projeto VuePress existente, e você deverá conseguir manter suas URLs atuais.

VuePress, ou qualquer tema que você tenha instalado, provavelmente gerenciava grande parte do layout e dos metadados do seu site para você. Talvez você queira ler sobre como construir Layouts Astro como invólucros de páginas Markdown para ver como gerenciar modelos por conta própria no Astro, incluindo o <head> da sua página.

Você pode encontrar o modelo inicial de documentação do Astro e outros modelos em astro.new. Você encontrará um link para o repositório GitHub de cada projeto, bem como links para abrir diretamente um projeto funcional em ambientes de desenvolvimento online como StackBlitz, CodeSandbox e Gitpod.