Instalación

Para lo que sigue necesitamos tener instalado (y actualizado) node, y saber trabajar sobre el mismo.

La instalación de Node normalmente es sencilla. Puede hacerse descargando los instaladores desde https://nodejs.org/es o si usamos Linux con el gestor de paquetes de la distribución que tengamos (el paquete que instalamos puede estar un poco atrasado respecto a la última versión de Node, pero nos evita luchar con las dependencias).

Por costumbre utilizo npm, pero no hay mucha diferencia si prefieren yarn.

Los paquetes principales que utilizo para comenzar (luego agrego otros para fines específicos) son:

• Eleventy : el generador del sitio

• TailwindCSS : para los estilos

• PostCSS : ya que utilizo tailwind como plugin de postCSS

• Snowpack : para organizar la construcción del sitio.

• varios plugins para los anteriores.

Si se sienten más cómodos con otro entorno no es muy dificil la configuración.

En otros sitios sobre los que estoy trabajando uso distintas combinaciones, como ser Parcel, scripts de node o Gulp en lugar de Snowpack, estilos con SCSS,en sustitución de Tailwind, etc. Lo que tienen en común es el uso de Eleventy.

Una vez creado el directorio en el voy a trabajar y ubicado sobre el mismo.

Creo el package.json del sitio:

npm init -y

Inicio el repositorio git local:

git init

Instalo los paquetes principales:

npm install --save-dev @11ty/eleventy snowpack postcss tailwindcss autoprefixer @snowpack/plugin-postcss @snowpack/plugin-run-script

En este punto aparece una advertencia:

Se encuentran

"10 high severity vulnerabilities"

En los paquetes instalados.

Estas vulnerabilidades tienen que ver con un par de paquetes que usa eleventy. Como la reparación conlleva el uso de una versión muy antigua de eleventy lo dejo como está.

Estas vulnerabilidades serían importantes si perjudicaran al código final, pero en nuestro caso no lo afectan.

ACTUALIZACIÓN:

Al 27 de agosto de 2022, las vulnerabilidades han sido corregidas, solo quedan unos pocos "warnings" por tres paquetes desactualizados.

En esto eleventy es muy flexible, no requiere de ninguna estructura en especial.

En mi caso, para tener las cosas ordenadas preparo el siguiente arbol de directorios:

directorio raiz
├── node_modules
├── build                 el sitio listo para publicar         
├── eleventy              etapa intermedia luego de procesar con Eleventy
├── recursos            
│   ├── css               estilos extras como ser los de Katex o Prism
│   ├── fuentes         
│   └── imagenes  
├── src                 
│   ├── acerca
│   ├── css               los estilos propios
│   ├── _data             datos globales
│   ├── docencia
│   ├── _includes       
│   │   ├── componentes   elementos como ser botones 
│   │   │   (parte de los componentes los creo como shortcodes de eleventy en lugar de acá) 
│   │   └── secciones     partes de la página: head, header, nav, footer
│   ├── js                javascript del sitio
│   ├── programacion      
│   ├── varios
│   └── index.html, 404.html
├── varios                partes que no quiero que procese eleventy
└── archivos de configuración, package.json, .gitignore, etc. 

Los directorios _acerca_, _docencia_, _programación_ y _varios_ son propios de mi sitio.

Nota: Algunos de los archivos y directorios que son locales en la etapa de desarrollo ("dev"), pueden pasar a ser externos desde CDN en la de construcción ("build"). Esto incluye a las fuentes, estilos y scripts de librerías externas, y en otros de mis sitios imágenes de unsplash.com y similares.