En este apunte práctico vamos a recorrer el proceso de cómo crear un primer sitio estático en Jekyll.
Mi objetivo es mostrar lo que ocurre desde el momento en que descargamos el software hasta las primeras modificaciones en el sitio creado .
Ya en otra oportunidad también escribí sobre “Pelican”, un creador de sitios estáticos escrito en Python.
¿Qué es Jekyll?
Jekyll es un programa que permite generar sitios estáticos.
El programa toma todo el texto de nuestra publicación, lo agrega en un molde pre-establecido, y nos devuelve un sitio completo listo para subir.
Usar un sitio estático pide menos recursos. Esto es, más liviano, no necesita tanto disco rígido. Se necesita menor velocidad de internet para verlo y menos energía de infraestructura para sostenerlo.
Jekyll también tiene temas y plantillas que se pueden descargar. Utilizando o modificando estas plantillas se pueden crear distintos estilos de sitios web.
No solo eso, también nos da la opción de tomar los archivos de nuestro sitio web creado en otro sistema de blog para migrar hacia un sitio estático.
Y no es la única ventaja. Es posible utilizar Jekyll en conjunto con Github para alojar un sitio web estático de forma gratuita en la web.
Jekyll no es la única opción para crear páginas web estáticas. Existen por ejemplo también otras aplicaciones como Pelican y Hugo. Pero hay varias opciones más.
Pero ahora si, sin más vueltas vamos a empezar con…
Paso 1: Instalar Ruby
Jekyll es un “gema”de Ruby. No, no esa Gema Ruby.
En este caso una gema es el análogo a una aplicación o una libreria de aplicaciones que extienden la funcionalidad del lenguaje de programación Ruby. Un concepto semejante al de agregar un paquete de Python por ejemplo.
Bien, no me pidan más detalles de esto. Suena un tema para investigar en otra oportunidad. Podemos seguir.
Pero sabiendo lo que ya sabemos necesitamos instalar Ruby en nuestra máquina con Linux para poder seguir adelante. Para ser completamente específico, mientras escribo esto lo hago en Linux Mint.
Podemos revisar otras formas de instalar Jekyll en otros sistemas Linux con este enlace.
Para instalar Ruby, utilizamos el comando:
sudo apt-get install ruby-full build-essential zlib1g-dev
La parte de “build-essential” y “zlib1g-dev” en el comando va a descargar una serie de paquetes necesarios, con archivos de desarrollo y dependencias.
Lo siguiente es decirle al administrador de Gemas para Ruby que incluya las aplicaciones en nuestra carpeta personal, y no en la carpeta de raíz.
Suponiendo que estamos trabajando en la shell bash, usamos la siguiente serie de comandos, uno a uno:
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
Paso 2: Instalar Jekyll
Lo siguiente es instalar Jekyll. Para eso abrimos la terminal y escribimos el siguiente comando:
gem install jekyll bundler
Como podemos notar no estamos usando el comando “apt” para instalar la aplicación como hacemos en otros casos dentro de Linux. Estamos utilizando “gem”, que es el administrador de paquetes para Ruby.
Por otra parte también estamos instalando Bundler, que maneja las distintas dependencias de las aplicaciones.
Si en el futuro lo que necesitamos es desinstalar Jekyll, el comando es:
gem remove jekyll
Jekyll es un programa que solamente puede usarse por medio de la terminal de comandos. Hasta donde yo se, no existe ninguna forma gráfica de interactuar con el mismo. En cierta forma, todo esto nos esta ya poniendo a practicar para lo que sigue
Al final del apunte, bajo el subtitulo de “recursos” voy a agregar un link al manual en el sitio de Jekyll.
Luego de haber instalado el programa…
Paso 3: Crear nuestro proyecto
El segundo paso es conseguir que Jekyll comience nuestro proyecto.
Lo va a comenzar desarrollando una árbol de directorios que va a resultar en la base de nuestro sitio
Ahora vamos a crear la carpeta “central” del proyecto, podemos crearla en cualquier directorio que consideremos conveniente.
Primero voy a crear una carpeta general en mi directorio “Home”, para tener todo ordenado:
mkdir sitios_web
cd sitios_web
En mi caso, siendo que este proyecto es algo así como un test para un futuro de esta misma página web, voy a bautizarlo como “nuevo_apunte”.
Entonces voy a utilizar el comando:
jekyll new nuevo_apunte
Entonces jekyll new crea una nueva carpeta. Y si, ya te lo imaginás… la carpeta se llama “nuevo_apunte.
Hay que entrar en esa carpeta, para que los próximos archivos que generemos se vayan guardando allí sin romper nada.
Paso 4: revisar nuestro sitio
Aunque todavía no le agregamos nada de contenido al sitio web, igualmente es posible revisar como esta quedando.
De hecho es posible estudiarlo, probarlo y editarlo directamente desde nuestra máquina.
Recordemos que en nuestro caso, dos pasos atrás, Jekyll generó una nueva carpeta. El nombre de esa carpeta en mi caso era “nuevoapunte”, dentro del directorio “sitiosweb”.
Si yo muevo la terminal de comandos hasta el directorio “nuevoapunte”, el nombre de este sitio de ejemplo, y escribo en esa carpeta:
jekyll serve
Se va a iniciar ahora un server local. Vas a ver que entre el texto que aparece dice Server address (direccion del server) y viene acompañado de una URL.
Copia esa dirección, y usala en tu navegador en el mismo lugar donde siempre aparece la URL de la página que estas visitando.
Y Listo. Ahí esta el sitio. Sin contenido más que ese que trae como una muestra, pero listo para empezar a modificarlo.
Pero aun así, es increíble de ver como en el navegador aparece algo construido desde una carpeta en nuestra computadora. Realmente cosas para maravillarse.
Antes de continuar, volvamos atrás para detener el proceso del servidor. Es posible hacerlo con el atajo del teclado Ctrl + c y con eso vamos a poder escribir una vez más en la terminal abierta.
Vamos ahora a revisar qué ocurrio al utilizar este comando. Se creo una multitud de archivos en la carpeta de nuestro proyecto, pero… ¿Qué contienen los archivos que se crearon?
Revisando el árbol de directorios
Bien… bien. ¿Por donde empezar?
Tratemos de repasar algunas de estas carpetas y archivos.
_site: Directorio con información general del sitio, por ejemplo el archivo “index.html”. No necesitamos modificar nada de este directorio por ahora.
config.yml: Archivo que contiene datos de configuración.
post: En esta carpeta se guardan las publicaciones individuales. Se ven algo similar a esto:
2021-10-31-welcome-to-jekyll.markdown
about.markdown: Este archivo es la página con información “sobre el sitio” de la web
index.markdown: El archivo index.html es el “home page” del sitio, la página principal.
Paso 5: modificar un detalle de nuestro sitio de ejemplo
Vamos a crear una nueva página dentro del sitio, por ejemplo una página de contacto.
Para eso voy al directorio principal de mi sitio, en mi caso “nuevo_apunte” y escribo el comando:
touch contacto.mkd
Luego abro ese archivo:
nano contacto.mkd
Y escribo lo siguiente en su interior:
---
layout: page
title: Contacto
permalink: /contacto/
---
## Agendá estos datos
Esta es mi información de contacto.
Y ahora guardo el documento.
Si volvemos a la terminal y usamos de nuevo:
jekyll serve
Ahora vamos a poder actualizar el navegador y encontramos el acceso a la nueva página en el sitio, que se encuentra en el menú superior.
Lo que nos queda es seguir explorando el programa, podemos modificar o agregar nuevos temas, crear nuevas publicaciones y agregar nuevos complementos.
Conclusión:
Con esto termina nuestro apunte sobre cómo crear un sitio estático en Jekyll.
Este programa es otra de las múltiples opciones que tenemos para crear un sitio más sencillo, que consuma menos recursos y energía.
Del mismo modo que siempre, no olvides contarme tu experiencia. Si encontrás algún tipo de error en el texto, avisame así con un correo electrónico para que pueda corregirlo.
Todas tus opiniones ayudan a mejorar el proyecto.
La seguimos en el siguiente apunte.
Leave a Reply