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.

En este momento ya tenemos un conocimiento básico de Eleventy pero podemos mejorar bastante lo presente con nuevas prácticas que nos permitirán ser más organizados y llegar más lejos. Cambiaremos la estructura del proyecto, crearemos scripts npm, configuraremos Eleventy, trabajaremos con imágenes, etc.

Ahora vamos a aprender a trabajar con las colecciones, que es una manera de estructurar el contenido que vamos a publicar en el sitio. Veremos cómo hacer colecciones, cómo configurarlas, como gestionar listados de colecciones y más.

Vamos a aprender a trabajar con una herramienta frontend avanzada como es Vite, de modo que podamos aplicar técnicas de desarrollo Javascript más avanzadas y frameworks de CSS. Además integraremos una biblioteca de componentes de UI.

Cómo acceder a datos para construir nuestras aplicaciones con Eleventy.

Explicaremos cómo podemos llevar un proyecto a producción en Netlify, un servicio gratuito de hosting de sitios estáticos (también se puede pagar si el proyecto es muy grande y tiene mucho tráfico). Netlify nos permitirá realizar de una manera extremadamente simple la configuración de un proceso de build con CI/CD y otras herramientas útiles para casos frecuentes como el envío de formularios.