Migrar desde Hugo
Hugo es un generador de sitios estáticos de código abierto construido sobre Go.
Similitudes clave entre Hugo y Astro
Sección titulada “Similitudes clave entre Hugo y Astro”Hugo y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:
-
Hugo y Astro son ambos generadores de sitios estáticos modernos, idealmente adecuados para sitios web orientados a contenido como blogs.
-
Tanto Hugo como Astro te permiten crear tu contenido en Markdown. Sin embargo, Hugo incluye varias propiedades especiales de frontmatter y te permite escribir frontmatter en YAML, TOML o JSON. Aunque muchas de tus propiedades de frontmatter existentes de Hugo no serán "especiales" en Astro, puedes continuar usando tus archivos Markdown existentes y tus valores de frontmatter YAML (o TOML).
-
Tanto Hugo como Astro te permiten mejorar tu sitio con una variedad de integraciones y paquetes externos.
Diferencias clave entre Hugo y Astro
Sección titulada “Diferencias clave entre Hugo y Astro”Cuando reconstruyas tu sitio de Hugo en Astro, notarás algunas diferencias importantes:
-
Hugo usa Go Templating para plantillas de página. La sintaxis de Astro es un superset similar a JSX de HTML.
-
Astro no usa shortcodes para contenido dinámico en archivos Markdown estándar, pero la integración MDX de Astro sí te permite usar JSX e importar componentes en archivos MDX.
-
Mientras que Hugo puede usar "partials" para elementos de layout reutilizables, Astro es completamente basado en componentes. Cualquier archivo
.astropuede ser un componente, un layout o una página completa, e puede importar y renderizar cualquier otro componente de Astro. Los componentes de Astro también pueden incluir otros componentes de frameworks de UI (p. ej. React, Svelte, Vue, Solid) así como contenido o metadatos de otros archivos en tu proyecto, como Markdown o MDX.
Cambiar de Hugo a Astro
Sección titulada “Cambiar de Hugo a Astro”Para convertir un blog de Hugo a Astro, comienza con nuestra plantilla de inicio del tema de blog, o explora más temas de blog de la comunidad en nuestro showcase de temas.
Puedes pasar un argumento --template al comando create astro para iniciar un nuevo proyecto de Astro con uno de nuestros starters oficiales. O, puedes iniciar un nuevo proyecto desde cualquier repositorio existente de Astro en GitHub.
npm create astro@latest -- --template blogpnpm create astro@latest --template blogyarn create astro --template blogTrae tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para crear páginas Markdown o MDX. Astro permite frontmatter YAML o TOML en estos archivos, así que si estás usando frontmatter JSON, necesitarás convertirlo.
Para continuar usando contenido dinámico como variables, expresiones o componentes de UI dentro de tu contenido Markdown, añade la integración opcional MDX de Astro y convierte tus archivos Markdown existentes a páginas MDX. MDX soporta frontmatter YAML y TOML, así que puedes conservar tus propiedades de frontmatter existentes. Pero, debes reemplazar cualquier sintaxis de shortcode con la propia sintaxis de MDX, que permite expresiones JSX y/o imports de componentes.
Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, consulta más plantillas oficiales de inicio en astro.new. Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un clic para abrir un proyecto funcional en los entornos de desarrollo en línea StackBlitz y CodeSandbox.
