Cómo construí aitorivera.com con Astro, Sanity y Vercel: aprendizajes de un desarrollador Django

Durante años he sido desarrollador Django. Me he centrado sobre todo en el backend, modelando datos, creando APIs REST y gestionando procesos complejos. Django me ha dado solidez y estructura, pero también ha hecho que mi mirada hacia el frontend fuera siempre… mínima.

Lo máximo que había hecho era algo de CSS con Bootstrap, JavaScript nativo y algún toque de jQuery para pequeñas interacciones. Nunca me había sumergido en frameworks como React, Vue o Svelte.

Con el tiempo me di cuenta de algo: entender mejor el frontend me daría una visión mucho más completa y me permitiría crear experiencias más potentes y usables.

Así que decidí salir de mi zona de confort. Quería aprender cosas nuevas, experimentar con tecnologías modernas y entender cómo funciona el desarrollo frontend actual. Mi elección fue clara:

• Astro, para crear sitios web rápidos y ligeros.
• Sanity, un CMS headless flexible y totalmente personalizable.
• Vercel, una plataforma de despliegue pensada para proyectos modernos.

El resultado es aitorivera.com, mi web personal y también mi laboratorio técnico.

En este artículo te cuento por qué elegí este stack, cómo funciona la web por dentro, qué retos encontré y qué quiero mejorar en el futuro.

¿Por qué construirla desde cero?

Podría haber instalado WordPress con una plantilla moderna y tenerlo todo listo en unas horas. Pero eso habría sido solo una web más. No quería una solución rápida, quería un proyecto para aprender y experimentar.

Tomé esta decisión por cuatro razones muy claras:

1. Velocidad y rendimiento: quería una web que cargara casi instantáneamente, clave para la experiencia de usuario y el SEO.
2. Identidad visual propia: nada de plantillas prefabricadas. Necesitaba que reflejara mi personalidad y mis valores como desarrollador.
3. Flexibilidad para crecer: no quería solo una tarjeta de presentación, sino un espacio donde poder añadir blog, proyectos y recomendaciones.
4. Aprender de verdad: instalar un CMS clásico no me habría enseñado nada nuevo; construirla desde cero, sí.

Por todo esto aposté por un stack moderno que me diera control, libertad y la posibilidad de experimentar sin límites.

Arquitectura técnica: qué hay detrás

Aunque el resultado parezca sencillo, hay una arquitectura clara y optimizada detrás. El ecosistema principal es:

• Astro como motor de renderizado.
• Sanity.io como CMS headless.
• Vercel como plataforma de despliegue y gestión de DNS.
• Algunas integraciones complementarias para mejorar UX, analítica y mantenimiento.

El flujo es simple pero muy potente:

Sanity (contenido) → Astro (renderizado estático/dinámico) → Vercel (hosting y optimización)

En la práctica, los usuarios ven HTML estático superoptimizado, con pequeñas islas de interactividad en React solo donde realmente es necesario. Esto minimiza la cantidad de JavaScript cargado y garantiza máxima velocidad.

Astro: sitios ultrarrápidos y ligeros

Astro es un framework pensado para webs de contenido. Genera HTML puro y solo envía el JavaScript imprescindible.

En mi web, funciona así:

• Páginas como Sobre mí o el blog son 100% HTML estático.
• Componentes como el modal de contacto se renderizan con React y Radix UI, pero solo se cargan bajo demanda.
• Además, añadí Framer Motion para hacer transiciones y animaciones mucho más suaves que con CSS puro.

Así consigo una web minimalista, rápida y con pequeños detalles de interacción.

Sanity CMS: tu propio modelo de datos

Sanity es un CMS headless muy diferente a WordPress. No tienes un modelo predeterminado; eres tú quien define los schemas.

Esto me permitió:

• Crear tipos de datos personalizados para gestionar mejor los contenidos.
• Controlar cómo se muestran las traducciones, con total libertad para cada idioma.
• Renderizar contenido enriquecido directamente en Astro con astro-portabletext.

Así tengo un CMS muy flexible y escalable, perfecto para un proyecto que crecerá con el tiempo.

Multidioma con rutas SEO-friendly

La web es multidioma y actualmente funciona con rutas separadas:

• / para catalán
• /es para español
• /en para inglés

Este sistema es ideal para SEO, porque Google puede indexar cada versión de forma independiente. Pero tiene un inconveniente: cada cambio de idioma recarga toda la página.

Mi siguiente reto es implementar un cambio de idioma más fluido, donde solo se cargue el contenido sin hacer un refresh completo.

¿Por qué Vercel y no Netlify?

Inicialmente probé Netlify, pero Vercel me convenció rápidamente. Los motivos son claros:

• Integración directa con Astro y builds mucho más rápidos.
• Previsualizaciones automáticas por cada rama, ideales para probar cambios antes de publicarlos.
• Gestión sencilla de subdominios y DNS (aunque el dominio principal sigue en IONOS).
• Vercel Analytics y Speed Insights integrados, evitando dependencias externas.
• Optimización automática de imágenes y otros assets casi sin configuración.

Para un sitio ligero como este, Vercel es el match perfecto.

Integraciones que marcan la diferencia

Más allá del stack principal, añadí pequeñas herramientas que aportan mucho valor:

• Sentry para Astro → monitorización de errores en producción. Si algo falla, lo sé al instante.
• SpotlightJS → debugging visual de la UI y problemas de renderizado.
• Heroicons + Radix UI → componentes accesibles y consistentes sin reinventar la rueda.
• EmailJS → formulario de contacto funcional sin necesidad de backend propio.

UX y diseño: minimalismo con personalidad

Quería una web minimalista pero con detalles vivos, así que opté por:

• Color principal: índigo, que transmite calma y confianza.
• Modo claro/oscuro con transiciones suaves, evitando cambios bruscos.
• Microinteracciones con Framer Motion, para que al hacer scroll los elementos aparezcan con movimientos sutiles.
• Accesibilidad y buen contraste, para garantizar una lectura cómoda.

El resultado es una web clara, rápida y con una experiencia muy fluida.

Detalles especiales

Para que la web no fuera solo una estructura técnica, quise añadir detalles que marcaran la diferencia:

• Una página 404 con un minijuego, para hacer más agradable aterrizar en un enlace roto.
• Multidioma con rutas SEO-friendly (que pronto mejorará sin recarga).
• Analítica y rendimiento integrados con Vercel Analytics y Speed Insights.
• Monitorización de errores automática con Sentry.

Retos y aprendizajes

Pasar del mundo Django a Astro + Sanity me obligó a aprender cosas nuevas desde cero:

• Entender cómo funciona un CMS headless y diseñar schemas sin patrones predefinidos.
• Pensar en SEO multidioma y combinarlo con una buena UX.
• Coordinar varias integraciones sin que la web se vuelva pesada.

La conclusión es clara: no hay mejor manera de aprender que construyendo proyectos reales. La práctica acelera el aprendizaje mucho más que cualquier curso.

¿Qué vendrá después?

Esta web es solo el comienzo. Mi hoja de ruta es clara:

• Mejorar SEO y trabajar estrategias básicas de marketing digital.
• Añadir nuevas secciones, como proyectos y un espacio de testimonios y recomendaciones.
• Desarrollar un sistema multilingüe más fluido, sin recarga de página.
• Seguir puliendo la experiencia con nuevos detalles interactivos y componentes.

A medio plazo, quiero que aitorivera.com se convierta en el centro de una marca personal global, mucho más allá de un simple logotipo.

Conclusión: vale la pena salir de la zona de confort

Como desarrollador Django, atreverme con Astro, Sanity y Vercel ha sido una auténtica inyección de aprendizaje.

He aprendido a pensar diferente en el frontend, he visto el valor de diseñar contenido multilingüe con schemas propios y, sobre todo, he comprobado que la práctica es la mejor manera de crecer técnicamente.

La tecnología cambia constantemente, pero lo que permanece es la voluntad de usarla para mejorar lo que realmente importa.

Si quieres preguntarme algo o compartir tu experiencia, escríbeme en el formulario de contacto.

Preguntas frecuentes (FAQ)

• ¿Qué es Astro y por qué lo elegiste?
  Astro es un framework que genera HTML puro y solo envía el JavaScript imprescindible, lo que hace que las webs sean muy rápidas. Lo elegí porque quería máximo rendimiento sin complejidad innecesaria.
• ¿Por qué Sanity y no un CMS como WordPress?
  Porque Sanity es headless y flexible: puedes definir tus propios modelos de datos y controlar completamente cómo se muestran los contenidos.
• ¿Por qué Vercel en lugar de Netlify?
  Porque Vercel integra mejor con Astro, tiene builds más rápidos, previsualizaciones automáticas y herramientas de analítica integradas
• ¿Cuál es el siguiente paso para la web?
  Mejorar el SEO, añadir nuevas secciones, hacer más fluido el multidioma y seguir añadiendo pequeños detalles interactivos.