Cómo desplegar una web desde GitHub en Netlify paso a paso

Conectar GitHub con Netlify convierte cada cambio de tu repositorio en un flujo de publicación mucho más cómodo. En lugar de subir manualmente la carpeta cada vez que modificas una página, Netlify puede importar el repositorio y crear nuevos deploys cuando actualizas la rama de producción.

Qué necesitas

• Una cuenta de GitHub.
• Un repositorio con tu proyecto.
• Una cuenta de Netlify.
• Un index.html en el lugar correcto si se trata de una web estática sencilla.

1. Sube tu proyecto a GitHub

Si todavía tienes el proyecto solo en tu ordenador, crea un repositorio y sube los archivos. Comprueba antes que no estés subiendo contraseñas, claves API, archivos privados o carpetas innecesarias.

Para una web HTML sencilla, una estructura como esta es suficiente:

mi-web/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── images/
    └── logo.webp

2. Importa el repositorio en Netlify

En Netlify, crea un nuevo proyecto e indica que quieres importar un proyecto existente desde Git. Selecciona GitHub y autoriza el acceso al repositorio que quieres desplegar.

Netlify permite seleccionar el proveedor Git y configurar los ajustes de publicación desde el proceso de importación.

3. Configura el directorio de publicación

Si tu proyecto es HTML/CSS/JS puro y el index.html está en la raíz, normalmente no necesitas un proceso de compilación complejo.

Si utilizas una herramienta como Vite, el flujo cambia: primero se ejecuta el comando de build y después Netlify publica el directorio generado, normalmente dist salvo que hayas cambiado la configuración.

Si quieres entender cuándo merece la pena utilizar Vite, consulta nuestra guía sobre Vite.

4. Elige la rama de producción

Para un proyecto sencillo, puedes utilizar main como rama de producción. La idea es separar los cambios que estás probando de la versión que quieres que vea el público.

Cuando conectas el repositorio, los nuevos cambios pueden desencadenar nuevos deploys de producción según la configuración del proyecto.

5. Haz tu primer deploy

Revisa la configuración y publica el proyecto. Netlify te asignará una URL de proyecto. Abre esa URL y prueba las páginas, imágenes, CSS, JavaScript y formularios antes de compartirla.

6. ¿Qué pasa cuando hago git push?

Una de las ventajas del despliegue continuo es precisamente evitar la subida manual. Si tu proyecto está configurado para desplegar desde GitHub, un nuevo commit en la rama de producción puede iniciar un nuevo deploy.

git add .
git commit -m "Actualiza el artículo"
git push origin main

Después, revisa el deploy en Netlify y abre la URL pública para comprobar el resultado.

Errores frecuentes

• 404 en la home: comprueba la ubicación de index.html.
• CSS sin estilos: revisa las rutas relativas de tus hojas de estilo.
• Imágenes rotas: comprueba mayúsculas/minúsculas y rutas.
• Build fallido: revisa el comando de build y el directorio de publicación.
• Secretos expuestos: nunca guardes claves privadas directamente en el repositorio.

GitHub + Netlify frente a subir archivos manualmente

El siguiente paso: dominio y SEO

Una vez que el deploy funciona, puedes conectar un dominio propio con nuestra guía de cómo conectar un dominio a Netlify. Después revisa velocidad móvil y tus títulos y descripciones antes de intentar escalar el tráfico.