Qué es Jekyll

Si aún no conoces a Jekyll, debes saber que es un generador de sitios estáticos. Permite transformar tu texto simple en sitios web y blogs estáticos. No más bases de datos, sitios web que cargan lento, riesgo de ser hackeado... sólo tu contenido.

Por cierto, éste sitio está creado con Jekyll :)

Instalación

Requisitos

Para tener siempre información actualizada lo mejor es que visites la página oficial dependiendo de tu sistema operativo:

• MacOS
• Ubuntu
• Otras distribuciones linux
• Windows

Jekyll

Ahora si ya podemos instalar Jekyll.

gem install bundler jekyll

Creamos el proyecto y accedemos a él.

jekyll new my-site
cd my-site

Y finalmente arrancamos el servidor.

bundle exec jekyll serve

Así de simple, podemos acceder a localhost:4000 en el navegador web para ver los resultados.

IMPORTANTE: En el caso de estar en un servidor o maquina virtual, hay que indicar el host para poder acceder desde el exterior.

bundle exec jekyll serve --host [IP-Address]
# Por ejemplo -> bundle exec jekyll serve --host 192.168.1.35

Configuración y Estructura

Estructura de ficheros

En este apartado aprenderás a modificar las configuraciones del sitio y a crear tus propios posts. Siempre que se haga un cambio tendremos que reiniciar el servidor para ver los resultados.

_config.yml

Este es el fichero en el que se encuentran todas las configuraciones del sitio. Dependiendo el tema que tengamos instalado pueden variar, lo ideal es que abras este fichero y lo investigues por tu cuenta.

Normalmente se pueden encontrar configuraciones básicas como el nombre del sitio, la descripción o el logo. O configuraciones avanzadas como los plugins instalados o la paginación de los posts.

_posts y _pages

Ahora sí, llegó el momento de crear nuestro contenido y compartirlo con el mundo.

Empecemos con los posts. Los podrás encontrar en la carpeta __posts, cada fichero un post, así de simple. Crea tantos ficheros como quieras y apareceran en tu blog automáticamente, siempre que cumplas dos requisitos:

1. Que estén escritos en Markdown (te explico lo que es un poco más abajo en este mismo post).
2. Que contengan un encabezado concreto, con el que definiremos los parámetro del mismo:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2020-07-21 15:04:14 +0000
categories: jekyll update
---

Algo parecido le ocurre a las pages. Las encontrarás en la carpeta _pages, también están escritas en Markdown y también tienen que tener un encabezado concreto.

---
layout: page
title: About
permalink: /about/
---

De todas maneras, con Jekyll instalado podrás acceder a las carpetas _posts y _pages. En ellas encontrarás un fichero de ejemplo de cada tipo respectivamente.

Markdown

Markdown es un lenguaje de marcado que tiene como objetivo el hacer más fácil la tarea de dar formato a un texto mediante el uso de algunos caracteres. Si te fijas en la siguiente foto, nos permite transformar el código de la izquierda en el texto de la derecha. Mucho más agradable a la vista.

Podemos modificar el texto para crear encabezados, categorías, letra cursiva etc. Así como insertar imágenes o enlaces entre otras muchas cosas.

Te dejo dos enlaces interesantes, aquí encontrarás un resumen de las posibilidades de este lenguage, y aquí encontrarás un editor online.

Cambiar el tema

Es verdad que el tema por defecto al instalar Jekyll no es el más bonito del mundo. Pero no te preocupes. Existe una gran variedad de temas creados por la gente. Estos son los links donde puedes encontrarlos.

• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io

Todos los temas son de código abierto, ya que tienes que descargártelo a tu máquina para poder usarlos. Esto quiere decir que, con los conocimientos necesarios, siempre vas a poder editar todo lo que quieras.

IMPORTANTE: Cuando descargamos un tema, lo que hacemos es crear un nuevo proyecto, no aplicar ese tema a un proyecto existente anteriormente.

Editar el estilo

El estilo viene definido por layouts. Son ficheros html que establecen la apariencia de la página. Por ejemplo el fichero post.html va a definir la apariencia de todos los posts que publiquemos.

Como comenté previamente, al ser código abierto, podremos hacer todos los cambios que queramos al layout de un tema que hayamos descargado utilizando html y css.

Despliegue para Producción

Para arrancar Jekyll en segundo plano.

JEKYLL_ENV=production bundle exec jekyll serve > /dev/null 2>&1 &

Para encontrar el proceso y detenerlo.

# Busqueda del proceso
ps -ef | grep jekyll
# Detener el proceso (sustitir pid con el numero obtenido del comando anterior)
kill -9 pid