Cómo comenzar con Eleventy para el desarrollo de un sitio estático inicial. Veremos el setup inicial de un proyecto con 11ty y la incorporación de contenido en páginas y la posibilidad de trabajar con archivos CSS.
Con este artículo comenzamos el manual de Eleventy, un generador de sitios estáticos (SSG) también conocido como 11th. Eleventy es una excelente opción para los que buscan una solución sencilla y capaz de crecer para adaptarse a las necesidades de cualquier proyecto, llegando a comportarse de manera sofisticada si lo necesitas, o si tienes las suficientes habilidades como desarrollador. En resumen, se trata de un SSG fácil de aprender pero con todas las funcionalidades que necesitas para hacer sitios tan elaborados, simples o complejos como tu proyecto requiera.
Nuestro objetivo para este primer artículo es ofrecer una guía para dar los primeros pasos en Eleventy. Si quieres conocer a fondo las características de este SSG te recomendamos acceder a la categoría de 11ty.
Te dejamos los puntos que vamos a tratar en el artículo sobre Primeros pasos con Eleventy:
Requisitos para usar Eleventy
El generador de sitios estáticos 11ty está construido con JavaScript sobre la plataforma "Node". Por tanto, el primer paso sería instalar NodeJS, si es que no lo tienes todavía en tu ordenador.
Una vez instalado NodeJS tienes todo lo necesario para comenzar. Además sería ideal que contases con un editor de código para programadores como Visual Studio Code.
Creación del proyecto básico con Eleventy
11ty tiene una característica muy interesante con respecto a otras alternativas de SSG y es que no te obliga a tener una estructura de carpetas determinada. Puedes usar Eleventy en cualquier tipo de proyecto, con cualquier estructura de ficheros y compilar el contenido que haya en las carpetas que tú necesites.
Esto hace que podamos comenzar con Eleventy simplemente con una carpeta vacía.
Vamos a trabajar usando el terminal, ya que los comandos para arrancar el servidor de desarrollo y producir el sitio estático los tenemos que lanzar desde allí. Entonces, puedes abrir el programa de terminal de tu preferencia, para crear una carpeta vacía y meterte dentro:
mkdir eleventy-demo
cd eleventy-demo
Luego tenemos que iniciar un proyecto con npm para poder crear el típico archivo package.json.
Supongo que tienes conocimientos básicos de desarrollo con Javascript y entiendes a qué nos referimos. Si tienes dudas te recomiendo una rápida lectura para saber qué es npm y qué es nodejs.
El comando para inicializar el proyecto con npm es este:
npm init -y
Luego vamos a instalar Eleventy en este proyecto con el comando siguiente:
npm install @11ty/eleventy --save-dev
Por último podemos correr el proceso de generación del sitio estático con este comando.
npx @11ty/eleventy
Obviamente, no tenemos ningún contenido todavía que procesar!!! por lo que la salida que nos dará ese comando es que ha generado 0 archivos.
[11ty] Wrote 0 files in 0.01 seconds (v2.0.1)
Cómo crear contenido en Eleventy
Ahora vamos a crear un poco de contenido para comenzar a trabajar con archivos, de modo que tengamos algo que generar.
Vamos a crear dos archivos. Un archivo index.html y otro archivo README.md. Ambos archivos los vamos a colocar en la raíz del proyecto.
El código del archivo index.html será el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[11ty] Manual</title>
</head>
<body>
<h1>[11ty] Manual</h1>
<p>Esto es una simple prueba</p>
</body>
</html>
Ahora, el código de nuestro archivo README.md, en el lenguaje Markdown, tendrá una pinta como esta:
# Bienvenidos a Eleventy
Estoy aprendiendo Eleventy en DesarrolloWeb.com
Estos ficheros los puedes crear con tu editor preferido. Una vez creados estos archivos tendremos los siguientes elementos en el proyecto:
Ahora podemos compilar de nuevo los archivos y veremos que la salida cambia.
npx @11ty/eleventy
Ahora la salida de esta compilación tendrá otro aspecto más interesante, porque nos dirá que ha podido compilar un par de archivos.
Si te fijas ahora en la estructura de carpetas del proyecto verás que se ha creado un nuevo directorio llamado "_site", que es donde se encuentran los archivos que se han generado en el proceso de construcción del sitio estático.
Arrancar el servidor de desarrollo con hot-reload
También es muy útil este otro comando, que nos permite lanzar un servidor de desarrollo para ver el resultado del proyecto, una vez compilado, con la habilidad de refrescarse automáticamente cuando hacemos el guardado de los archivos que se deben compilar.
Para arrancar este servidor es suficiente con indicar el flag --serve, de esta manera:
npx @11ty/eleventy --serve
Al ejecutarse ese comando te mostrará la URL donde está el sitio para ver en marcha tu proyecto.
Cómo añadir un poco de CSS
Claro que nuestro sitio hasta el momento es absolutamente sencillo y a poco que quieras hacer necesitarás como mínimo una hoja de estilos CSS para aplicar un poco de formato.
Existen varias maneras de trabajar con assets y puedes añadir herramientas avanzadas como Vite si lo deseas. No obstante en esta primera prueba vamos a mantener las cosas sencillas y ya explicaremos más adelante flujos más complejos.
Vamos simplemente a decirle a Eleventy que debe copiar una hoja de estilos en el proyecto una vez lo haya generado.
Este proceso requiere unos pasos sencillos.
Creo un archivo CSS
El archivo puede tener cualquier código en CSS y lo podrías colocar potencialmente en cualquier ruta de tu proyecto.
Para esta demo lo vamos a colocar en la raíz del proyecto y lo vamos a nombrar como styles.css.
El contenido que hemos colocado es este:
h1 {
color: red;
border-bottom: 1px solid red;
padding-bottom: 0.5rem;
}
p {
color: #33f;
}
Lo enlazo al archivo index.html
Ahora lo tienes que enlazar dentro de tu archivo index.html. Lo hacemos con la etiqueta link habitual para estos casos en el HTML.
<link rel="stylesheet" href="styles.css">
Creo un archivo de configuración eleventy.config.js
El archivo eleventy.config.js es un archivo de configuración importante que se utiliza para personalizar y configurar diversos aspectos del proceso de generación del sitio. A través de este archivo, puedes hacer varias cosas como modificar la configuración predeterminada, configurar las transformaciones de código, agregar plugins y mucho más.
En vez del archivo de configuración
eleventy.config.jstambién podemos usar.eleventy.js. Ambos archivos son equivalentes. Se prefiere desde hace tiempoeleventy.config.jspara evitar el uso de archivos ocultos que a veces pueden causar confusiones en desarrolladores menos experimentados. Además es más consistente con respecto a las convenciones marcadas por otros archivos de configuración de otros proyectos Javascript populares.
Nota también que, si tu package.json tiene definida la configuración
"type": "module", indicando que en tus archivos estás usando ES Modules en lugar de CommonJS, necesitarás nombrar aeleventy.config.jscomoeleventy.config.cjs. Con ello podrás usar los require CommonJS que verás en todos los códigos de configuración de Eleventy en su documentación. Esto no da problemas, ya que por defecto, Eleventy buscará un archivo .eleventy.js, .eleventy.cjs, o bien eleventy.config.js, eleventy.config.cjs.Es otro ejemplo más de la versatilidad que demuestra Eleventy en la mayoría de sus facetas.
Nosotros lo vamos a utilizar para hacer el copiado del archivo de CSS al proyecto generado. Para ello vamos a usar el siguiente código fuente:
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("styles.css");
};
Ahora puedes compilar el proyecto y verás que te informa que está haciendo ese copiado del archivo CSS.
También puedes lanzar el comando para ejecutar el proyecto en el servidor de desarrollo y verificar la aplicación de los estilos CSS. Recuerda el comando con el --serve:
npx @11ty/eleventy --serve
Enlazar el css en el archivo markdown tendría algunas dificultades adicionales, puesto que nos hace falta aprender nuevas cosas como los layouts, que no es el momento de introducir.
Algo parecido lo podrías hacer con tu código Javascript o incluso archivos como las imágenes. Pero obviamente para proyectos un poco más complejos no te resultará suficiente, ya que generalmente usamos herramientas de desarrollo para hacer el bundelizado de los archivos Javascript, incluso el procesado del CSS. Eso no es problema para Eleventy, ya que es capaz de integrarse con herramientas como PostCSS o Vite, por poner un par de ejemplos.
En este artículo hemos visto lo más básico de Eleventy, lo que nos ha permitido dar nuestros primeros pasos. Por supuesto queda mucho por aprender, así que te esperamos en las próximas entregas de este manual.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...