Un archivo · Ficheros normales · Cualquier hosting estático
Qué Hay de Verdad Dentro del .zip Exportado
Pulsar descargar entrega un archivo comprimido, y esta página lo abre. No el resumen de tres párrafos que ya da la guía sobre no registrarse: la disposición de carpetas, qué hojas de estilos aparecen y bajo qué condición, qué JavaScript se incluye exactamente y cuándo no se incluye ninguno, y el límite honesto que decide si el resultado funciona en el momento de descomprimirlo en otro lugar.
La estructura de carpetas que escribe el exportador
Al descomprimir el archivo aparece un sitio estático normal, no un paquete que necesite un paso de compilación para convertirse en uno. Cada página construida recibe su propia carpeta con un index.html dentro, y si el sitio lleva más de un idioma de contenido, esa misma página se repite una vez por idioma, cada una en su propia carpeta: un sitio de dos páginas y dos idiomas produce cuatro archivos HTML, no dos con un selector de idioma incrustado en el marcado.
Junto a cada página hay una hoja de estilos propia de esa página: assets/css/page-<slug>.css. Ese fichero por página no es toda la historia visual, porque debajo hay unas capas compartidas que se cargan una sola vez para todo el sitio, no una vez por página, que es el tema del siguiente apartado.
Cuatro capas de CSS, y cuáles son condicionales
Dos hojas de estilos se escriben siempre, sin importar lo pequeño que sea el sitio: assets/css/tokens.css, de donde lee el resto del CSS los valores de diseño, y assets/css/base.css, el reset y las reglas base compartidas. Ninguna de las dos depende de lo que use o no use el sitio.
Otras dos son condicionales, y conviene saber la condición porque su ausencia no es un fallo. assets/css/themes.css solo se escribe si el sitio usa temas de verdad; un sitio con un único diseño sin tema lo omite por completo. assets/css/components.css solo se escribe si al menos un componente colocado declara su propio CSS estático más allá de lo que ya cubren las capas de tokens y base; muchas páginas sencillas nunca lo activan. Sumado a la hoja por página del apartado anterior, la cadena completa de estilos de una página puede tener tan solo tres ficheros o llegar a cinco, y la diferencia depende por completo de lo que use esa página en concreto, no de un ajuste que se active a mano.
El JavaScript, archivo por archivo, incluido el caso de cero archivos
El JavaScript sigue la misma lógica que el CSS condicional, y conviene ser exacto porque "solo lo que se usa" es fácil de decir y rara vez se demuestra. Cuando un sitio usa al menos un comportamiento en tiempo de ejecución, el archivo incluye assets/js/enhance.js como cargador, más exactamente un fichero assets/js/<moduleId>.js por cada comportamiento que el sitio realmente asigna: una página que usa un acordeón y un visor de imágenes lleva esos dos módulos y el cargador, nada más, nada genérico añadido por si acaso.
Un componente que necesita una pequeña porción de lógica compartida en tiempo de ejecución —Builder42 la llama su micro-runtime— añade un fichero más, assets/js/ui.js, y solo cuando un componente colocado la necesita de verdad. Vale la pena decir con claridad el caso que cuesta creer hasta verlo: un sitio que no coloca ningún comportamiento y ningún componente que necesite el micro-runtime produce cero ficheros bajo assets/js/: ni un cargador vacío, ni un script de relleno, nada. Tampoco se genera una carpeta vacía; el directorio ni siquiera existe si nada lo llena.
Dónde van las imágenes
Cada imagen referenciada en cualquier parte del sitio —no solo las de la página que está abierta— viaja bajo assets/img/<fileName>, un fichero por cada recurso referenciado, con el mismo nombre que enlaza el HTML. No hay un listado aparte que conciliar: al abrir assets/img/, lo que hay ahí es lo que señalan las páginas.
Dos detalles de esa carpeta merecen conocerse. La misma imagen usada en varias páginas, o en varios idiomas de contenido, se escribe una sola vez y se enlaza desde todas, así que un sitio en dos idiomas no carga con dos copias de la misma fotografía. Y los bytes son los que pusiste: el minificador que recorre el marcado y las hojas de estilos no toca los binarios, así que nada se recodifica, se recomprime ni se redimensiona al salir.
Lo que el archivo no es
Aquí tientan dos afirmaciones, y las dos serían falsas para esta exportación. La primera es el tamaño: nadie ha medido el peso en bytes de un archivo descargado en este sitio, así que no se da ninguna cifra: ni en kilobytes, ni en megabytes, ni como "al instante". El número que sí existe y es seguro dar es el ajuste de compresión, DEFLATE al nivel 9, que es un dato de configuración, no una promesa de rendimiento.
La segunda es la portabilidad. Las tipografías que usa el diseño se enlazan desde Google Fonts mediante un enlace dentro del CSS exportado en vez de incluirse como ficheros de fuente dentro del archivo, así que las páginas necesitan una conexión activa para mostrarse con la tipografía prevista dondequiera que se alojen; sin ella, el navegador recurre a una fuente del sistema y el diseño sigue funcionando, solo que no con el tipo elegido. Empaquetar los ficheros de fuente reales es una ruta que pasa por un servidor, justo lo que esta demo estática no tiene, así que llamar al resultado "autónomo" o "listo para usarse sin conexión" exageraría lo que de verdad se entrega.
Qué pasa después de la descarga
Una vez descomprimido, el contenido es HTML, CSS y JavaScript corrientes, sin ningún framework y sin ninguna herramienta de compilación necesaria para servirlos, que es también la razón de que nada en esta página pueda terminar el trabajo por cuenta propia. Cualquier hosting que sirva archivos estáticos aceptará la carpeta tal cual: un servidor propio, un proveedor de hosting estático, un bucket configurado para acceso web, todos leen el mismo conjunto de ficheros de la misma manera. Esta descarga es el punto en que el trabajo terminado sale del navegador y el siguiente paso de despliegue queda por cuenta de quien lo descarga.
Exporta una de estas y lee los ficheros tú mismo
Exporta la plantilla del hotel o la del despacho de abogados y el archivo es lo bastante pequeño para leerlo de principio a fin en un editor de texto: un puñado de páginas, uno o dos comportamientos, y una cadena de estilos corta de rastrear desde los tokens hasta la página.
Lo que se pregunta primero
¿Cuántos archivos HTML exporta un sitio de dos páginas y dos idiomas?
Cuatro. El exportador escribe un index.html por página y por idioma configurado, cada uno en su propia carpeta, así que las páginas y los idiomas multiplican la cantidad de ficheros en vez de compartir uno con un selector dentro.
¿El CSS exportado siempre incluye un themes.css y un components.css?
No. tokens.css y base.css se escriben siempre, pero themes.css solo aparece si el sitio usa temas, y components.css solo aparece si un componente colocado declara CSS estático más allá de esas dos capas compartidas. Una página sencilla con un único tema puede omitir ambos.
¿Qué pasa si exporto un sitio que no usa ningún comportamiento interactivo?
La carpeta assets/js/ no se crea en absoluto: ni cargador, ni fichero vacío, nada. El archivo solo contiene los módulos de JavaScript que un sitio realmente asigna, un fichero por comportamiento, más el cargador que los conecta cuando existe al menos uno.
¿El .zip descargado es una copia completa del sitio para usar sin conexión?
No del todo. Todos los ficheros HTML, CSS, JavaScript e imagen están dentro del archivo, pero las tipografías se enlazan desde Google Fonts en vez de empaquetarse, así que mostrarse con la tipografía prevista sigue necesitando conexión dondequiera que termine el sitio.
¿Si dos páginas usan la misma imagen, se descarga dos veces?
No. Cada fichero referenciado se escribe una sola vez bajo assets/img/ y se enlaza desde todas las páginas —y todos los idiomas de contenido— que lo señalan, así que el archivo no engorda con una segunda copia de la misma fotografía.
¿El archivo indica cuánto pesa una vez descargado?
No, y esta página tampoco lo hace: el peso de un archivo descargado no se ha medido en este sitio, así que no se da ninguna cifra. El único número documentado es el ajuste de compresión: DEFLATE al nivel 9.