Migrando desde Hugo

Hugo es un generador de sitios estáticos de codigo abierto construido en Go.

Principales similitudes entre Hugo y Astro

Hugo y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

Hugo y Astro son generadores modernos de sitios estáticos, idealmente adaptados para sitios web orientados al contenido, como los blogs.
Hugo y Astro permiten crear tu contenido en Markdown. Sin embargo, Hugo incluye varias propiedades especiales en el frontmatter y permite escribir este en YAML, TOML o JSON. Aunque muchas de las propiedades existentes de tu frontmatter de Hugo no serán “especiales” en Astro, puedes seguir utilizando tus archivos Markdown existentes y los valores del frontmatter en YAML.
Hugo y Astro permiten mejorar tu sitio con una variedad de integraciones y paquetes externos.

Principales diferencias entre Hugo y Astro

Cuando reconstruyas tu sitio de Hugo a Astro, notarás algunas diferencias importantes:

Hugo utiliza Go Templating para la generación de páginas. La sintaxis de Astro es un superset de HTML similar a JSX.
Astro no utiliza shortcodes para insertar contenido dinámico en archivos Markdown estándar, pero la integración de MDX en Astro te permite usar JSX e importar componentes en archivos MDX.
Mientras que en Hugo se pueden usar “parciales” para elementos reutilizables del diseño, Astro está completamente basado en componentes. Cualquier archivo .astro puede ser un componente, diseño o una página completa, y 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.

Migrar de Hugo a Astro

Para migrar un blog de Hugo a Astro, empieza con nuestra plantilla inicial para blogs, o explora más temas de la comunidad para blogs en nuestro mostrador de temas.

Puedes pasar el argumento --template al comando create astro para empezar un nuevo proyecto de Astro con una de nuestras plantillas oficiales. O, puedes comenzar un nuevo proyecto desde cualquier repositorio de Astro existente en GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Lleva tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para crear páginas en Markdown o MDX. Es posible que necesites convertir tu frontmatter a YAML, ya que Astro solo permite YAML frontmatter en estos archivos.

Para seguir utilizando contenido dinámico como variables, expresiones o componentes de la UI dentro del contenido de tu Markdown, añade la integración opcional MDX de Astro y convierte tus archivos Markdown existentes a páginas MDX. MDX soporta el frontmatter en YAML, para que puedas mantener las propiedades existentes de tu frontmatter. Pero, tienes que remplazar cualquier shortcode con la propia sintaxis de MDX, lo que permite expresiones JSX y/o importaciones de componentes.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentatión, mira 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 solo clic para abrir un proyecto de trabajo en los entornos de desarrollo en línea de StackBlitz, CodeSandbox y Gitpod.