Construir un sitio web con contenido rico y bien estructurado es mucho más sencillo cuando aprovechas el soporte nativo de Markdown en Astro. Esta combinación permite crear páginas de blog, artículos y secciones dinámicas sin complicaciones, manteniendo una entrega rápida y directa al usuario.
¿Qué es Markdown y por qué Astro lo integra de forma nativa?
Markdown es un formato para crear documentos de manera simple y legible. Permite manejar títulos, descripciones, párrafos, código, enlaces y muchos otros elementos con una sintaxis mínima [01:50]. Hoy en día se ha convertido en un estándar para crear documentos, y existen múltiples herramientas que facilitan su escritura.
Astro ofrece soporte nativo para Markdown, lo que significa que puedes trabajar con archivos .md sin configuraciones adicionales. Además, existen integraciones como MDX que amplían las capacidades, permitiendo usar variables y acciones de JavaScript directamente dentro de archivos Markdown [02:30].
Un dato interesante es la posibilidad de utilizar herramientas de inteligencia artificial como ChatGPT para generar contenido en formato Markdown. Solo necesitas copiar el resultado y llevarlo directamente a tu archivo, ahorrando tiempo en la redacción [08:15].
¿Cómo se crea una página con Markdown en Astro?
El proceso es directo. Dentro de la carpeta src/pages, creas una subcarpeta (por ejemplo, blog) y dentro generas un archivo con extensión .md [02:55]. Al hacerlo, Astro aplica su sistema de enrutamiento basado en archivos: la ruta del archivo se convierte automáticamente en la URL de la página.
Por ejemplo, un archivo en pages/blog/HelloWorld.md será accesible en tusitio.com/blog/HelloWorld.
¿Qué es el frontmatter y cómo se configura?
Cada archivo Markdown puede incluir un bloque especial al inicio llamado frontmatter [03:10]. Este bloque, delimitado por tres guiones (---), permite definir metadatos del documento:
- title: el título de la página o artículo.
- layout: la referencia al layout de Astro que se utilizará.
- author: el nombre del autor.
- Fecha, imagen, etiquetas y cualquier otro dato necesario.
Estos valores se pueden leer desde el layout de Astro usando Astro.props, lo que permite inyectar información de forma dinámica en la estructura HTML [05:30].
¿Cómo conectar Markdown con un layout de Astro?
Para que el documento Markdown utilice un layout específico, debes indicarlo en el frontmatter con la propiedad layout apuntando a la ruta del archivo .astro correspondiente [06:25]. Dentro del layout, se extrae la información así:
javascript
const { frontmatter } = Astro.props;
Con esta constante puedes acceder a frontmatter.title, frontmatter.author y cualquier otra variable definida. Luego, estos valores se insertan dinámicamente en el HTML del layout, por ejemplo, en el <title> del documento o en el componente header [05:50].
¿Se puede usar HTML dentro de Markdown en Astro?
Sí. Markdown en Astro permite insertar bloques de HTML directamente, y estos se renderizan sin problema [04:20]. Un caso práctico mostrado es incrustar un video de YouTube copiando el código de embed (iframe) y pegándolo dentro del archivo .md. El resultado se presenta correctamente en la página.
Para mejorar la apariencia visual del contenido, se aprovecha Tailwind CSS aplicando clases directamente en el layout [07:25]:
container para contener el ancho.mx-auto para centrar horizontalmente.p-4 para agregar padding.
El elemento <slot> dentro del layout es donde Astro hace el render del contenido Markdown, funcionando como punto de inserción dinámico [07:35].
La combinación de Markdown, frontmatter dinámico, layouts reutilizables y Tailwind CSS abre un camino claro para construir sitios con contenido estructurado y visualmente ordenado. Si ya estás experimentando con estos archivos, comparte tu bloque de código y muestra cómo va quedando tu proyecto.
