Cómo subir una web gratis a Netlify o Vercel en 2026

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 con HTTPS incluido.

Qué necesitas antes de empezar

Antes de subir tu web, asegúrate de tener preparado lo siguiente:

• 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. Si todavía no tienes una web, lee primero: Cómo crear una web desde cero.
• Una cuenta gratuita en Netlify o Vercel (te registras con email o cuenta de GitHub/GitLab). El registro es instantáneo y no pide tarjeta de crédito.
• (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. Un dominio cuesta unos 10-15€/año. Más detalles en: Cuánto cuesta mantener una web.

Cómo conectar tu proyecto

Tienes dos formas de subir tu web: arrastrando archivos o conectando un repositorio de GitHub. Ambas son gratuitas y ninguna requiere conocimientos de servidor.

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

Solo disponible en Netlify. Es la forma más rápida y no necesitas ni Git ni terminal:

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 con HTTPS incluido.

Ventaja: Es instantáneo y no necesitas saber nada de Git. Inconveniente: Cada vez que actualices tu web, tendrás que volver a arrastrar la carpeta. Para proyectos pequeños, pruebas o portafolios, es perfecto.

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

Esta opción funciona en Netlify y Vercel. Es la mejor opción a largo plazo porque cada git push actualiza la web automáticamente:

1. Sube tu proyecto a GitHub (crea un repositorio nuevo y haz push).
2. En Netlify/Vercel, crea un nuevo proyecto e importa tu repositorio.
3. Configura las opciones de build:
   • Para webs estáticas (HTML puro): directorio de publicación = la carpeta raíz (. o /).
   • Para proyectos con Vite: comando de build = npm run build, directorio = dist.
4. Haz clic en «Deploy». Listo.
5. A partir de ahora, cada vez que hagas git push, tu web se actualiza automáticamente. Sin tocar nada más.

Cómo funciona internamente el despliegue

Entender qué pasa por detrás te ayudará a resolver problemas si algo falla:

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 automáticamente.
3. Los archivos resultantes se distribuyen a través de una CDN (red de servidores global).
4. Tu web se sirve desde el servidor más cercano al visitante, lo que garantiza buena velocidad de carga.
5. Se genera un certificado SSL automáticamente (HTTPS). No tienes que hacer nada.

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
WordPress	Ninguna	Necesitas hosting tradicional

Ventajas y límites de cada plataforma

Netlify (plan gratuito)

• ✅ Drag & drop para subir sin Git.
• ✅ 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).
• ✅ Uso comercial permitido en plan gratuito.
• ⚠️ 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 y Vite.
• ✅ CDN global y HTTPS automático.
• ✅ Edge Functions incluidas.
• ✅ Preview deployments en cada PR.
• ⚠️ 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. Un dominio propio le da profesionalidad a tu web y es prácticamente obligatorio si quieres solicitar AdSense. El proceso:

1. Compra un dominio en Porkbun, Namecheap o Cloudflare (~10-15€/año). Consulta nuestra selección de registradores de dominios recomendados.
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, normalmente un registro CNAME o A).
5. Espera 15-60 minutos a que los DNS propaguen.
6. El certificado HTTPS se genera automáticamente. Nunca pagues por un certificado SSL básico.

HTTPS automático

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.

HTTPS es obligatorio hoy en día: Google Chrome marca las webs sin HTTPS como «No seguras», y el HTTPS es un factor de posicionamiento SEO. Con estas plataformas lo tienes resuelto sin coste ni configuración.

Errores frecuentes al desplegar

Estos son los problemas más comunes que los principiantes encuentran. Si tu web no carga bien después de subir, revisa esta lista:

1. Subir la carpeta equivocada. Asegúrate de subir la carpeta que contiene tu index.html en la raíz, no una carpeta padre que la contenga.
2. Rutas relativas rotas. Si usas rutas como ../css/styles.css, verifica que funcionen en el servidor, no solo en local. Es mejor usar rutas desde la raíz (/css/styles.css) cuando sea posible.
3. No configurar el directorio de publicación. Si usas Vite, el directorio de publicación 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 al servicio de hosting.
5. Archivos demasiado grandes. Si tienes imágenes sin comprimir de 10 MB, la subida puede fallar o tu web será muy lenta. Lee sobre cómo optimizar tu web para móvil.
6. Olvidar el archivo _redirects. Si tienes una SPA (Single Page Application), necesitas un archivo _redirects en Netlify con /* /index.html 200 para que las rutas funcionen.
7. Mayúsculas en nombres de archivo. Los servidores Linux distinguen mayúsculas de minúsculas. Imagen.JPG y imagen.jpg son archivos diferentes. Usa siempre minúsculas para todo. Más errores comunes en: errores al crear tu primera web.

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 (responsive).
7. ✅ El favicon está configurado.
8. ✅ No hay errores en la consola del navegador (F12 → Console).
9. ✅ Los nombres de archivo no tienen espacios ni caracteres especiales.
10. ✅ Has probado la web en al menos 2 navegadores diferentes.

Preguntas frecuentes

¿Puedo usar Netlify/Vercel para una web comercial?

Netlify sí (el plan gratuito lo permite explícitamente). Vercel tiene restricciones en su plan gratuito para uso comercial; necesitarías el plan Pro (~20$/mes) para proyectos comerciales o de equipo.

¿Se puede usar con WordPress?

No directamente. Netlify y Vercel son para webs estáticas (HTML, CSS, JS). WordPress necesita PHP y una base de datos, así que requiere hosting tradicional. Lee nuestra comparativa: WordPress o código puro.

¿Pierdo mi web si la plataforma cierra?

No, porque tus archivos originales están en tu ordenador (y en GitHub si conectaste un repositorio). Puedes mover tu web a cualquier otro hosting en minutos. Esa es una de las grandes ventajas de las webs estáticas: no dependes de ningún servidor específico.

¿Cuál es la diferencia entre Netlify y Vercel?

Ambas son excelentes. Netlify es mejor para webs estáticas simples (tiene drag & drop y formularios gratis). Vercel es mejor si usas frameworks como Next.js o React. Para una web hecha con HTML, CSS y JS puro, recomendamos Netlify por su simplicidad.