Descripción general de los generadores de sitios estáticos populares

Todos los generadores de páginas estáticas tienen una tarea única y aparentemente sencilla: producir un archivo HTML estático y todos sus activos.

Hay muchos beneficios obvios al servir un archivo HTML estático, como un almacenamiento en caché más fácil, tiempos de carga más rápidos y un entorno más seguro en general. Cada generador de páginas estáticas produce la salida HTML de manera diferente.

Sin embargo, el propósito de esta publicación no es sumergirse y discutir las complejidades de su mecanismo, sino comparar el conjunto de características que ofrece cada marco y resaltar los aspectos y características únicos de cada marco.

Descripción general de los marcos de páginas estáticas populares

En esta publicación, veremos más de cerca los siguientes marcos de páginas estáticas: Jekyll , Middleman , Hugo y Hexo . Estos no son de ninguna manera los únicos generadores que existen, pero son los más utilizados, respaldados por grandes comunidades y muchos recursos útiles.

Echemos un vistazo más de cerca a cada uno de ellos y comparemos sus características básicas:

• jekyll
  • escrito en rubí,
  • es compatible con el motor de plantillas de Liquid listo para usar;
• Intermediario
  • escrito en rubí,
  • admite motores de plantillas ERB y Haml listos para usar;
• Hugo
  • escrito en Go,
  • es compatible con el motor de plantilla Go listo para usar;
• Hexo
  • escrito en JavaScript,
  • es compatible con EJS y Pug desde el primer momento.

Nota: Vale la pena señalar que cada uno de estos generadores de páginas estáticas se puede personalizar y ampliar mediante complementos y extensiones, lo que le permite cubrir la mayoría o todas sus necesidades.

Configuración de generadores de sitios estáticos

La documentación para cada uno de estos marcos es completa y excelente y puede obtenerla aquí:

Documentación de Jekyll

Documentación del intermediario

Hugo documentación

Documentación hexadecimal

Si simplemente sigue las guías de instalación, debería tener el entorno de desarrollo listo en cuestión de minutos. Una vez instalado, puede iniciar un nuevo proyecto ejecutando comandos desde la terminal.

Por ejemplo, así es como inicia un nuevo proyecto en diferentes marcos:

jekyll

jekyll new my_website

Intermediario

middleman init my_website

Hugo

hugo new my_website

Hexo

hexo init my_website

Configuración

La configuración generalmente se almacena en un solo archivo. Cada generador de sitios web estáticos tiene sus detalles, pero muchas configuraciones son las mismas en los cuatro.

Puede especificar dónde se almacenan los archivos fuente o dónde generar las fuentes construidas. Siempre es útil omitir los datos que no se utilizarán en el proceso de compilación configurando la opción de exclusión o skip_render . También puede usar el archivo de configuración para almacenar configuraciones globales como el título del proyecto o el autor.

Migración a un generador estático

Si ya tiene un proyecto de Wordpress listo para funcionar, puede migrarlo a un generador de páginas estáticas con relativa facilidad.

Para Jekyll, podrías usar el complemento Jekyll Exporter. Para Middleman, puede usar una herramienta de línea de comandos llamada wp2middleman. Puede usar Wordpress to Hugo Exporter para la migración de Hugo, y para Hexo, puede leer nuestra guía sobre cómo migrar de Wordpress a Hexo que escribí el año pasado.

El principio es casi idéntico y bastante sencillo: primero exporte todo el contenido a un formato adecuado y luego inclúyalo en la carpeta correcta.

Contenido

Los generadores de páginas estáticas usan Markdown para el contenido principal. Markdown es poderoso y uno puede aprenderlo rápidamente. Escribir contenido en Markdown se siente natural debido a su sintaxis simple. El documento se ve limpio y organizado.

Debe colocar los artículos en una carpeta especificada en el archivo de configuración global. Los nombres de los artículos deben seguir la convención especificada por el generador.

En Jekyll, debe colocar un artículo en el directorio _posts . El nombre del artículo debe tener el siguiente formato: AÑO-MES-DÍA-título.MARKUP. Otros generadores tienen reglas similares y proporcionan un comando para crear un nuevo artículo.

Estos son los comandos para crear un nuevo artículo en Middleman, Hugo y Hexo:

Intermediario

middleman article my_article

Hugo

hugo new posts/my_article.md

Hexo

hexo new post my_article

En Markdown, está limitado a un conjunto particular de sintaxis. Afortunadamente para nosotros, todos los generadores también pueden procesar HTML sin formato. Por ejemplo, si desea agregar un ancla con una clase específica, puede agregarla como lo haría en un archivo HTML normal:

This is a text with <a class="my-class" href="#">a link</a> .

asunto frontal

El material preliminar es un bloque de datos en la parte superior del archivo Markdown. Puede establecer variables personalizadas para almacenar los datos que necesita para crear un mejor contenido. En lugar de escribir HTML en Markdown, lo que podría conducir a una estructura de documento desordenada y fea, podría definir una variable en el frente.

Por ejemplo, así es como podría agregar etiquetas a su artículo.

 tags: - web - dev - featured

Plantillas en generadores de páginas estáticas

Los generadores de páginas estáticas utilizan un lenguaje de plantillas para procesar las plantillas. Para insertar datos en una plantilla, debe usar etiquetas. Por ejemplo, para mostrar el título de la página en Jekyll, podrías escribir:

{{ page.title }}

Intentemos mostrar una lista de etiquetas del frente en nuestra publicación en Jekyll. Debe verificar si una variable está disponible. Luego, debe recorrer las etiquetas y mostrarlas en una lista desordenada.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediario:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

Hexo:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Nota: Es una buena práctica verificar si existe una variable para evitar que falle un proceso de compilación. Podría ahorrarle horas de depuración y pruebas.

Uso de variables

Un generador de páginas estáticas proporciona variables globales disponibles para entregar plantillas. Diferentes tipos de variables contienen información diferente. Por ejemplo, un sitio de variable global en Hexo contiene información sobre publicaciones, páginas, categorías y etiquetas de un sitio.

Conocer las variables disponibles y cómo usarlas podría facilitar la vida de un desarrollador. Hugo usa las bibliotecas de plantillas de Go para crear plantillas. Trabajar con variables en Hugo podría ser un problema si no está familiarizado con el contexto, o "el punto" como lo llaman.

Middleman no tiene variables globales. Sin embargo, puede activar la extensión de blog de intermediarios que le permitiría acceder a algunas variables, como una lista de artículos. Si desea agregar variables globales, puede hacerlo extrayendo datos a archivos de datos.

Archivos de información

Cuando desee almacenar datos que no están disponibles en los archivos Markdown, debe usar archivos de datos. Por ejemplo, si necesita guardar la lista de sus enlaces sociales que desea mostrar en el pie de página de su sitio. Todos los generadores de páginas estáticas admiten archivos YAML y JSON. Además, Jekyll admite archivos CSV y Hugo admite archivos TOML.

Guardemos esos enlaces sociales en nuestro archivo de datos. Dado que todos los generadores admiten el formato YAML, guardemos los datos en el archivo social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll almacena archivos de datos en el directorio _data de forma predeterminada. Middleman y Hugo usan el directorio de datos, y Hexo usa source/_data directory .

Para generar los datos, puede usar el siguiente código:

jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediario

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

Hexo

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

ayudantes

Las plantillas a menudo admiten el filtrado de datos. Por ejemplo, si desea poner el título en mayúsculas, puede hacerlo así:

{{ page.title | upcase }}

Middleman tiene una sintaxis similar:

<%= current_page.data.title.upcase %>

Hugo usa el siguiente comando:

{{ .Title | upper }}

Hexo tiene una sintaxis diferente, pero el resultado es el mismo.

<%= page.title.toUpperCase() %>

Cómo manejan los activos los generadores de páginas estáticas

La administración de activos se maneja de manera diferente en los generadores de páginas estáticas. Jekyll compila archivos de activos dondequiera que se coloquen. Middleman maneja solo los activos almacenados en la carpeta de origen. La ubicación predeterminada de los activos en Hugo es el directorio de activos. Hexo sugiere colocar los activos en el directorio de fuentes global.

HABLAR CON DESCARO A

Jekyll es compatible con Sass desde el primer momento, pero debes seguir algunas reglas. Middleman también apoya a Sass desde el primer momento. Hugo compila Sass a través de Hugo Pipes para Sass. Hexo lo hace a través de un complemento.

ES6

Si desea utilizar las funciones modernas de JavaScript de es6, debe instalar un complemento. Puede haber más de una versión de un complemento similar, por lo que es posible que desee verificar el código o ver los problemas abiertos o el último compromiso para encontrar el mejor.

Imágenes

La optimización de imágenes tampoco es compatible de forma predeterminada. Además, al igual que los complementos de es6, hay más de un complemento para optimizar las imágenes. Haga su tarea e intente encontrar el mejor complemento para el trabajo. Alternativamente, podría usar una solución de terceros. En mi blog que está construido con Hexo, estoy usando el plan gratuito de Cloudinary. Desarrollé una etiqueta cloudinary y proporciono imágenes receptivas y optimizadas a través de transformaciones de Cloudinary.

Complementos, Extensiones

Los generadores de páginas estáticas tienen bibliotecas potentes que le permiten personalizar su sitio web. Cada complemento tiene un propósito diferente. Puede encontrar una amplia gama de complementos, desde LiveReload para un mejor entorno de desarrollo hasta generar mapas del sitio o fuentes RSS.

Podría escribir un nuevo complemento o extensión. Antes de hacerlo, compruebe si existe un complemento similar. Consulte la lista de complementos de Jekyll, las extensiones de Middleman y los complementos de Hexo. Hugo no tiene complementos ni extensiones. Sin embargo, admite códigos abreviados personalizados.

Códigos cortos en Markdown

Los códigos cortos son fragmentos de código que puede colocar en documentos de Markdown. Esos fragmentos generan código HTML. Hugo y Hexo admiten códigos cortos. Hay códigos cortos incorporados, como figura en Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo código abreviado de youtube:

{% youtube video_id %}

Si no puede encontrar un shortcode adecuado, puede crear uno nuevo. Por ejemplo, Hexo no es compatible con las incrustaciones de CanIUse y desarrollé una nueva etiqueta que admite la incrustación de CanIUse. No olvide publicar su complemento en npm o en el sitio oficial del generador. La comunidad te lo agradecerá si lo haces.

CMS

Los generadores de páginas estáticas podrían ser una sobrecarga para una persona no técnica. Aprender a usar comandos o Markdown no es algo fácil para todos. En ese caso, un usuario podría beneficiarse del sistema de gestión de contenido para sitios JAMstack. En esta lista, puede encontrar el sistema que mejor se adapte a sus necesidades. Tenga en cuenta que se necesita algo de tiempo para configurar el CMS, pero a largo plazo, usted y otros usuarios podrían beneficiarse al publicar contenido de manera más eficiente.

Bonificación: Plantillas JAMstack

Si no desea dedicar demasiado tiempo a configurar su proyecto, podría beneficiarse de las plantillas JAMstack. Algunas de estas plantillas ya están preconfiguradas con CMS, lo que podría ahorrarle mucho tiempo.

También podría aprender mucho examinando el código. Intente instalar una plantilla, compárela con otras y elija la mejor para usted.

Terminando

Los generadores de páginas estáticas son una forma rápida y confiable de crear un sitio web. Incluso puede crear sitios web no triviales y altamente personalizados con un generador hoy en día.

Por ejemplo, Smashing Magazine se cambió a JAMstack el año pasado y lograron acelerar significativamente su sitio. Hay otros ejemplos exitosos de sitios web estáticos y todos comparten el mismo principio: producir recursos estáticos y entregarlos a través de redes de entrega de contenido para una carga más rápida y una experiencia de usuario superior.

Hay mucho más que puede hacer con su sitio web estático: desde usar la API REST de Wordpress como backend hasta usar las funciones de Lambda. Existen excelentes soluciones incluso para sitios web simples, como usar HTTPS listo para usar o manejar envíos de formularios.

Espero que esta descripción general de los marcos de páginas estáticas lo haya ayudado a darse cuenta de su potencial y considere usarlos la próxima vez que piense en un nuevo proyecto.