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 u803564117.dominio.infomediawebhosting.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.
Espacio para captura de pantalla de FileZilla/CyberDuck
Compilar el proyecto
En tu terminal, ejecuta el comando de build según tu gestor de paquetes. Esto generará la carpeta 'dist' con todos los archivos compilados y optimizados para producción.
npm run build
o
pnpm run build
Espacio para captura de pantalla del proceso de build
Abrir la herramienta FTP
Inicia la aplicación FTP que descargaste. Verás una interfaz para conectarte al servidor FTP.
Espacio para captura de pantalla de la interfaz 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.
Espacio para captura de pantalla del Site Manager
Ingresar datos de conexión FTP
Completa los siguientes datos en el formulario de conexión:
ftp://xx.xx.xx.xxx u803564117.dominio.infomediawebhosting.net ************* 00 Espacio para captura de pantalla del formulario de conexión completado
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.
Espacio para captura de pantalla de la conexión exitosa
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.
Espacio para captura de pantalla de la carpeta public_html
Subir archivos de la carpeta dist
En el panel izquierdo (tu computadora), navega a la carpeta dist de tu proyecto. Selecciona todos los archivos y carpetas dentro de
'dist' (NO la carpeta dist en sí) y arrástralos al panel derecho (public_html)
o usa la opción Upload.
⚠️ Importante: Sube el contenido de la carpeta dist, no la carpeta dist en sí. Incluye todos los archivos HTML, CSS, JS e imágenes compiladas.
Espacio para captura de pantalla del proceso de subida de archivos
Esperar a que se completen las descargas
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.
Espacio para captura de pantalla de la barra de progreso
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.
Espacio para captura de pantalla del sitio funcionando
💡 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.