Jekyll, ¿Cómo crear un blog estático con la ayuda de Ruby y YAML?

Jekyll, ¿Cómo crear un blog estático con la ayuda de Ruby y YAML?
Jekyll: Creando un blog estático con la ayuda de Ruby y YAML
  • Autor de la entrada:
  • Categoría de la entrada:Webmaster
  • Tiempo de lectura:9 minutos de lectura

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.

ROSEPAC

Redactor Diario Ciberninjas. Curador Digital. 🔗 Telegram 👨‍💻 Twittter 🐦 Discord 🧰