Cómo subir mi página web a Netlify: Drop, GitHub y dominio

Para subir tu página web a Netlify tienes dos formas: arrastrar tu carpeta en Netlify Drop (sin cuenta de GitHub, en segundos) o conectar tu repositorio de GitHub para que se publique sola cada vez que hagas cambios. En ambos casos obtienes una dirección tusitio.netlify.app con HTTPS y puedes conectar tu propio dominio.

Netlify: qué es y para qué sirve

Netlify es una plataforma para publicar sitios web y apps de frontend (lo que se ve en el navegador). Se encarga de:

• Guardar y servir tus archivos desde servidores en todo el mundo.
• Construir tu proyecto (correr npm run build) si lo conectas a Git.
• Dar HTTPS gratis.
• Funciones extra: formularios, funciones de servidor pequeñas (serverless), redirecciones.

No es un hosting tradicional para WordPress o PHP. Es ideal para páginas estáticas y para apps React/Vite como las que generan Lovable, Bolt o v0.

Precios de Netlify (a noviembre de 2026)

Según la página de precios de Netlify:

Plan	Precio	Créditos al mes
Free	0 USD	300
Personal	9 USD/mes	1,000
Pro	20 USD/mes	3,000
Enterprise	A cotizar	Ilimitados

Los créditos se gastan con el uso: la misma página indica, por ejemplo, 15 créditos por despliegue a producción y 20 créditos por GB de ancho de banda. Con 300 créditos, un sitio pequeño con pocos despliegues al mes funciona bien; si actualizas muchas veces al día o tienes mucho tráfico, se acaban rápido. Revisa tu consumo en el panel.

Netlify Drop: subir tu página arrastrando una carpeta

Según la guía de Netlify Drop:

1. Prepara la carpeta con tu sitio. Debe tener index.html en la raíz.
2. Si es un proyecto React/Vite, primero genera los archivos finales:

npm install
npm run build

Sube la carpeta que se crea (dist o build), no la carpeta del proyecto completo.

3. Entra a app.netlify.com/drop (o al final de tu panel de equipo) y arrastra la carpeta.
4. En segundos tienes una dirección algo.netlify.app.
5. Si lo hiciste sin cuenta, crea una para reclamar el sitio; si no, es temporal.

Para actualizar: genera el build otra vez y arrastra la carpeta nueva en la sección Deploys de tu sitio.

Subir tu página a Netlify desde GitHub (despliegue automático)

Es lo recomendable si tu proyecto vive en GitHub (por ejemplo, porque lo exportaste de Lovable o Bolt):

1. En el panel de Netlify, Add new project → Import an existing project.
2. Elige GitHub y autoriza el acceso al repositorio.
3. Netlify detecta el framework. Revisa:
   • Build command: npm run build
   • Publish directory: dist (Vite) o build (Create React App)
4. Si tu app usa variables de entorno (por ejemplo VITE_SUPABASE_URL), agrégalas en la configuración del proyecto antes de desplegar. Lee variables de entorno en Vite y React.
5. Da clic en Deploy.

Desde ese momento, cada cambio en la rama principal se publica solo. Ojo: cada despliegue a producción consume créditos.

Para apps React con rutas

Si al recargar /contacto aparece “Page not found”, crea un archivo public/_redirects con:

/*    /index.html   200

Así todas las rutas cargan tu app.

Conectar tu dominio en Netlify

1. En tu sitio, ve a Domain management → Add a domain.
2. Escribe tu dominio y sigue las instrucciones: puedes usar el DNS de Netlify (cambiando los nameservers en tu registrador) o crear los registros en tu DNS actual.
3. Netlify emite el certificado HTTPS cuando el DNS ya apunta bien.

Los nombres de menús pueden variar con las actualizaciones del panel.

Errores comunes en Netlify

• Página en blanco: subiste la carpeta del proyecto en vez de dist, o faltan variables de entorno.
• “Build failed”: revisa el log; casi siempre es un error de código que en local no viste. Te ayudará qué hace npm run build.
• Se acabaron los créditos: revisa el consumo en el panel y qué hace tu plan al llegar al límite; agrupar cambios en menos despliegues ayuda.
• Llaves secretas en el código: todo lo que va en el frontend es público.

¿Netlify o Vercel?

Para páginas estáticas y apps Vite, ambos sirven. Vercel es la casa de Next.js y su plan gratis es solo para uso personal no comercial. Compara en cómo subir tu página web a Vercel y en desplegar app web gratis.

Qué revisar después de publicar en Netlify

Que la página cargue no significa que todo esté bien. Antes de compartir el enlace, revisa:

1. Abre el sitio en modo incógnito y en tu celular. Si en tu computadora se ve bien pero en incógnito no, casi siempre es caché o un archivo que no subiste.
2. Recorre todas las páginas y recarga cada una. Así detectas el “Page not found” de las rutas antes que tus clientes.
3. Abre la consola del navegador (clic derecho → Inspeccionar → Console). Los errores en rojo te dicen si falta una variable de entorno o si una petición a tu base de datos está fallando.
4. Prueba los formularios. Si tu página de contacto no tiene a dónde mandar los datos, se pierden. Netlify tiene una función de formularios propia; revisa en su documentación de Forms cómo activarla y qué límites tiene en tu plan.
5. Verifica el HTTPS con tu dominio: el candado debe aparecer en tudominio.com y en www.tudominio.com.

Si tu sitio viene de Lovable, Bolt o v0

Estas herramientas generan apps Vite/React, así que aplican los mismos pasos: build command npm run build, carpeta dist y las variables VITE_... en el panel de Netlify. Lo que más falla es olvidar esas variables: la app se construye sin error, pero al abrirla queda en blanco porque no encuentra su base de datos. Si tu proyecto está en Bolt, también puedes ver cómo desplegar desde Bolt a Netlify o Vercel.

Cuándo pedir ayuda

Netlify Drop lo puede usar cualquiera. Si tu app tiene login, base de datos, pagos o el build falla y no entiendes el log, conviene que alguien lo revise antes de seguir intentando a ciegas. En Black Engine lo revisamos por WhatsApp y te ayudamos a dejarla publicada.