En este artículo vamos a ver un rápido enfoque para trabajar con archivos estáticos en Eleventy. Como verás resultará extremadamente sencillo y versátil.

Qué son los archivos estáticos

Se entiende por archivos estáticos a aquellos ficheros que no necesitan ningún proceso de compilación durante el build del proyecto.

Por ejemplo archivos estáticos podrían ser imágenes, SVGs, archivos de fuentes o tipografías, archivos descargables por ejemplo en formato PDF y cosas similares.

Los archivos estáticos por tanto deberán existir en el proyecto, una vez esté producido y listo para publicar, pero no requerirán ningún tratamiento en especial. En algunos casos podemos considerar también ciertos archivos de código como CSS o JavaScript como ficheros estáticos, aunque no siempre es así ya que a menudo necesitamos un procesamiento del código frontend. Ya dependerá de la complejidad del proyecto y las costumbres del desarrollador que esto sea así o no.

Cómo organizar los archivos estáticos en Eleventy

Algunos "static site generators" ofrecen de entrada una carpeta donde colocar los archivos estáticos y ya vienen configurados "de casa" para poder copiar el contenido de esa carpeta en el proyecto construido, cuando lo llevamos a producción.

Eleventy no obstante, como se dijo en su momento, no define una estructura de carpetas determinada, por lo que tampoco marca cual debe de ser la carpeta que se use para guardar los archivos estáticos. Es por ello que somos nosotros los que tenemos que decidir el nombre de la carpeta y configurar el proceso de construcción del sitio para conseguir que los archivos se copien en el proyecto construido.

Así pues una posible aproximación sería la que vamos a explicar ahora, aunque nosotros podríamos utilizar cualquier otro nombre de carpeta o carpetas para el copiado de archivos.

Creación de la carpeta de archivos estáticos

Debemos comenzar por crear una carpeta de archivos estáticos en tu proyecto Eleventy. En nuestro proyecto vamos a elegir como nombre de la carpeta "static".

Este paso simplemente consiste en crear la carpeta con tu editor o explorador de archivos. En ella podríamos colocar imágenes, archivos de descarga, etc. Incluso sería perfectamente viable tener varias rutas para separar todos estos tipos de archivos, en subdirectorios dentro de "static".

Configuración de Eleventy

El siguiente paso consiste en configurar el generador de sitios estáticos 11ty para informarle que tiene que realizar la copia de esos archivos, tal cual, en el proyecto una vez construido.

Esta configuración la puedes hacer mediante un archivo llamado .eleventy.js, o bien por el archivo eleventy.config.js. Ambos archivos se sitúan en la raíz de tu proyecto. Generalmente tendrás uno u otro.

El código de esta configuración tendrá que utilizar el método addPassthroughCopy() para indicar a Eleventy que copie la carpeta de archivos estáticos directamente al directorio de salida.

Por ejemplo, si tu carpeta se llama static, agregarías lo siguiente a tu archivo .eleventy.js:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy({
    static: "/"
  });
};

Construir tu proyecto

Para hacer el build de tu proyecto no tienes que realizar nada en especial, una vez configurado Eleventy. Simplemente realizarás el proceso de construcción normal.

Una vez construido puedes verificar que en el directorio de salida de los archivos producidos (por defecto es _site) que la carpeta de archivos estáticos ha sido copiada correctamente y que los archivos dentro de ella no han sido modificados.

Cómo referenciar los archivos estáticos en un template o página de contenido

Cuando realizas el copiado de los archivos estáticos tal como hemos explicado en este artículo la carpeta que copias se vuelca directamente pero no el directorio en sí. Por ejemplo, si dentro de "static" tengo una carpeta llamada "images", lo que se copiará es la carpeta "images" y se colcará de la raíz del proyecto.

Es por ello que si tengo un archivo que estaba en la ruta: /static/images/world.png, en el sitio construido se encontrará en la ruta /images/world.png. Solamente debes tener en cuenta este detalle a la hora de crear los enlaces a los archivos estáticos.

Para evitar posibles problemas además es recomendable utilizar rutas absolutas. Por ejemplo, si quisiéramos utilizar una imagen /static/images/world.png la podríamos invocar así desde un layout.

<p>
  <img src="/images/world.png">
</p>

Eso es todo por lo que respecta a los archivos estáticos. No hay mucho más que contar. De hecho es la manera más sencilla de lidiar con archivos. Ya en el caso que necesites procesarlos para optimizarlos, compactarlos o transformarlos, se requerirán otros mecanismos más complejos.