Cómo subir una web gratis a Netlify o Vercel

Respuesta rápida: Puedes publicar una web estática (HTML, CSS, JS) en Netlify o Vercel de forma gratuita. Solo necesitas tus archivos listos y una cuenta gratuita. El proceso más rápido: arrastra tu carpeta al panel de Netlify y tu web estará online en segundos.

Qué necesitas antes de empezar

• Tus archivos web listos: una carpeta con tu index.html, CSS y JS. La web debe funcionar correctamente cuando abres index.html en tu navegador.
• Una cuenta gratuita en Netlify o Vercel (te registras con email o cuenta de GitHub/GitLab).
• (Opcional) Una cuenta de GitHub: Si quieres despliegue automático cada vez que actualices tu código, necesitas tu proyecto en un repositorio de GitHub.
• (Opcional) Un dominio propio: Si quieres que tu web aparezca como tudominio.com en vez de tuproyecto.netlify.app.

Cómo conectar tu proyecto

Tienes dos formas de subir tu web: arrastrando archivos o conectando un repositorio de GitHub.

Opción A: Arrastrar y soltar (la más fácil)

Solo disponible en Netlify. Es la forma más rápida:

1. Ve a app.netlify.com/drop.
2. Arrastra la carpeta de tu proyecto al área indicada.
3. Espera 5-10 segundos.
4. Netlify te dará una URL como amazing-web-123abc.netlify.app.
5. Tu web ya está online.

El inconveniente: cada vez que actualices tu web, tendrás que volver a arrastrar la carpeta. Para proyectos pequeños o pruebas, es perfecto.

Opción B: Conectar repositorio de GitHub (recomendada)

Esta opción funciona en Netlify y Vercel. Es mejor a largo plazo:

1. Sube tu proyecto a GitHub (un repositorio nuevo).
2. En Netlify/Vercel, crea un nuevo proyecto e importa tu repositorio.
3. Configura las opciones de build (para webs estáticas: directorio de publicación = tu carpeta raíz o dist si usas Vite).
4. Despliega. Listo.
5. A partir de ahora, cada vez que hagas git push, tu web se actualiza automáticamente.

Cómo funciona el despliegue

Internamente, lo que pasan es:

1. Subes tus archivos (manualmente o vía Git).
2. La plataforma los procesa: si tienes un comando de build (como npm run build para Vite), lo ejecuta.
3. Los archivos resultantes se distribuyen a través de una red de servidores global (CDN).
4. Tu web se sirve desde el servidor más cercano al visitante, garantizando velocidad.
5. Se genera un certificado SSL automáticamente (HTTPS).

Qué plataforma elegir según tipo de web

Tipo de web	Recomendación	Razón
HTML/CSS/JS estática	Netlify	Drag & drop, formularios gratis
Proyecto con Vite	Ambas	Ambas soportan build automático
Next.js / React	Vercel	Creado por el equipo de Next.js
Con formularios	Netlify	Netlify Forms incluido gratis

Ventajas y límites de cada una

Netlify (plan gratuito)

• ✅ Drag & drop para subir.
• ✅ 100 GB/mes de ancho de banda.
• ✅ Formularios incluidos (100 envíos/mes gratis).
• ✅ CDN global y HTTPS automático.
• ✅ Deploy previews (vista previa antes de publicar).
• ⚠️ Build time limitado: 300 minutos/mes.
• ⚠️ Functions serverless: 125.000 invocaciones/mes.

Vercel (plan gratuito)

• ✅ 100 GB/mes de ancho de banda.
• ✅ Integración perfecta con Next.js.
• ✅ CDN global y HTTPS automático.
• ✅ Edge Functions incluidas.
• ⚠️ No tiene drag & drop; siempre necesitas Git.
• ⚠️ Plan gratuito solo para uso personal/hobby (no comercial).

Dominio personalizado

Ambas plataformas te permiten conectar un dominio propio de forma gratuita. El proceso:

1. Compra un dominio en Namecheap, Porkbun o Cloudflare (~12€/año).
2. En el panel de Netlify/Vercel, ve a "Domain Settings".
3. Añade tu dominio personalizado.
4. Configura los DNS apuntando al servicio (te darán las instrucciones exactas).
5. Espera 15-60 minutos a que los DNS propaguen.
6. El certificado HTTPS se genera automáticamente.

Más detalles: Cómo comprar un dominio y conectarlo paso a paso.

HTTPS

Tanto Netlify como Vercel incluyen HTTPS gratuito con certificados de Let's Encrypt. Se activa automáticamente al configurar tu dominio. No tienes que hacer nada adicional. Nunca pagues por un certificado SSL básico.

Errores frecuentes

1. Subir la carpeta equivocada. Asegúrate de subir la carpeta que contiene tu index.html en la raíz, no una carpeta padre.
2. Rutas relativas rotas. Si usas rutas como ../css/styles.css, verifica que funcionen en el servidor, no solo en local.
3. No configurar el directorio de publicación. Si usas Vite, el directorio es dist, no la carpeta raíz.
4. DNS mal configurados. Si tu dominio no funciona después de 24 horas, revisa que los registros DNS apunten correctamente.
5. Archivos demasiado grandes. Si tienes imágenes sin comprimir de 10 MB, la subida puede fallar o tu web será muy lenta.
6. Olvidar el archivo _redirects. Si tienes una SPA (Single Page Application), necesitas un archivo _redirects para que las rutas funcionen.

Checklist final antes de desplegar

1. ✅ index.html está en la raíz de la carpeta que subirás.
2. ✅ Tu web funciona correctamente en local (prueba en el navegador).
3. ✅ Todos los enlaces internos usan rutas relativas correctas.
4. ✅ Las imágenes están optimizadas (WebP, comprimidas).
5. ✅ Tienes <title> y meta description en cada página.
6. ✅ La web se ve bien en móvil.
7. ✅ El favicon está configurado.
8. ✅ No hay errores en la consola del navegador (F12).

Preguntas frecuentes

¿Puedo usar Netlify/Vercel para una web comercial?

Netlify sí (el plan gratuito lo permite). Vercel tiene restricciones en su plan gratuito para uso comercial; necesitarías el plan Pro.

¿Se puede usar con WordPress?

No directamente. Netlify y Vercel son para webs estáticas. WordPress necesita PHP y base de datos, así que requiere hosting tradicional.

¿Pierdo mi web si la plataforma cierra?

No, porque tus archivos están en tu ordenador (y en GitHub si conectaste un repositorio). Puedes mover tu web a cualquier otro hosting en minutos.