Deployment General

Guía de Despliegue en Vercel

Este proyecto está configurado para desplegarse en Vercel con el adaptador de Astro.

Requisitos previos

1. Cuenta en Vercel
2. Cuenta en Resend para el envío de correos
3. Repositorio Git (GitHub, GitLab o Bitbucket)

Pasos para desplegar

1. Subir el código a un repositorio Git

Si aún no lo has hecho:

# Inicializar git (si no está inicializado)
git init

# Agregar el remote de tu repositorio
git remote add origin https://github.com/tu-usuario/teafirmo.git

# Subir los cambios
git push -u origin main

2. Importar proyecto en Vercel

1. Ve a vercel.com e inicia sesión
2. Haz clic en “Add New Project”
3. Importa tu repositorio de Git
4. Vercel detectará automáticamente que es un proyecto Astro

3. Configurar variables de entorno

En la configuración del proyecto en Vercel, agrega las siguientes variables de entorno:

RESEND_API_KEY=tu_api_key_de_resend

Para obtener tu API key de Resend:

1. Ve a resend.com/api-keys
2. Crea una nueva API key
3. Cópiala y pégala en Vercel

4. Desplegar

1. Haz clic en “Deploy”
2. Vercel construirá y desplegará tu proyecto automáticamente
3. Una vez completado, recibirás una URL de producción (ej: teafirmo.vercel.app)

5. Conectar dominio personalizado

Para usar tu dominio teafirmo.com:

1. En Vercel, ve a tu proyecto → Settings → Domains
2. Agrega tu dominio: teafirmo.com y www.teafirmo.com
3. Vercel te dará instrucciones para configurar los DNS
4. En tu proveedor de DNS (donde compraste el dominio), agrega:
   • Registro A para teafirmo.com apuntando a 76.76.21.21
   • Registro CNAME para www apuntando a cname.vercel-dns.com
5. Espera a que los cambios DNS se propaguen (puede tomar hasta 48 horas, pero usualmente es más rápido)

6. Verificar el despliegue

1. Visita tu dominio: https://teafirmo.com
2. Prueba el formulario de contacto para verificar que los correos se envíen correctamente
3. Verifica que las imágenes WebP se carguen correctamente

Actualizaciones futuras

Cada vez que hagas git push a la rama main, Vercel automáticamente:

1. Construirá la nueva versión
2. La desplegará en producción
3. Te notificará del estado del despliegue

Configuración de Resend con dominio personalizado (Recomendado)

Para evitar que los correos vayan a spam:

1. En Resend, agrega tu dominio teafirmo.com
2. Configura los registros DNS (SPF, DKIM, DMARC) que Resend te proporcione
3. Actualiza el archivo src/pages/api/contact.ts línea 28:

   from: 'Te Afirmo <noreply@teafirmo.com>',

4. Haz commit y push de los cambios

Monitoreo

Vercel proporciona:

• Analytics: Visitas, rendimiento, etc.
• Logs: Ver logs de funciones serverless
• Speed Insights: Métricas de rendimiento

Puedes acceder a todo esto desde el dashboard de Vercel.

Solución de problemas

Error: “Module not found”

• Asegúrate de que todas las dependencias estén en package.json
• Ejecuta bun install localmente y verifica que funcione

Error: “API route not working”

• Verifica que la variable RESEND_API_KEY esté configurada en Vercel
• Revisa los logs en Vercel → Functions

Imágenes no se cargan

• Las rutas de imágenes deben ser relativas o absolutas
• Vercel maneja automáticamente las imágenes en /public

Comandos útiles

# Instalar dependencias
bun install

# Desarrollo local
bun run dev

# Build de producción
bun run build

# Preview de producción
bun run preview