Muchos de nuestros usuarios aprovechan servicios gratuitos de hosting estático como Netlify, Vercel o GitHub Pages para alojar sus regalos digitales o pequeños portafolios interactivos creados a partir de los códigos que descargan en JCode.
A primera vista, subir una carpeta HTML a Netlify es un proceso de "arrastrar y soltar", pero para obtener los mejores resultados, evitar la temida pantalla blanca de la muerte (o errores 404 en las imágenes y el sonido), es crucial entender ciertas optimizaciones.
El dilema de las rutas: Absolutas vs Relativas
Uno de los errores más comunes que vemos en nuestro equipo de soporte ocurre cuando un usuario descarga una plantilla, la edita y al subirla, nota que la música no suena o que las imágenes de fondo desaparecieron. El 99% de las veces, esto se debe a problemas con las rutas de los archivos.
Una ruta absoluta en HTML luce así: src="/assets/imagen.jpg". Ese slash / al principio le dice al navegador que busque el archivo en la raíz del dominio principal. Si subes tu proyecto a una subcarpeta o si Netlify te asigna un preview link con estructuras complejas, el navegador se perderá.
Una ruta relativa luce así: src="assets/imagen.jpg" o src="./assets/imagen.jpg". Esto instruye al navegador a buscar la carpeta "assets" exactamente en el mismo directorio donde se encuentra el archivo HTML actual.
La actualización de JCode
En nuestra última actualización, hemos ajustado internamente todas nuestras descargas para que utilicen rutas estrictamente relativas. Esto garantiza que, independientemente de si alojas tu sitio en el directorio raíz (ej. tu-nombre.netlify.app) o en una subcarpeta de tu hosting personal (ej. tu-dominio.com/regalos/flores), los archivos de imagen, música y estilos CSS siempre se cargarán correctamente sin intervención manual de tu parte.
"Un despliegue exitoso no se trata solo de subir código, se trata de preparar la arquitectura del proyecto para que sobreviva a cualquier entorno, sin importar el prefijo de la URL."
Opciones populares de despliegue gratuito
- Netlify: Excelente interfaz drag-and-drop. Ideal para principiantes que solo quieren subir su carpeta HTML/CSS/JS.
- Vercel: Orientado al rendimiento. Perfecto si estás evolucionando hacia frameworks modernos como Next.js o React.
- GitHub Pages: La opción más "developer-friendly", construida directamente desde tu repositorio de código.
Redirecciones y SPA
Si tu proyecto descargado es una pequeña Single Page Application (SPA) que usa Javascript para el ruteo interno (como las plantillas avanzadas de portafolio que ofrecemos), es necesario configurar Netlify para que redirija todas las peticiones al `index.html`. De lo contrario, si alguien recarga la página, verá un error 404.
/* /index.html 200
Este pequeño archivo de configuración resuelve el 100% de los problemas de enrutamiento en Netlify para aplicaciones React, Vue o SPAs de Vanilla Javascript puro, como las nuestras.