🚀 Astro: Framework Web y Arquitectura de Contenidos

Núcleo del Portal Web de Dev Env Pro

Astro es el framework web moderno seleccionado para el portal de cursos y documentación. Su arquitectura orientada a contenidos permite generar sitios 100% estáticos con cero JavaScript por defecto en el cliente, logrando puntuaciones perfectas de 100/100 en Google Lighthouse.

---

⚡ Razones de Elección para el Proyecto

1. Salida Estática Pura (output: 'static'):
   • No requiere servidor Node.js en vivo. Todo el portal se compila a HTML/CSS estático en la carpeta dist/, lo que permite alojarlo gratis en Cloudflare Pages.
2. Integración Nativa con MDX (@astrojs/mdx):
   • Permite redactar las lecciones en Markdown enriquecido e insertar componentes interactivos (botones de copiado, emuladores de terminal, alertas visuales).
3. Pipeline de Markdown Unificado:
   • Procesamiento de cabeceras mediante rehype-autolink-headings, rehype-slug, y resaltado de sintaxis de código con rehype-highlight.
4. Islands Architecture:
   • Si se requiere interactividad (como el modal de búsqueda Cmd+K con Fuse.js), se hidrata únicamente ese componente específico sin cargar código innecesario.

---

⚙️ Configuración Clave (astro.config.mjs)

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  site: 'https://mise-curso.pages.dev',
  output: 'static',
  integrations: [mdx(), sitemap()],
  vite: {
    plugins: [tailwindcss()]
  }
});

---

🧭 Conexiones Internas

• Estilos con Tailwind CSS v4
• Linter y Formateador Biome
• Componentes y Lecciones en MDX
• Despliegue en Cloudflare Pages
• Repositorio del Proyecto