Subir Sitio a FTP Hostinger (Link de Prueba)
Guía completa para subir los archivos compilados de tu sitio a Hostinger usando FileZilla o CyberDuck. Este proceso es para sitios en fase de prueba antes de su lanzamiento oficial.
📖 Descripción del Proceso
Este paso es para sitios en fase de prueba. Compilas tu proyecto (npm run build), obtienes los archivos de la carpeta 'dist', y los subes directamente a la carpeta 'public_html' del servidor FTP de Hostinger usando FileZilla o CyberDuck.
Una vez el sitio esté en su dominio oficial, usarás el flujo de GitHub (rama dev → merge a main) para los despliegues.
🔑 Datos de Acceso FTP
ftp://xx.xx.xx.xxx xxxxx0000xxx.dominio.hosting.net ************* 00 Estos datos que mostramos son de prueba, no son los datos reales que deben colocar, estos es para que puedas visualizar cuales datos son los que debes colocar en tu FileZilla o CyberDuck.
📋 Pasos para Subir tu Sitio
Descargar FileZilla o CyberDuck
Descarga e instala una de estas herramientas FTP. Ambas son gratuitas y multiplataforma. Elige la que prefieras.
Descargar los archivos compilados desde GitHub
ℹ️ Nota importante: Este paso se realiza una sola vez al inicio. Una vez que tengas todo configurado en el link de prueba, podrás construir en local y subir directamente sin necesidad de descargar desde GitHub.
En lugar de compilar localmente, descargaremos los archivos ya compilados desde GitHub. Esto asegura que tengas la versión correcta con todos los archivos necesarios generados automáticamente.
Paso 2.1: Ir a GitHub y esperar GitHub Actions
Accede al repositorio de tu proyecto en GitHub y espera a que se completen las GitHub Actions (procesos automáticos). Verás un indicador de estado junto a los commits.
Paso 2.2: Ir a la rama 'deploy'
Una vez completadas las acciones, cambia a la rama deploy. En esta rama encontrarás los archivos compilados y listos
para usar.
Paso 2.3: Descargar el ZIP
Haz clic en el botón 'Code' y selecciona 'Download ZIP'. Este archivo contiene la carpeta 'dist' compilada y lista para subir al servidor.
✅ Después de esto: Extrae el ZIP descargado y continúa con el Paso 3 (Abrir la herramienta FTP) usando los archivos de la carpeta 'dist' que encontrarás dentro.
Abrir la herramienta FTP
Inicia la aplicación FTP que descargaste. Verás una interfaz para conectarte al servidor FTP.
Crear una nueva conexión FTP
En FileZilla, ve a File → Site Manager. En CyberDuck, haz clic en 'New Connection'. Aquí ingresarás los datos de acceso FTP.
Ingresar datos de conexión FTP
Completa los siguientes datos en el formulario de conexión:
ftp://xx.xx.xx.xxx xxxxx0000xxx.dominio.hosting.net ************* 00 Conectar al servidor FTP
Una vez ingresados los datos, haz clic en 'Connect' o presiona Enter. Deberías ver la estructura de carpetas de tu hosting.
Navegar a la carpeta public_html
En el panel derecho (servidor remoto), busca y abre la carpeta public_html. Esta es la carpeta raíz donde se sirven los archivos públicos
de tu sitio.
Subir archivos descargados en el Paso 2
Ahora subiremos los archivos que descargamos en el Paso 2. Selecciona todos los archivos descargados y arrástralos a la
carpeta public_html en el servidor, o usa la opción Upload en tu herramienta FTP.
⚠️ Importante: Sube todos los archivos que descargaste
desde GitHub en el Paso 2 directamente a la carpeta
public_html. Incluye todos los archivos HTML, CSS, JS e imágenes.
Esperar a que se completen las cargas o descargas de los archivos
Espera a que todos los archivos se suban correctamente. Verás una barra de progreso indicando el estado. Una vez completado, tu sitio estará disponible en el link de prueba.
Verificar el sitio en el link de prueba
Abre tu navegador y ve al link de prueba para verificar que tu sitio se subió correctamente y funciona como se espera.
💡 Notas Importantes
📍 Carpeta de destino
Siempre sube los archivos a la carpeta public_html. Esta es la carpeta raíz del servidor web.
📦 Archivos a subir
Sube el contenido de la carpeta 'dist' (no la carpeta dist en sí). Incluye todos los archivos HTML, CSS, JS e imágenes compiladas.
🚀 Flujo para dominio oficial
Una vez el sitio esté en su dominio oficial, cambia al flujo de GitHub: crea una rama 'dev', haz cambios, crea un Pull Request, revisa que no haya conflictos, y haz merge a 'main' para desplegar en producción.
✅ Prevención de caídas
El flujo de GitHub con revisión de código previene que cambios rotos se desplieguen a producción. Siempre revisa los cambios antes de hacer merge a main.