Jekyll: Creando un blog est√°tico con la ayuda de Ruby y YAML
Jekyll: Creando un blog est√°tico con la ayuda de Ruby y YAML
  • Tiempo de lectura:15 minutos de lectura
  • Categor√≠a de la entrada:Webmaster

Existe un gran cambio al modificar tus hábitos y buscar el cambio desde un Sistema de Gestión de Contenidos (CMS) como por ejemplo: WordPress. Hacía un Sistema de Contenidos de Generación Estática (SSG) como por ejemplo: Jekyll.

Buscando hacer ese paso un poco más sencillo, se ha creado este repositorio con todos los enlaces que me han ido siendo de utilidad, a lo largo del tiempo; tanto para la importación de un blog a otro, como para el desarrollo, configuración, gestión y mantenimiento de la nueva página estática.

Además, se incluyen enlaces a los lugares más importantes dentro de la Comunidad de Jekyll y un breve contenido de la utilización más práctica sobre uno de los temas de Jekyl más utilizados a nivel mundial: Minimal Mistakes.

Espero que estos enlaces puedan ser de ayuda y ojal√°; lleguen a suplir aunque solamente sean en parte, a la gran comunidad de WordPress existente.

CMS para Jekyll

Un CMS o Gestor de Contenidos es un software creado para poder ayudarte a la hora de la utilización de un blog, página o web en la que deseas agregar tus contenidos.

En el caso de Jekyll, no es que existan grandes CMS, m√°s si existen variopintas posibilidades de gestionarlo si es que no deseas introducirte demasiado a crear absolutamente todo desde cero.

En mi caso, decidí utilizar Forestry puesto qu es gratuito y permite gestionar el contenido desde una interfaz totalmente minimalista; además de ofrecer la posibilidad de generar plantillas para las diferentes entradas futuras que se deseen ir realizando; a lo que denominan front matter.

Soluciones de CMS para Jekyll en esta publicación puedes encontrar el mejor lugar para alojar tu sitio Jekyll o hacer que tu sitio web estático sea editable con estos excelentes servicios de administración de contenido.

Prose.io

Este es un peque√Īo editor que permite cargar de forma muy r√°pida los repositorios de Github adem√°s de modificar sus diferentes opciones a trav√©s de una peque√Īa edici√≥n del archivo de configuraci√≥n de Jekyll.

A pesar de que hace mucho que el proyecto no es modificado dentro de Github, es a√ļn totalmente funcional.

Otro por menor, que te va a surgir a la hora de su utilización; es que deberas personalizar todos los ajustes del encabezado para adaptarlo a las opciones de tu blog; y que eso te permita facilitar el trabajo de publicar directamente a través del editor online.

Forestry, Enlaces Directos

CloudCannon

ūüõí Los Mejores Chollos de Amazon, ¬°Agr√©galos a tu Lista de Deseos!

¬ŅC√≥mo realizar pruebas y montar un blog con Jekyll?

¬ŅC√≥mo implementar mejoras de SEO en Jekyll?

Plugins de Importación

Si deseas transportar tus datos de WordPress a Jekyll, es posible que puedas terminar por volverte loco, puesto que a pesar de que existe un método que debería de ser sencillo desde la propia página de documentación de Jekyll; yo no he logrado hacerlo funcionar; por tanto decidí buscar alguna fórmula alternativa.

En mi caso, lo √ļnico que me funciono; fue este plugin: WordPress2Jekyll. Es bastante viejo, pero es lo √ļnico que me ha ayudado a guardar mi antiguo contenido hasta que pueda ir realojandolo dentro de mi nuevo blog.

Generando una PWA

Registro y Testing de PWA
Jekyll PWA

Enlaces Externos

Colección de enlaces que he ido guardando con los que poder aprender el uso lo más correcto posible de Jekyll, Ruby, Github Pages y Forestry.

Enlaces de Chuletas

  • WebFX: Lista de Emojis / Emoticonos que pueden ser usados al estilo de los emoticones de Github :+1:

Comercio Electrónico

POR INVESTIGAR
{:notice-info}

Lenguaje de Uso: Liquid

ūüõí Los Mejores Chollos de Amazon, ¬°Agr√©galos a tu Lista de Deseos!

Plugins de Jekyll

Si bien Jekyll no posee tanto repertorio como WordPress, si que es posible ir a√Īadi√©ndole diferentes acciones o pedazos de c√≥digo que vayan ejecutando diferentes opciones.

Temas de Jekyll

Videotutoriales

ūüõí Los Mejores Chollos de Amazon, ¬°Agr√©galos a tu Lista de Deseos!

Plantilla de Minimal Mistakes

Vamos a ver paso a paso, algunas de las pautas m√°s importantes sobre como podemos realizar nuestras publicaciones comodamente en est√°, una de las plantillas m√°s reconocidas usadas de Jekyll.

Publicar un Enlace

A√Īadir a la cabecera YAML link: https://github.com

Publicar una Cita

Seguir el siguiente ejemplo, con el uso de >

Cita o frase a incluir.
Mark Twain

Actualizar la Fecha de Publicación

Agregar en la cabecera YAML last_modified_at: 2016-03-09T16:20:02-05:00

ūüõí Los Mejores Chollos de Amazon, ¬°Agr√©galos a tu Lista de Deseos!

Agregar Cajas de Avisos o Notas Informativas

Un aviso o nota informativa muestra un contenido de importancia o que deseas mostrar como relevante llamando la atención al usuario.

Al utilizar Kramdown, se puede a√Īadir {: .notice} despu√©s de una sentencia, para asignar.notice a un elemento <p></p> o p√°rrafo.

Como en los ejemplos siguientes:

Changes in Service: We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.

Primary Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Info Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Warning Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Danger Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Success Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

¬ŅDesea ajustar varios p√°rrafos u otros elementos en un aviso? Usar Liquid para capturar el contenido y luego filtrarlo con markdownify es una buena manera de hacerlo.

Agregar Etiqueta: more

Si deseas ingresa la etiqueta más o también conocida como more en tus publicaciones puedes ejecutar la etiqueta <!--more--> situándolo luego del primer o segundo párrafo, además debes aplicar en tu cabecera YAML:

excerpt_separator: "<!--more-->"

Configuración de la Plantilla Minimal Mistakes

Se puede cambiar absolutamente todo dentro de la plantilla, siempre y cuando la estés ejecutando de forma independiente y por tu cuenta. Existe, una limitación dentro de las posibles ediciones; si estás; son realizadas a través de Github Pages (como viendo siendo mi caso).

Por tanto, y una vez diferenciadas ambas situaciones, veamos como poder realizar peque√Īos cambios dentro de la plantilla Minimal Mistakes instalada sobre las p√°ginas de Github.

ūüõí Los Mejores Chollos de Amazon, ¬°Agr√©galos a tu Lista de Deseos!

Cómo cambiar la fuente tipográfica

  1. Cargar el enlace de las fuentes de Google, a través de la carpeta includes en el fichero _includes/head/custom.html.
  2. Por ejemplo:
  1. Agregar al fichero de .scss las variables correspondientes para las variables $serif y $sans-serif que corresponden respectivamente a $global-font-family : $serif; y $header-font-family : $sans-serif-narrow; . En el documento: _sass/minimal-mistakes.scss

  2. Cambiar dentro del fichero _sass/minimal-mistakes.scss las variables redactadas en el paso anterior citando la fuente adecuada.

Enlaces por Investigar y por Organizar

La Gu√≠a de Jekyll fue creada el 16 de Marzo de 2020 y su √ļltima edici√≥n fue realizada el 18 de Mayo de 2020.