Introducción
Existen varios programas y herramientas que se utilizan para crear sitios web. Una herramienta que se está convirtiendo rápidamente en un pilar se denomina generador de sitios estáticos (SSG). Un SSG es una aplicación que crea automáticamente los archivos HTML, CSS y JavaScript necesarios para generar un sitio web. Los SSG han ganado popularidad debido a su flexibilidad. Se pueden utilizar como una herramienta independiente o integrarse profundamente en una arquitectura web de su elección.
Para describir las tecnologías web subyacentes que impulsan los SSG y las características que los hacen útiles, este artículo explorará varios conceptos relacionados con “estático”, “sitio” y “generador”.
Estático
Cuando un usuario visita una página de un sitio web, se realiza una solicitud a un servidor web, que responde con un archivo específico en función de esa solicitud.
Por ejemplo, supongamos que un usuario solicita una página en un sitio web tradicional o dinámico. El servidor podría necesitar consultar una base de datos, enviar los resultados a una aplicación de plantillas y, finalmente, generar el archivo HTML para mostrarlo en el navegador. Esta página se genera, a pedido, cada vez que se realiza una solicitud en esta arquitectura.
Por el contrario, en un sitio estático, los archivos solicitados ya se encuentran en el servidor web. Esto es lo que se entiende por el término estático : los archivos utilizados para mostrar el sitio no cambian porque ya contienen el código HTML, CSS y JavaScript. No hay nada que convertir, generar o transformar a pedido porque se generaron antes de la solicitud de la página.
Para ser claros, un sitio estático puede seguir siendo interactivo. Elementos como código JavaScript, animaciones CSS, elementos de video y audio y formatos de datos como JSON aún son compatibles y pueden ejecutarse con normalidad en un sitio estático. La única diferencia es que los archivos en sí se generan con anticipación en lugar de generarse a pedido.
Una página de destino o una publicación de blog son ejemplos de un sitio estático. Por otro lado, una página de deportes en vivo o una sección de comentarios son ejemplos de sitios web dinámicos. Para sitios dinámicos como estos, se necesita un servidor o una llamada API para realizar un procesamiento adicional con el fin de mostrar un elemento al usuario correctamente. Puede leer sobre el espectro de representación para comprender mejor cómo los sitios web utilizan una variedad de técnicas para mostrar contenido a los usuarios.
Sitio
En cualquier sitio, se necesita una forma de organizar y crear contenido. Los generadores de sitios estáticos ofrecen una forma simplificada de realizar esta tarea. Con un generador de sitios estáticos, puede crear y organizar la estructura de su sitio, al mismo tiempo que tiene acceso directo al contenido. Una de las tecnologías integrales comunes a muchos generadores de sitios estáticos para ayudar a administrar todo esto se denomina motor de plantillas .
Motor de plantillas
Un motor de plantillas es un software que crea plantillas para elementos comunes que aparecen en su sitio. En lugar de codificar HTML repetitivo para cada página de su sitio web, un motor de plantillas ayuda a crear estos elementos para todas sus páginas. Por ejemplo, si tiene un encabezado y un pie de página que deben estar en todas las páginas de su sitio, puede escribir este código una vez y aplicarlo a las páginas con código de plantilla. También puede usar variables y expresiones para crear o reemplazar valores dentro de una plantilla.
Tenga en cuenta que muchos SSG le permiten elegir el lenguaje de plantillas, mientras que otros vienen con un marco de interfaz y un lenguaje de plantillas ya seleccionado para usted. Los motores de plantillas como Nunjucks , Pug , Liquid y Blade le ofrecen diferentes formas de crear plantillas.
A continuación se muestra un ejemplo de una plantilla base en el motor de plantillas Nunjucks:
!DOCTYPE htmlhtml head meta charset="UTF-8" titleYour Website/title /head body header {% block header %} This is your header content {% endblock %} /header div{% block content %}{% endblock %}/div footer {% block footer %} This is your footer content {% endblock %} /footer /body/htmlPuede pensar en una plantilla base como un contenedor de marcadores de posición. Las {% block %}etiquetas son bloques de código de plantilla. Estos pueden contener contenido o dejarse vacíos para que las plantillas secundarias los rellenen o los anulen . Observe que cada {% block %}etiqueta tiene un nombre de variable adjunto. Por ejemplo, dentro de la headeretiqueta HTML hay una etiqueta que especifica que este bloque se llama{% block header%}encabezamientoPuedes nombrarlo como quieras, sin embargo, se recomienda utilizar nombres de variables descriptivos para evitar confusiones.
Los motores de plantillas realizan un trabajo pesado para crear estas plantillas reutilizables que luego se convierten en HTML. Estos archivos de plantilla generalmente se colocan en un directorio llamado layoutso templates. Debido a que las plantillas están diseñadas para ser reutilizables, no es frecuente que escriba contenido directamente dentro de sus archivos de plantilla. Para el contenido, puede crear lo que se denomina archivos Markdown .
Reducción
Markdown es un lenguaje de marcado que se utiliza para agregar formato a documentos de texto sin formato antes de convertirlos a HTML. Aunque no es un reemplazo completo para escribir HTML, Markdown puede ayudarlo a escribir y estructurar su contenido sin preocuparse demasiado por las etiquetas HTML.
Por ejemplo, si necesitas crear una lista desordenada en HTML, tienes que crear una uletiqueta y, dentro de ella, anidar los elementos de la lista envueltos con la lietiqueta. En Markdown, puedes crear esta lista con un asterisco *.
ul liThing 1/li liThing 2/li liThing 3/li/ul* Thing 1* Thing 2 * Thing 3Muchos SSG te permiten escribir todo tu contenido en Markdown, aparte de la base de código que lo abarca. De esta manera, puedes concentrarte en escribir contenido en lugar de código, aunque tienes la opción de escribir HTML simple en un archivo Markdown. Estos archivos suelen denominarse archivos de contenido y suelen almacenarse dentro de un directorio específico de contenido. Tu contenido se representará en consecuencia cuando se combine con la potencia de tus plantillas y los metadatos utilizados en Front Matter .
Información: Puede aprender cómo nuestro motor Markdown personalizado y de código abierto potencia y formatea el contenido en el sitio de la Comunidad de DigitalOcean.
Metadatos y Front Matter
Otra herramienta poderosa en la caja de herramientas de SSG son los lenguajes que ayudan a configurar y formatear metadatos. YAML , TOML y JSON son los lenguajes que se usan para definir metadatos dentro de la información preliminar de sus archivos de contenido. La información preliminar son los datos estructurados que describen o definen atributos sobre el contenido. También puede usar estos datos para aplicar un diseño específico de sus plantillas. Estos datos generalmente se ubican en la parte superior de cualquier archivo de contenido.
Por ejemplo, con Front Matter puedes definir un título, un autor, proporcionar una breve descripción de tu contenido y utilizar un diseño específico de tus plantillas:
---title: Front Matter Mattersauthor: Author Namedescription: Write out your description herelayout: base.html---Este ejemplo utiliza el lenguaje YAML para definir el contenido de la página. Los tres guiones ---en la parte superior e inferior encapsulan los metadatos de la portada. Sin estos guiones, los metadatos no funcionarán. En la práctica, puede incluir más o menos elementos de metadatos. Junto con un motor de plantillas y Markdown, su contenido se mostrará en una página según la forma en que haya estructurado su sitio.
La estructuración de la portada puede volverse cada vez más compleja a medida que el sitio crece. Aunque no está en este artículo explicar las complejidades, puedes usar la portada para crear enlaces, etiquetas y más para personalizar tu sitio.
Generador
Después de estructurar y crear el contenido de su sitio, lo que queda es construirlo. Durante este proceso de construcción, todos sus activos (incluidos elementos como CSS, imágenes, JavaScript, metadatos y más) se ingresan en un flujo de trabajo y se unen. Estos activos generalmente se minimizan, se transpilan, se compilan, se agrupan y, finalmente, se entregan al usuario como archivos estáticos.
Minificación
Cuando se minimizan los recursos , una aplicación elimina los espacios en blanco, las sangrías, las nuevas líneas, los nombres de variables largos y los comentarios de código para mantener el archivo lo más pequeño posible. A esto a veces se lo denomina “fealizar” el código, ya que elimina gran parte del formato que lo hace fácil de leer. Aunque pueda parecer extraño, el código sigue funcionando igual cuando se minimiza.
El siguiente es un ejemplo de algún código CSS antes de la minimización:
html { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit; margin: 0; padding: 0;}body { background: seagreen; font-family: sans-serif;}.wrapper { padding: 1rem; border-radius: 1rem; display: flex;}Aquí está el mismo código, pero minimizado:
html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}Los archivos minimizados no están pensados para ser editados. Dado que el código minimizado está contenido en un archivo nuevo, es el que se utiliza en el sitio de producción. En cambio, si necesita realizar modificaciones, edite el archivo original sin minimizar, vuelva a guardar y compilar el archivo minimizado y reemplácelo en el servidor para reflejar los cambios.
Agrupamiento
Es una práctica habitual escribir el código en archivos separados durante el desarrollo. Esto le permite utilizar fragmentos de código más pequeños y manejables en lugar de un único archivo monolítico que contenga todo el código de su sitio.
Por ejemplo, es posible que tengas varios scripts y módulos que se llaman entre sí cuando se hace clic en un botón. También es posible que tengas varias hojas de estilo CSS para las diferentes páginas y elementos de tu sitio. Además, también puede ser cierto que tus scripts y CSS dependan entre sí para su funcionalidad. Cuando tu sitio está en producción, tener que solicitar todos estos recursos individualmente puede ralentizarlo, ya que cada uno agrega un poco de latencia al proceso de renderizado. Esto es lo que la agrupación está diseñada para resolver.
La agrupación de código es el proceso de combinar y fusionar código en un solo archivo. Por ejemplo, si las funciones, módulos y componentes de JavaScript están contenidos en archivos separados, la agrupación los fusiona en un solo archivo JavaScript. Lo mismo sucede si escribes tus estilos utilizando un preprocesador CSS, como SASS , donde el código está separado. La agrupación también compilará estos archivos en un solo archivo CSS.
Al final, la agrupación, al igual que la minimización, es un proceso de optimización. En lugar de solicitar varios scripts u hojas de estilo, al agrupar, el navegador puede que solo necesite solicitar unos pocos.
Los distintos empaquetadores utilizan distintos procesos para fusionar el código. Hay bastantes empaquetadores y cada SSG suele estar integrado con uno. rollup.js , Parcel y webpack son ejemplos de empaquetadores. Los SSG como Gatsby y Next.js utilizan webpack para agrupar sus activos.
Transpilación y compilación
El proceso de transpilación y compilación esencialmente convierte su código en archivos que cualquier navegador web puede leer y ejecutar.
En general, un compilador es una aplicación que traduce y convierte un lenguaje de programación de nivel superior en un lenguaje de programación de nivel inferior. Por ejemplo, un compilador podría traducir código C en 1 y 0, código de máquina, para ejecutar un programa.
Un transpilador es un tipo de compilador que traduce código de un lenguaje de programación a otro equivalente. Por ejemplo, el proceso de transpilación podría implicar convertir código escrito en el lenguaje de programación Typescript en el lenguaje JavaScript. Dado que los navegadores web no entienden el código Typescript, es necesario traducirlo a JavaScript para que un navegador pueda ejecutarlo.
La popular aplicación de JavaScript llamada Babel es un ejemplo de estos conceptos en la práctica. Babel hace todo lo posible para garantizar que el código JavaScript sea legible tanto en navegadores antiguos como modernos. Otro ejemplo de esto es Autoprefixer . Detecta características CSS más nuevas e inserta las alternativas adecuadas para una mayor compatibilidad con navegadores.
Ya sea que esté trabajando dentro de una base de código heredado o con la sintaxis más nueva, el proceso de transpilación y compilación interpreta el código para el navegador para lograr el soporte más profundo posible para que los usuarios puedan interactuar con la página como lo desea.
Comando de construcción
Cuando hayas terminado de crear tu sitio, puedes escribir buildel comando específico de tu SSG en tu terminal. Este comando está configurado para minimizar, transpilar, compilar, agrupar tu código y realizar cualquier otra tarea necesaria para servir tus archivos estáticos. Por ejemplo, si estás usando el SSG de Gatsby, deberás escribirlo gatsby builden tu terminal para iniciar la compilación.
Durante el proceso de compilación, es posible que notes que la terminal muestra el progreso de la compilación. Esto incluye detalles específicos sobre cómo se procesan los archivos. También es posible que encuentres mensajes de error durante este proceso que te indiquen dónde se produjo la falla. Si todo se ejecuta correctamente, la terminal te lo informará una vez que haya finalizado la compilación.
Durante una compilación exitosa, los archivos HTML, CSS y JavaScript estáticos necesarios para renderizar el sitio se colocan en un directorio publico dist. El nombre exacto de esta carpeta dependerá de su configuración.
Nota: Si está interesado en una explicación más profunda de este proceso, la excelente documentación de Gatsby detalla lo que sucede durante su proceso de compilación .
Después de crear su sitio, puede terminar con una estructura de sitio similar a esta:
your_project_root├── node_modules├── public├── src│ ├── css│ │ └── styles.css│ ├── js│ │ └── script1.js│ │ └── module.js│ ├── images│ │ ├── dog.jpg│ │ └── cat.jpg│ ├── _includes│ │ ├── partials│ │ │ └── about.html│ │ └── layouts│ │ └── base.html│ ├── posts│ │ ├── post-1.md│ │ ├── post-2.md│ │ ├── post-3.md│ └── index.html├── .your_SSG_config.js├── package.json├── package-lock.json├── README.md└── .gitignoreTenga en cuenta que, según el SSG que utilice, la estructura de archivos puede incluir distintos archivos y directorios. Si bien puede haber una cantidad significativa de trabajo al principio al crear un sitio con un SSG, la recompensa son archivos estáticos que se entregarán sin procesos de servidor adicionales, lo que crea una experiencia de carga más rápida para sus usuarios.
Más allá de la estática
Los generadores de sitios estáticos son herramientas poderosas por sí mismos. Junto con otras tecnologías web, pueden difuminar la línea entre lo estático y lo dinámico. Los SSG desempeñan un papel integral en el ecosistema Jamstack . Al igual que una pila LAMP o MEAN, Jamstack es otra forma de crear y diseñar un sitio web o una aplicación web. Utiliza el poder de los SSG para crear HTML estático y utiliza JavaScript y llamadas API para conectarse a servicios y bases de datos de backend.
Un SSG también puede funcionar en conjunto con un CMS. Este otro modelo de desarrollo se denomina CMS sin interfaz gráfica . Con un CMS sin interfaz gráfica, tienes una forma de almacenar datos, una interfaz gráfica de usuario con la que interactuar para el contenido y un punto final de API al que conectarte. En este modelo, estás eliminando la capa de presentación (la “cabeza”) del sistema de administración de backend. Un SSG llena este rol faltante para la capa de presentación. Por ejemplo, un editor puede usar la interfaz del CMS para crear contenido que luego se almacena en la base de datos. Un desarrollador puede acceder a ese contenido a través del punto final de API y crear una vista para mostrar el contenido a los usuarios.
Los SSG también son extensibles. Con diferentes complementos y módulos, su SSG puede convertirse en algo más que su oferta inicial. Por ejemplo, en Eleventy , puede usar un complemento para optimizar y cambiar el tamaño de sus imágenes e incluso utilizar funciones sin servidor para crear páginas dinámicas. Según sus necesidades, un SSG puede crecer en complejidad y funcionalidad, sin dejar de generar archivos estáticos.
Conclusión
En este artículo conceptual, aprendiste sobre algunas de las tecnologías subyacentes que utilizan los generadores de sitios estáticos para crear un sitio web. Con esta información, ahora tienes una mejor comprensión sobre cómo se crean los sitios estáticos con un SSG.
Si desea saber más sobre cómo crear un sitio con un SSG, tenemos una serie de tutoriales sobre el popular SSG Gatsby .
Si está interesado en Eleventy, también tenemos un tutorial sobre cómo crear e implementar su primer sitio web de Eleventy .