Crear contenido con Markdown en Astro te permite construir páginas y secciones de forma rápida, manteniendo una estructura limpia y aprovechando el enrutamiento nativo del framework. Si estás armando una tienda en línea, un blog o una landing page, aquí entiendes cómo conectar archivos .md con layouts dinámicos para entregar contenido optimizado a tus usuarios.

¿Por qué usar Markdown en un proyecto Astro?

Astro trae soporte nativo para Markdown, lo que significa que puedes escribir documentos legibles, jerárquicos y listos para renderizarse como páginas web sin configuración extra.

Markdown se ha vuelto un estándar para crear contenido porque maneja títulos, párrafos, enlaces, código e imágenes con una sintaxis mínima. Y aquí viene lo interesante: dentro de un archivo Markdown también puedes insertar HTML sin que se rompa nada, lo que te abre la puerta a embeber videos, iframes o bloques personalizados.

¿Qué es Markdown en Astro? Es el sistema de archivos .md que Astro renderiza automáticamente como páginas. Cada archivo dentro de src/pages/ se convierte en una ruta accesible desde el navegador.

¿Qué ventajas extra ofrece MDX frente a Markdown?

MDX es una integración que extiende Markdown para soportar variables y acciones de JavaScript dentro del mismo archivo. Lo agregas cuando necesitas más dinamismo, por ejemplo, para inyectar componentes interactivos en medio de un artículo.

¿Cómo creo mi primer archivo Markdown en Astro?

Dentro de src/pages/ creas una carpeta llamada blog y, adentro, un archivo helloworld.md. Esa ubicación se traduce automáticamente en la ruta /blog/hello-world de tu sitio.

Para que el archivo cobre vida, abres un bloque de configuración en la parte superior llamado front matter. Ahí defines metadatos como:

• title: el título del artículo.
• author: quién lo escribió.
• date: la fecha de publicación.
• image: una imagen destacada.
• tags: las etiquetas asociadas.

Después del bloque de configuración, escribes el contenido del artículo. Por ejemplo, Mi primera sección del blog. Si guardas y entras a /blog/hello-world, ya verás el contenido renderizado.

¿Puedo insertar HTML dentro de Markdown?

Sí. Si copias el iframe de un video de YouTube desde la opción compartir > insertar, lo pegas dentro del .md y Astro lo renderiza igual. Markdown da soporte nativo a HTML, así que puedes mezclar ambos sin fricción.

¿Cómo conecto un layout para mostrar el title del front matter?

Al principio notas algo raro: el title aparece en el front matter, pero no se imprime en la página. Eso pasa porque hace falta conectar el archivo Markdown con un layout que sepa leer esos metadatos.

El flujo tiene tres pasos clave:

1. Modificar tu layout Base.astro para recibir las props de Astro.
2. Extraer la variable frontmatter desde Astro.props.
3. Indicarle al archivo Markdown qué layout debe usar.

Dentro de Base.astro declaras una constante que trae frontmatter desde Astro.props. Con eso ya puedes acceder a frontmatter.title y pasarlo como cabecera del documento o como prop al header del sitio.

Luego, en helloworld.md, agregas en el front matter una línea que apunte al layout:

markdown

layout: ../../layouts/Base.astro title: Hello World author: Óscar

Con esa conexión, el Markdown se vuelve dinámico: cualquier variable que definas arriba queda disponible dentro del layout.

¿Qué es el front matter en Astro? Es el bloque de metadatos al inicio de un archivo Markdown, delimitado por ---, donde defines variables como título, autor o layout que después usas en el renderizado.

¿Cómo mejoro la presentación del contenido con Tailwind?

El contenido aparece, pero sin estilos se ve plano. Para darle estructura visual, envuelves el <slot /> del layout dentro de un <main> y le aplicas clases utilitarias.

Un ejemplo básico:

astro

<main class="container mx-auto p-4"> <slot /> </main>

Con container mx-auto centras el contenido y con p-4 agregas un padding cómodo. A partir de ahí, el artículo empieza a tomar forma y respeta las jerarquías de Markdown.

¿Cómo aprovecho IA para generar artículos en Markdown?

Un truco que acelera el flujo: pídele a ChatGPT que te entregue contenido directamente en formato Markdown. Por ejemplo, puedes pedir crea un artículo para un blog acerca de la importancia de implementar inteligencia artificial en una empresa y cerrar con la instrucción entrégalo en formato Markdown.

Copias el resultado, lo pegas dentro de tu archivo .md, mantienes el front matter con el layout y los metadatos, y al final agregas el video como complemento. En segundos tienes un artículo completo listo para renderizar.

Eso sí, el formato visual todavía necesita ajustes para verse profesional. La siguiente clase se enfoca justo en eso: llevar el contenido a un estándar pulido. Cuéntame en los comentarios cómo te quedó tu primer artículo y comparte tu bloque de código para que otros estudiantes se inspiren.