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

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 PWAJekyll 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.

Relacionado

Generador de Sitios Estáticos

Un generador de sitio estático o SSG - viene de la abreviatura del significado inglés: Static Site Generator - es un programa que genera un sitio web HTML como salida. Este sitio web HTML se sirve a través de su servidor web, igual que antiguamente. Esto generalmente se logra utilizando lenguajes de plantilla y código que separa el diseño del sitio web de su contenido y ¡SEGUIR LEYENDO!

Eleventy: Un generador de sitios estáticos muy simple y minimalista

Eleventy es un generador de sitios estático simple o SSG basado en JavaScript. Lo bueno de Eleventy, es que no tiene configuración por defecto, pero también se puede ejecutar con opciones de configuración; lo que hace que sea totalmente flexible y extremadamente fácil de usar al mismo tiempo. A diferencia de otros generadores de sitios estáticos, como por ejemplo Jekyll, Eleventy no te obliga a utilizar ¡SEGUIR LEYENDO!

El camino del Frontend Developer, por MrCodeDev

En este repositorio de Github de MrCodeDev vas a encontrar una importante lista de recursos para ayudarte a emprender el camino de llegar a ser Frontend Developer. El repositorio, ha sido creado por MrCodeDev y si deseas aportar algún contenido, puedes considerar el contactar con él; o bien, enviar un PR a través del repositorio de Github. Por último, si lo deseas, puedes invitar a un ¡SEGUIR LEYENDO!

Anuncian Docusaurus 2 Beta

Después de una larga etapa en Alfa, presentan la versión de Docusaurus 2 Beta. Con el anuncio de esta versión beta, el equipo confían poder presentar pronto, la versión estable de Docusaurus 2. ¿Qué es Docusaurus? Docusaurus es un generador de sitios estáticos capaz de ayudarte a crear un sitio de documentación hermoso en muy poco tiempo. Con Docusaurus vas a crear una aplicación de una ¡SEGUIR LEYENDO!

18 Sitios de Creación de Páginas Web Estáticas

Los generadores de sitios estáticos son una gran alternativa, sobre todo si lo que deseas, es crear una página web sencilla o que contenga poco contenido. Si quieres conocer más, sobre los sitios estáticos, en nuestra Wiki puedes informarte. Aunque, si no tienes demasiada experiencia trabajando con código, la situación puede llegar a ser un poco complicado. Por ello, han nacido numerosas alternativas, desde las que ¡SEGUIR LEYENDO!

Salir de la versión móvil