Curso de Eleventy SSG

En este vídeo vamos a explicar a qué nos referimos cuando mencionamos "sitio estático" en el contexto de Eleventy. Qué es un Static Site Generator, conocido también por las siglas SSG, cuáles son sus características y las diferencias con otros modelos tradicionales como el desarrollo con lenguajes como PHP, Python o sistemas de gestión de contenido como WordPress. También veremos qué nos ofrece Eleventy y por qué es una alternativa ideal para el desarrollo de proyectos web.

En esta clase vamos a ver qué es un Static Site Generator, cuáles son sus ventajas y por qué son una solución óptima para muchos tipos de proyectos. Además explicaremos qué es Jamstack y por qué se ha hecho tan popular en los últimos años. Por último comenzaremos a trabajar en un sitio con Eleventy y veremos lo sencillo que es comenzar a desarrollar nuestro sitio con este SSG.

Vamos a ver qué necesitas para trabajar con Eleventy, básicamente la plataforma de desarrollo para Javascript NodeJS y un terminal. Veremos cómo instalar NodeJS y cómo conseguir un terminal adecuado para los que están en Windows, ya que los que tienen MacOS y Linux ya disponen de un terminal bueno de casa.

Como un primer paso para crear un proyecto con Eleventy necesitamos generar el package.json. Este paso es el mismo que hacemos para organizar un proyecto NodeJS e incluso la mayoría de los proyectos frontend actuales. Seguramente ya lo conozcas pero lo vamos a explicar sobre todo pensando en las personas con menos experiencia. De todos modos, también veremos algo importante que es asegurarnos de usar los ESModules en nuestro proyecto Node para facilitar el trabajo en el código de los módulos usando imports.

Vamos a aprender a generar contenido en Eleventy, por medio de archivos Markdown. Además veremos cómo hacer las dos operaciones básicas con el SSG: construir los archivos (lo que se haría en el paso de build del proyecto) y cómo arrancar el servidor de desarrollo para ver la página web que estamos creando con live-reload.

Como mejora de los flujos de trabajo vamos a explicar qué son los scripts de npm y veremos cómo crear scripts, una especie de shortcuts, para poder ejecutar más rápidamente los comandos de abrir el servidor de desarrollo y llevar a producción (start y build).

Veremos que los pasos anteriores nos generaron contenido HTML bastante "crudo". Lo normal es que ese contenido lo quieras meter en un marco, con una estructura de HTML completa, que incluyan además elementos como una barra de navegación, enlace a una hoja de estilos, etc. Para ello vamos a mostrar cómo trabajar con layouts, creando un primer layout básico que iremos mejorando a lo largo del curso de Eleventy. Veremos además qué es el front matter y cómo lo indicamos en los archivos markdown por medio de una sintaxis Yaml.

En este vídeo vamos a ver los primeros pasos para configurar un proyecto Eleventy. Para ello vamos a hacer algo muy típico, que es añadir CSS a un proyecto Eleventy. Explicaremos cómo enlazar el CSS en el layout y cómo se consigue que ese CSS se lleve a producción, mediante un copiado de archivos, algo que tendremos que definir en el archivo de configuración.

En el front matter de los archivos markdown, y de otros tipos de ficheros que podemos usar para especificar el contenido de las páginas en un proyecto Eleventy, podemos incluir muchos datos importantes. En este vídeo veremos cómo usar el front matter para poder añadir datos arbitrarios, con variables que podemos configurar de manera personalizada. Luego veremos cómo usar esos datos en los templates.

En Eleventy podemos usar muchos tipos de archivos como fuente de contenido para las páginas. En este vídeo te explicamos cómo usar archivos HTML, que nos pueden venir bien cuando tenemos contenido con muchas personalizaciones y una estructura más detallada de la que podemos construir con un simple markdown.

Vemos la manera más sencilla de integrar Javascript en un proyecto de sitio estático con Eleventy. Esta manera es suficiente para comportamientos clásicos de Javascript, nativos, que podrías requerir en los sitios web tradicionales donde quieras dinamismos limitados.

También en proyectos sencillos de sitios web podemos integrar librerías a través de un CDN, lo que nos facilita la integración. Veremos el ejemplo con la integración de una librería clásica como es jQuery, que nos permite la manipulación del DOM sin tener que acudir a los métodos nativos, que son demasiado verbosos. Además en el vídeo veremos una práctica en la que implementamos una caja modal sencilla.

A medida que vayamos incorporando archivos en el proyecto del sitio que estamos desarrollando con Eleventy verificaremos que empezamos a tener demasiadas cosas en la raíz del proyecto. Por tanto, antes de que nuestra estructura tienda al caos, vamos a pararnos un momento para organizar los archivos y carpetas del proyecto.

Veremos cómo añadir imágenes al sitio, asegurando que se copien cuando el sitio se vaya a construir para producción.

Vamos a ver cómo crear unos scripts de npm para que el sitio se pueda arrancar y producir de una manera más ágil.

Vamos a estudiar de una manera más detallada el archivo de configuración de Eleventy. Explicaremos los distintos tipos de archivos que podemos usar para definir la configuración, el modelo de código que podemos necesitar con ESModules o CommonJS y haremos un repaso sobre la documentación para ver como se configuran algunas cosas habituales.

Vemos la distinción entre páginas y colecciones. Generamos nuestra primera colección dentro del sitio Eleventy.

Ahora vamos a ver cómo crear el index de una colección, donde mostremos un listado de los elementos o páginas que hay dentro de una colección. Este listado lo realizaremos de manera dinámica, usando el array que Eleventy genera con cada una de las colecciones que hayamos definido en el proyecto.

Si queremos podemos crear un archivo de datos en formato JSON en la carpeta de la colección donde podemos configurar de una manera global todos los archivos que forman parte de la colección. Además veremos cómo excluir ciertos archivos de la colección si es que lo necesitamos.

En este vídeo vamos a ver que podemos crear unas colecciones dentro de otras colecciones. Esto nos puede ayudar organizar el contenido en nuevos niveles de profundidad. Veremos cómo poder gestionar los tags de distintas maneras en nuestros archivos, pudiendo heredar o sobreescribir configuraciones. Además veremos cómo hacer condicionales con el sistema de templates Liquid para conseguir que ciertos archivos de una colección no aparezcan en un listado.

Veremos cómo crear nuevos datos arbitrarios en un front matter, de modo que podamos enriquecer los listados de los ítem de la colección. Luego veremos los criterios que se usan para ordenar los elementos de las colecciones y cómo podemos crear nuestros propios órdenes si lo necesitamos, a través de filtrado.

Eleventy también nos permite acceder a todos los elementos unificados, de todas las colecciones que tengamos en el proyecto. En este vídeo realizaremos varias prácticas de listados en las que seguiremos aprendiendo características como los filtros de Liquid, órdenes, límite de elementos en el listado, etc.

La gracia de estar usando Vite en el proyecto Eleventy es que nos permite usar librerías modernas en el sitio estático generado, tales como React, Vue, Lit y cualquier otra. Para ello necesitamos importar los archivos de las librerías a través de los nombres de los packages de npm, algo que solo podremos hacer si Vite se encarga de procesar esos imports y crear los correspondientes bundles.

Cómo instalar el plugin oficial de Vite para Eleventy que nos permite usar esta herramienta frontend en el flujo de desarrollo de un proyecto con el SSG Eleventy. Cómo funciona el plugin y qué tenemos que hacer para que los archivos de Javascript y CSS se puedan compilar y minimizar para optimizar su tamaño.

Otro aspecto que nos permite el uso de Vite es la posibilidad de instalar librerías de componentes de terceros, con los que incorporar de una manera cómoda elementos de interfaz gráfica que mejoren la experiencia de usuario y las funcionalidades de los sitios generados. En este vídeo lo veremos con un ejemplo de uso de componentes de terceros para hacer un menú emergente.

Ahora le toca el turno al código CSS, que también gracias a Vite podemos compilar y optimizar. Esto nos permitirá no solo hacer que el CSS ocupe menos espacio sino también dividir el código en diferentes archivos, lo que facilitará el mantenimiento, haciendo que Vite agrupe todo el código en un mismo CSS optimizado.

Dentro de las utilidades CSS tenemos los preprocesadores. En este vídeo veremos cómo usar el preprocesador CSS más popular, Sass en un proyecto Eleventy gracias al plugin de Vite.

Otra herramienta que se ha hecho muy popular en el trabajo con CSS es Tailwind. En este vídeo veremos cómo se integra Tailwind CSS en un proyecto Eleventy.

El frontmatter, o front matter (a veces se escribe separado) permite escribir datos, como ya hemos visto en otros vídeos. En este vídeo vamos a ver cómo esos datos pueden ser complejos. Se definen con sintaxis Yaml. Una vez definidos los datos en el frontmatter los podemos acceder únicamente en la página donde están contenidos.

Otro mecanismo más avanzado para definir datos en Eleventy y mucho más versátil es usar el directorio _data, que es el que está pensado específicamente para contener accesos a los orígenes de datos que necesites para generar las páginas estáticas del sitio. En este vídeo veremos cómo definir esos datos de manera literal por medio de archivos JSON. Gracias a este mecanismo conseguiremos datos que se podrán usar en cualquier página del sitio.

La manera más potente de definir datos es mediante Javascript. Para ello usamos la misma carpeta _data pero en vez de usar simples JSON usaremos archivos Javascript. Esto nos permitirá componer cualquier acción programática para el acceso a los datos. Ejemplos relevantes serían acceder a bases de datos o consultar servicios web. En este vídeo mostraremos cómo realizar una consulta a un API externa que nos devolverá datos y como haremos para que esos datos estén disponibles en las páginas generadas.

Realizar paginación en Eleventy es perfectamente posible gracias a las funcionalidades incorporadas en el SSG. Podemos paginar desde datos simples a colecciones de páginas. Para abordar la páginación comenzaremos por un ejemplo simple que nos permita entender los fundamentos para construirla.

Vamos a hacer un paréntesis antes de seguir con paginación, para mostrar cómo podemos modificar el aspecto del típico navegador entre páginas, aplicando clases de utilidad de Tailwind CSS.

Para que la experiencia de paginación sea un poco más avanzada vamos a ver cómo podemos hacer algunas mejoras en el navegador entre páginas, como poner enlace a la página siguiente anterior, cómo resaltar la página actual y otras cosas. Esto nos dará pie también a aprender a crear condicionales en los templates de Liquid.

En este video veremos algo que realmente casi cualquier sitio va a necesitar, que es la paginación entre elementos de una colección. De este modo podemos tener la típica página de inicio en la que puedes mostrar únicamente unas páginas, como los últimos post de un blog, y luego tener otras páginas donde se muestre el archivo de páginas antiguas, en lotes de una longitud limitada, para facilitar la navegación o el SEO.

En este vídeo veremos cómo usar los permalinks para que las páginas donde se ve el archivo de paginación tengan rutas personalizadas. Así podremos configurar a nuestro gusto las rutas de las páginas.

Ahora que ya conocemos paginación y hemos podido aprender a usar los permalinks podemos explicar el escenario más avanzado de uso de los orígenes de datos, que consiste en la creación de páginas individuales utilizando datos obtenidos mediante JavaScript. Para eso accederemos a los datos y haremos paginación de uno en uno, configurando el permalink donde se tiene que crear cada una de las páginas, según datos en crudo que hemos obtenido mediante un script de _data.

Aparte de las colecciones definidas por los tags podemos crear nuestras propias colecciones dinámicas, generadas programáticamente en el momento de build del proyecto. Para ello usaremos el método addCollection() dentro de la configuración de Eleventy y la Collections API.

El sistema de templates Liquid, el predeterminado de Eleventy viene con una buena cantidad de filtros. Veremos cómo usar otros filtros ya definidos y cómo crear nuestros propios filtros personalizados con el método addFilter() que podemos usar en el archivo de configuración de 11ty.

A la hora de organizar nuestros templates es super importante echar mano de los partials, haciendo el include de bloques de marcado que podemos usar tanto para simplificar los layouts como para reutilizar código.

Pasar variables entre los distintos partials es esencial para alcanzar un buen nivel de reutilización de los templates parciales. Veremos cómo se hace para aumentar la versatilidad de los subtemplates y las posibilidades de reutilización de código y su personalización.

Antes de entrar en despliegue vamos a ver cómo solucionar posibles problemas de construcción del sitio estático cuando necesitamos copiar archivos en la raíz del proyecto, como el conocido archivo favicon.ico. Veremos que el post-procesado de Vite nos genera situaciones que pueden ser conflictivas con el copiado de archivos. Veremos cómo resolverlas.

Vamos a mostrar cómo desplegar un sitio construido con Eleventy en el servicio gratuito de Netlify y cómo se consigue el despliegue continuo del sitio, de manera automática cada vez que enviamos cambios a GitHub.

Ahora vamos a ver cómo configurar el proyecto en Netlify para que nuestro sitio se pueda servir mediante un dominio personalizado. Veremos además cómo proveer de un certificado de seguridad gratuito que nos permita que la página funcione mediante HTTPS.

Dentro de los servicios que ofrece Netlify orientados a sitios estáticos uno esencial es el envío de formularios. Veremos cómo construir un formulario de modo que se pueda recibir mediante Netlify, sin que el usuario necesite tener un cliente de correo en su equipo. Veremos cómo configurar avisos por correo electrónico cuando se reciban formularios y cómo configurar la página donde se redirige al usuario cuando se envía el formulario.

En este vídeo vamos a ver cómo con Netlify podemos configurar mecanismos antispam, para proteger los formularios. Esos mecanismos se pueden configurar de diversos modos. Explicaremos cómo activarlo con un honeypot pero nos centraremos en el sistema recaptcha, que es el más potente a la hora de evitar que los bots puedan rellenar nuestros formularios.

En este vídeo finalizamos el curso de Eleventy mencionando los próximos pasos y retos. En particular veremos cómo conseguir algo que quizás muchas personas hayan echado en falta, que es activar un CMS Headless, aconsejando un curso dentro de EscuelaIT para conseguirlo.