Cómo desplegué mi primera web con Astro y Vercel: Un viaje de aprendizaje

El reto: Lanzar mi primera web

Hace poco decidí que era hora de profesionalizar mi presencia online. El objetivo era claro: crear un “hub” técnico personal que fuera rápido, escalable y, sobre todo, fácil de gestionar. Para ello, elegí Astro como framework y Vercel como plataforma de despliegue.

Este post es un resumen del proceso, los errores que cometí y las soluciones que encontré para que otros no tengan que pasar por lo mismo.

1. El entorno de desarrollo

Comencé inicializando mi proyecto con npm. Lo primero que aprendí es que la estructura de carpetas es sagrada:

  • src/: Donde vive el contenido real.
  • public/: Recursos estáticos.
  • package.json: El corazón del proyecto, donde definimos qué herramientas necesitamos.

2. Git y GitHub: Control de versiones

El primer escollo fue el error fatal: not a git repository. Aprendí que cada proyecto necesita su propia “caja” de historial.

  • Comando clave: git init crea el vínculo local.
  • Conexión: Usar git remote add origin fue esencial para conectar mi PC con mi repositorio privado de GitHub.

3. El despliegue en Vercel: Superando obstáculos

Vercel es increíblemente potente, pero es exigente con la configuración. Durante el proceso me enfrenté a dos retos importantes:

Error 127: “Command not found”

Aprendí que Vercel construye el proyecto en un entorno “limpio”. Si no le indicas explícitamente cómo instalar las dependencias, fallará. La solución fue asegurar que astro estuviera en mis dependencies en package.json y usar el comando de instalación correcto.

Error ENOENT: Archivo no encontrado

Esto ocurrió por una mala estructura de carpetas. La lección aprendida: el package.json siempre debe estar en la raíz del repositorio.

4. La lección principal

Lo más importante que me llevo de este proceso es que el despliegue es una parte tan importante como el código mismo. Configurar bien los scripts en el package.json y entender qué archivos ignora .gitignore es lo que diferencia a un proyecto caótico de uno profesional.

¿Qué sigue ahora?

Ahora que la web está en la nube y conectada a mi dominio, mi siguiente paso es:

  1. Mejorar el diseño con CSS.
  2. Implementar soporte para más formatos de contenido (como MDX).
  3. Seguir escribiendo sobre lo que voy aprendiendo.

Gracias por acompañarme en este primer paso. ¡Bienvenidos a mi hub técnico!