Cómo monté mi sitio personal con Astro y por qué lo recomiendo

Después de probar varias opciones (Next.js, Hugo, Gatsby), finalmente elegí Astro para mi sitio personal. En este post te cuento por qué.

¿Por qué Astro?

Astro tiene algo que ningún otro framework me daba: la posibilidad de escribir contenido en Markdown, generar páginas estáticas ultra rápidas, y solo cargar JavaScript cuando realmente lo necesito.

Las ventajas que encontré

  • Rendimiento de fábrica: sin JavaScript innecesario en el cliente
  • Content Collections: schemas tipados con Zod para mi blog y proyectos
  • Islands Architecture: puedo usar componentes interactivos solo donde hagan falta
  • MDX nativo: código ejecutable dentro de mis posts

El stack que elegí

HerramientaMotivo
AstroFramework principal
Tailwind v4Utility-first CSS moderno
TypeScriptTipos estrictos en todo el proyecto
VercelDeploy automático + Analytics

Cómo organicé el contenido

Uso Content Collections de Astro para tipar el frontmatter de cada post. Esto me da autocompletado, validación y errores en build time si algo falta.

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().max(160),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

Lo que viene

Próximamente quiero agregar:

  • Un sistema de likes con Neon Postgres
  • Generación dinámica de Open Graph images
  • Una sección “Ask About Me” con IA

Si estás pensando en armar tu propio sitio, Astro es una excelente opción. Rápido, flexible y con una comunidad increíble.