Eleventy, también conocido por el acrónimo 11ty, es un generador de sitios estáticos que nos permite una gran sencillez y capacidad de personalización. Un SSG que con una curva de aprendizaje suavizada que permitirá evolucionar a medida que tu proyecto lo necesite.
En este manual aprenderás a trabajar con Eleventy, avanzando desde los sitios más básicos, la gestión de layouts, el trabajo con assets (Javascript, CSS, imágenes), el inicio de proyectos basados en "starter projects" y todas las herramientas de gestión de contenido que nos aporta la herramienta.
Si estás evaluando la posibilidad de crear un proyecto basado en sitios estáticos Eleventy tiene muchas ventajas. La principal es su versatilidad, ya que no te obliga a trabajar con un framework frontend determinado, ni a tener una estructura de proyecto. Además puedes usar diversos motores de templates, para usar aquel que te parezca más adecuado o sencillo para ti. A lo largo del manual explicaremos diversas configuraciones y usos para que lo tengas todo bien claro.
Este manual está en proceso de creación, así que esperamos publicar nuevos artículos con regularidad.
En Manual de Eleventy encuentras:
Artículos del manual
-
Introducción al SSG Eleventy
En esta introducción veremos los conceptos esenciales para comenzar a usar el generador de sitios estáticos Eleventy. Veremos en líneas generales cómo desarrollar un proyecto desde cero, aprendiendo temas importantes como la gestión de colecciones y personalización de las distintas secciones, uso de layouts y mucho más.
-
1
Primeros pasos con Eleventy
Aprende los primeros pasos con Eleventy, desde cero, comenzando por revisar sus requisitos y la creación de una carpeta donde construiremos nuestro primer sitio. Aprenderás también los comandos básicos para arrancar el proyecto o construir el sitio.
-
2
Cómo crear un layouts en Eleventy SSG
En este artículo vamos a realizar una primera aproximación a la creación de layouts en Eleventy, haciendo una plantilla inicial para un sitio estático, aprendiendo sobre sintaxis de los templates y markdown.
-
3
Listados de las páginas de una sección en Eleventy
Ahora vamos a aprender a crear listados de las páginas que hay en una sección del sitio, lo que sería una colección de páginas de una carpeta particular, para mostrarlos en páginas de índice.
-
Cómo comenzar un proyecto Eleventy basado en un starter proyect
Los starter proyects de Eleventy son el equivalente a los temas de WordPress. Podemos crear un proyecto desde cero, desarrollando todos los contenidos del sitio desde una carpeta vacía pero también es posible basarse en el código de otros desarrolladores, que ya nos ofrecen una base de archivos y tecnologías integradas que nos ahorrarán muchas horas de programación y, de paso, nos permitirán aprender muchas cosas de nivel medio y avanzado sobre el trabajo con este SSG.
-
4
Proyectos Eleventy preconfigurados con los starter projects
En este artículo te vamos a hablar de los Starter Projects, que son proyectos preconfigurados de Eleventy, que te ofrecen un diseño y configuraciones diversas con los que poder comenzar los proyectos de una manera ágil y productiva.
-
Gestión de Javascript, CSS y otros assets
En los próximos artículos te vamos a enseñar a trabajar con Javascript, mediante varias aproximaciones más o menos complejas pero que ofrecen siempre prestaciones útiles en la gestión del proyecto y los archivos de la parte del frontend. Veremos cómo usar Javascript sencillo pero también el Javascript avanzado que quizás necesites compilar o transpilar (usando Vite). Además veremos cómo gestionar el CSS y usar preprocesadores como Sass.
-
5
Cómo agregar Javascript en un sitio Eleventy
Cómo podemos incluir código Javascript en una página generada con Eleventy, haciendo que en el proceso de producción del sitio se copien los archivos de código JS necesarios para el proyecto.
-
6
Integrar Vite en Eleventy
En este artículo te vamos a explicar cómo usar Vite para compilar y optimizar el código frontend (Javascript / CSS) en los sitios web desarrollados con el SSG Eleventy.
-
7
Cómo compilar el código Sass en un sitio con Eleventy
Ahora veremos cómo se puede aplicar los conocimientos aprendidos sobre Vite en proyectos Eleventy para poder compilar el código que podemos haber generado con el preprocesador Sass.
-
8
Trabajar con archivos estáticos en Eleventy
En este artículo vamos a explicarte cómo debes configurar tu proyecto con Eleventy para lidiar con archivos estáticos en el proyecto, es decir, imágenes, pdf y otros ficheros que no necesiten procesamiento en el proceso de build.
-
Cómo usar los motores de templates que vienen con Eleventy
Ahora vamos a volver de nuevo a temas básicos que habíamos abordado de pasada en artículos anteriores pero que son especialmente importantes para el desarrollo de un sitio estático con Eleventy. Para ello abordaremos practicas interesantes que te permitirán entender y aprovechar las posibilidades y características de los motores de plantillas que vienen con Eleventy.
-
9
Trabajar con templates parciales en Eleventy
Vamos a dedicarnos ahora a avanzar un poco más en lo que es el trabajo con plantillas en Eleventy, concretamente con el motor Liquid. Veremos cómo usar parciales y crear unos layouts en base a otros.
-
Generación de contenido en Eleventy
Cómo crear el contenido de un sitio en Eleventy, en lo que respecta a las páginas y las colecciones. Cómo puedes configurar el generador de sitios estáticos para definir la forma en la que se generará el contenido. Qué tipos de formato de origen puedes usar, cómo se producirá la salida dependiendo de cada tipo de contenido y mucho más.
-
10
Cómo generar contenido en Eleventy
Más detalles sobre las alternativas de generación de contenido de páginas en Eleventy. Tipos de archivos, rutas, configuraciones de carpetas de origen de los ficheros, etc.
-
11
Colecciones en Eleventy
En este artículo vamos a profundizar en el tema de las colecciones en Eleventy, viendo cómo podemos crear navegadores y páginas de índice, así como distintos modos de definir colecciones y solucionar problemas típicos en su tratamiento.