Posiblemente la forma más fácil de ejecutar un SSG

“Generador de sitios estáticos”, es decir. Llegaremos a eso en un segundo.

Netlify es patrocinador de este sitio (muchas gracias) y veo que Zach Leatherman se ha ido a trabajar allí ahora. Muy genial. Zach es el creador de Eleventy , un SSG para Node. Una de las muchas cosas notables de Eleventy es que ni siquiera tienes que instalarlo si no lo deseas. Déjame preparar el escenario.

Supongamos que tiene un sitio web de tres páginas y una de las razones por las que desea utilizar un SSG es porque desea repetir la navegación en las tres páginas. ¡Una “inclusión HTML”, una de las necesidades más antiguas en el desarrollo web, está ahí! Hemos cubierto muchas formas de hacerlo en el pasado. Entonces tenemos…

/my_project- index.html- about.html- contact.html

Y cada uno de esos archivos HTML necesita esta parte repetida de navegación.

!DOCTYPE htmlhtml  head    titleSouthside Laundromat/title  /head  body    {{ INCLUDE NAVIGATION HERE }}    Unique content to this page.  /body/html

Bueno, ¿por qué no guardamos ese bloque de navegación en un archivo, así que…?

/my_project- /_includes  - nav.html- index.html- about.html- contact.html

Que es algo así como…

nav  a href="/"Home/a  a href="/about/"About/a  a href="/contact/"Contact/a/nav

Entonces, ¿cómo hacemos realmente la inclusión? Aquí es donde entra Eleventy. Eleventy admite varios lenguajes de plantillas, pero el predeterminado es Liquid . ¡El archivo de soportes líquidos incluye! Como esto…

{% include ./nav.html %}

Esa es la línea que puse en cada uno de los tres archivos HTML. ¿Cómo lo tramite entonces? ¿No es este el momento en el que tengo que instalar Eleventy para que todo funcione? No, puedo ejecutar un solo comando en la línea de comando para que esto suceda (suponiendo que tenga npm instalado):

npx @11ty/eleventy

Aquí hay un vídeo de 30 segundos que muestra su funcionamiento:

No hay package.json. No hay npm install. En cierto sentido, esta es una forma sin dependencia de procesar un sitio estático, lo cual creo que es genial. Eleventy lo procesa todo en una _sitecarpeta de forma predeterminada.

Digamos que quiero implementar este sitio estático… en el lado de Netlify, puedo decirle que lo que quiero implementar es esa _sitecarpeta. Tampoco necesito confirmarlo (y tú tampoco deberías), así que puedo ponerlo en un .gitignorearchivo. Netlify puede construirlo exactamente con el mismo comando.

Podría guardar esas configuraciones en un archivo si fuera más fácil de administrar que el sitio mismo. Esto es lo que iría en un netlify.ymlarchivo:

build:  command: "npx @11ty/eleventy"  publish: _site

El objetivo de este artículo es ¡ Comprueba lo genial que es que ni siquiera tengas que instalar nada para ejecutar un SSG! Eso implica una compensación de velocidad. Será más rápido, tanto localmente como para las computadoras en la nube que ejecutan sus compilaciones, instalar paquetes.

Mientras trabajaba en esta demostración para bebés, terminé queriendo una pizca de configuración para Eleventy en el sentido de que quería que mis archivos CSS vinieran al sitio procesado, así que…

module.exports = function(eleventyConfig) {  eleventyConfig.addPassthroughCopy("./styles");};

Eso es todo.