El sitio ESG México corre sobre Astro 6 con el adaptador oficialDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/ivanespinosa/esg-mexico-sitio-web/llms.txt
Use this file to discover all available pages before exploring further.
@astrojs/vercel, lo que habilita rutas SSR (como /api/autoevaluacion) junto a páginas estáticas pre-renderizadas. Vercel actúa como plataforma de CI/CD: cada push a main lanza un build automático, y un webhook de Sanity dispara redeployments adicionales cada vez que se publica nuevo contenido en el CMS. Esta página cubre el flujo completo, desde la configuración del adaptador hasta los headers de seguridad en producción.
Configuración del adaptador
El archivoastro.config.mjs define el adaptador Vercel, el dominio canónico y la política de trailing slash. Estas tres líneas son las más relevantes para el despliegue:
site debe coincidir exactamente con el dominio canónico (incluyendo www). Este valor es el que usa el componente SEO.astro para construir URLs canónicas con Astro.site. Si se modifica, todas las etiquetas <link rel="canonical"> y og:url del sitio cambiarán automáticamente en el siguiente build.Proceso de despliegue en Vercel
Conectar el repositorio
En el dashboard de Vercel, selecciona Add New → Project e importa el repositorio
ivanespinosa/esg-mexico-sitio-web desde GitHub. Vercel detecta automáticamente que es un proyecto Astro.Configurar variables de entorno
Antes del primer deploy, agrega todas las variables del archivo
.env.example en Settings → Environment Variables del proyecto. Son necesarias en tiempo de build (PUBLIC_SANITY_*) y en tiempo de ejecución (SMTP_USER, SMTP_PASS). Ver la página Variables de Entorno para la referencia completa.Configurar dominios
En Settings → Domains, agrega ambos:
www.esgmexico.net— dominio principal (sirve el sitio)esgmexico.net— dominio adicional configurado como redirect permanente awwwvíavercel.json(ver sección más abajo)
Ejecutar el primer deploy
El comando de build configurado en Vercel es
npm run build, que internamente ejecuta astro build. El output se deposita en dist/. Vercel sirve archivos estáticos directamente desde su CDN edge y enruta las peticiones a las funciones SSR (rutas con prerender = false).Registrar el webhook de Sanity
Una sola vez, ejecuta el script
studio/vercel-webhook.mjs con las tres variables requeridas (ver sección Webhook de Sanity). Esto crea el listener en el proyecto de Sanity; a partir de ese momento cada publicación de contenido dispara un redeploy automático.Redirects y headers de seguridad (vercel.json)
El archivo vercel.json define dos responsabilidades: consolidar el tráfico no-www hacia el dominio canónico con un redirect permanente, y añadir headers de seguridad HTTP a todas las rutas.
Redirect 308 no-www → www
La condición
has.type: host captura únicamente peticiones al host esgmexico.net y las redirige a https://www.esgmexico.net/:path*, preservando la ruta y los query params. permanent: true emite un 308 Permanent Redirect (el código que Vercel usa para redirects permanentes).HSTS con preload
max-age=63072000 (2 años) con includeSubDomains; preload indica a los navegadores que el sitio solo debe cargarse por HTTPS y lo registra en la lista de preload de los navegadores.X-Frame-Options: DENY
Bloquea que el sitio sea embebido en iframes desde cualquier origen, mitigando ataques de clickjacking.
Permissions-Policy
Deshabilita explícitamente el acceso a cámara, micrófono y geolocalización desde el contexto del sitio.
Webhook de Sanity → Vercel (redeploy por contenido)
Cuando un editor publica un documento en Sanity Studio, el contenido queda en el CMS pero el sitio estático en Vercel todavía sirve el HTML anterior. El scriptstudio/vercel-webhook.mjs registra un listener HTTP en la API de Sanity que dispara el Deploy Hook de Vercel al detectar cualquier publicación.
Crear el Deploy Hook en Vercel
En el proyecto de Vercel: Settings → Git → Deploy Hooks. Crea un hook llamado
Sanity Publish, apuntado a la rama main. Copia la URL generada (empieza con https://api.vercel.com/v1/integrations/deploy/...).Obtener un token de Sanity
En sanity.io/manage, selecciona el proyecto y ve a API → Tokens. Crea un token con permisos
Editor o superior (necesita leer la configuración de webhooks).Ejecutar el script
Verificar en Sanity
En sanity.io/manage → API → Webhooks debe aparecer el webhook “Vercel Deploy — ESG México” con estado activo. Publica cualquier documento en Sanity Studio y confirma que se inicia un nuevo deployment en el dashboard de Vercel.
El webhook tiene
includeDrafts: false, lo que significa que solo los documentos publicados (no los borradores) disparan el redeploy. Esto es el comportamiento correcto para un sitio SSG en producción.Endpoint SSR: POST /api/autoevaluacion
La ruta src/pages/api/autoevaluacion.ts es la única en el sitio con prerender = false, lo que la convierte en una función serverless de Vercel. Recibe el formulario de autoevaluación ESG, lo envía por email vía nodemailer/Gmail SMTP y redirige al usuario con un query param de resultado.
Honeypot anti-spam
El campo oculto
botcheck sirve como trampa para bots. Si viene relleno, la petición se descarta silenciosamente con un redirect 303 exitoso, sin revelar al bot que fue ignorado.Destinatarios fijos
DESTINATARIOS recibe el email principal; CON_COPIA_OCULTA (BCC) incluye a valeria@esgmexico.net e ivan.espinosaf@gmail.com. Ambas listas están hardcodeadas en el archivo fuente.Gmail SMTP (puerto 465)
Usa
smtp.gmail.com:465 con TLS implícito. SMTP_PASS debe ser una contraseña de aplicación de Google Workspace, no la contraseña de la cuenta. Requiere 2FA activado en buzon@esgmexico.net.Redirects de resultado
Éxito →
/servicios-esg?enviado=1#autoevaluacion. Error SMTP → /servicios-esg?error=1#autoevaluacion. El cliente JavaScript en esa página lee el query param y muestra el mensaje correspondiente.