Si el VSCode no les reconoce la sintaxis de los archivos .mdx, instalen la siguiente extensión para que puedan reconocer el formato de Markdown:
https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 3
Preguntas 0
Si el VSCode no les reconoce la sintaxis de los archivos .mdx, instalen la siguiente extensión para que puedan reconocer el formato de Markdown:
https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx
Para la instalación automática de MDX en Astro:
npx astro add mdx
Con esto, Astro automáticamente instalará y configurará los archivos necesarios para que funcionen los archivos MDX, también agregará la configuración necesario en el archivo de configuración de Astro de forma automática.
Para usar plantillas o layouts dentro de un archivo .mdx
usamos el frontmatter layout
.
https://docs.astro.build/en/core-concepts/layouts/#markdownmdx-layouts
---
title: "Contact"
layout: "../layouts/Base.astro"
---
export const date = new Date('2025-08-08'); // JS
# Hola Mundo!
La hora de publicación de este blog es: {date}
```jsx
const date = new Date('2024-01-01')
```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.