En este apunte impensado vamos recorrer la primera parte del proceso de cómo crear un 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 .
No tengo hoy los conocimientos para hacer un recorrido más profundo, pero este pantallazo general puede dejarnos con una página lista para subir a la red.
¿Qué es Jekyll?
Jekyll es un programa que permite generar sitios estáticos. Vas a entenderlo mejor cuando lo usemos por primera vez.
Estos sitios que se generan tienen algo de blog. Se dividen en páginas y publicaciones, si es que me puedo explicar fácilmente.
Dicho de otra manera: Jekyll consigue que, al menos en un primer momento, te olvides de estar modificando toda la “estructura” del sitio solo para agregar una entrada.
No es que se puede hacer todo desde la nada… pero los archivos son lo bastante amables como para empezar sin saber prácticamente nada.
El programa toma todo el texto del post, lo agrega en un molde pre-establecido, y te devuelve un sitio completo listo para subir.
¿Qué es un sitio estático?
Para empezar esta parte, creo que mejor seria pensar en un sitio web “dinámico”.
En una frase rápida, un sitio dinámico crea una lazo en el tiempo entre el servidor y la computadora que realiza la visita. Cuando se hace link en la página, esta tiene que cargarse como si fuera generada desde cero.
Claro que también existe la idea de “cache”, donde una parte de la información del sitio se guarda en el navegador. De ese modo no tiene que descargarse completamente cada vez que intentamos verlo.
Y todo esto no se termina aquí.
Una vez más, no soy experto en el tema. Pero si tuve varios sitios creados en WordPress a lo largo del tiempo, y pude ver sus problemas.
Es en realidad una espada de doble filo. Usar una web dinámica, en especial cuando alcanza con sacarla del paquete para estrenarla, es muy sencillo.
Pero por el otro, el mismo sistema recibe constantes actualizaciones. Si una actualización no te gusta, te da el trabajo de buscar otra. Y si te olvidás de hacer una actualización, te enfrentás a problemas de seguridad y hackeos de todo tipo.
Otra cosa. Hay plugins, estos plugins se agregan al código básico del sitio y amplían sus opciones, Hay plugins para bloquear comentarios, para contar palabras, para recibir consejos y miles de cosas más.
Pero cada plugin vuelve más complejo el sitio y lo hace más pesado.
Al final todo esto se suma.
Ventajas de un sitio estático
Directamente de lo anterior obtenemos la ventaja de un sitio estático.
Es cierto, no son exactamente populares mientras escribo esto… pero se puede ver que pueden llegar a serlo en el futuro.
Usar un sitio estático pide menos recursos. Esto es, más liviano, no necesita tanto disco rígido.
Más liviano, se necesita menor velocidad de internet para verlo. Menos energía de infraestructura.
Simple y despojado de lujos innecesarios, puede ser visto incluso en equipos que ya no son considerados como “útiles” o que son generalmente descargados.
Sin base de datos para mantener, una o pocas personas pueden ocuparse de darle servicio técnico en las ocasiones que resulte necesario.
Y es más seguro, porque no hay panel de control para atacar. Los archivos están seguros en el servidor, no hay múltiples partes en juego.
No, realmente ¿Qué es Jekyll?
Ya mencioné lo de los sitios estáticos.
Jekyll también tiene temas y plantillas que se pueden descargar. Utilizando o modificando estas plantillas se pueden crear distintos estilos de sitios web.
Esto es muy importante. Una de las cosas que vuelve popular al formato blog es que se puede personalizar, incluso sin tener conocimientos de programación. Es descargar y usar.
Aunque en este caso necesitamos entrar un poco más dentro de la aplicación para conseguir lo que queremos, la posibilidad de descargar temas lo vuelve realmente mucho más fácil.
Le agrega ademas otro nivel a la “automatización” de generar lo necesario para un sitio. Deja de lado muchos de los problemas y nos deja más tiempo para pensar en el contenido.
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.
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.
La idea de conseguir una forma de crear sitios web que ocupan poco espacio y de forma fácil se vuelve popular, en especial si pensamos en formas de ahorrar recursos.
Con suerte en el futuro pueda también escribir apuntes sobre esas otras aplicaciones.
Pero ahora si, sin más vueltas vamos a empezar con…
Paso 1: Instalar Jekyll
Jekyll es un “gema”de Ruby. Ruby es un lenguaje de programación.
En el lenguaje de programación Ruby una gema es el análogo de una aplicación.
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 hay que tener Ruby instalado en nuestro sabor de GNU/Linux para poder seguir adelante.
El programa puede ser encontrarlo en otros sistemas operativos. Para ser completamente específico, mientras escribo esto lo hago en Linux Mint.
Todo esto sirve también para Ubuntu. Podemos ver otras formas de instalación para otros sistemas GNU/Linux en 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
Lo siguiente es instalar Jekyll. Para eso abrimos la terminal, podemos usar entonces el atajo del teclado Ctrl + Alt + t (perdón, intento agregar más links internos dentro del sitio).
Luego escribimos el comando:
gem install jekyll bundler
Como podemos ver, no estamos usando el comando apt par instalarlo. Estamos utilizando gem, que es el administrador de paquetes para Ruby.
Por otra parte también estamos instalando Bundler, que maneja las 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 2: 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, podes crearla cualquier directorio que te quede conveniente.
Antes de que empecemos a darle comandos al programa, es importante que abramos la terminal en la carpeta del proyecto. Todas las carpetas resultantes van a quedar allí.
Primero voy a crear una carpeta general, para tener todo ordenado:
mkdir sitiosweb
cd sitiosweb
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 “nuevoapunte”.
Entonces voy a utilizar el comando:
jekyll new nuevoapunte
Entonces jekyll new crea una nueva carpeta. Y si, ya te lo imaginás… la carpeta se llama Nuevoapunte.
Hay que entrar en esa carpeta, para que los próximos archivos que generemos se vayan guardando allí sin romper nada.
Vamos a adelantarnos y a retroceder un poco.
Escribí ahora el comando:
jekyll serve
Cuando llegue a su final, presioná Ctrl + c para terminarlo. Vas a ver que al final del texto te pide que presiones ese atajo para terminarlo.
Vamos ahora a ver que esta pasando. Se creo una multitud de archivos en la carpeta de nuestro proyecto, pero… ¿Qué contienen los archivos que se crearon?
Paso 3: el árbol del directorio
Bien… bien. ¿Por donde empezar?
Tratemos de repasar algunas de estas carpetas y archivos.
Algo importante es no hacer cambios dentro del directorio _site. Todas las modificaciones se hacen en los directorios superiores.
Eso cambios luego se reflejan en los archivos dentro de la carpeta _site, como se van a mostrar en el sitio terminado.
Carpeta: _site
La carpeta del sitio. No es necesario modificar nada en ella. Realmente, lo mejor es ignorarla.
Archivo: config.yml
Contiene datos de configuración.
Carpeta: post
En esta carpeta se guardan las publicaciones individuales. Se ven algo similar a esto:
2021-10-31-welcome-to-jekyll.markdown
about.md
Este archivo es la base del sito.
index.md
El archivo index.html es el cuerpo de la página principal. Aquí modificamos lo que viene a ser el “cuerpo” de nuestro sitio, porque la cabecera y el pie traen su propio archivo.
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 era nuevoapunte.
Si yo muevo la terminal de comandos 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.
Si, en tu navegador. En el exacto mismo lugar donde siempre aparece “www…” y el nombre 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.
Paso 5: modificar un detalle de nuestro sitio de ejemplo
Lo primero que vamos a hacer es explorar el documento _config.yml.
Abrí el documento con tu editor de texto de confianza. En mi caso estoy utilizando el sencillo y muy útil Nano:
nano _config.yml
Este archivo se encuentra escrito en el lenguaje YAML. No es mi intención hablar de este lenguaje… y no lo estudie lo suficiente como para decir algo útil.
Aunque pueda parecer difícil a primera vista, se pone más fácil si dejo de hablar y nos ponemos a mirar el texto. Incluso en este nivel ultra sencillo, es posible entender lo que esta pasando si leemos bien la información en el documento.
Por ejemplo, podemos cambiar el nombre de la página web.
Vas a ver que en una linea dice “Your Awesome tittle”, algo que ya habíamos visto en la pantalla del navegador.
Vamos a reemplazar ese nombre. En mi caso voy a poner “Un nuevo apunte impensado”, porque creo que suena lindo… ¿cierto?
Ahora voy a guardar el archivo.
¿Por qué usamos Nano? Esto es solo es si te interesa seguir trabajando “dentro” de la terminal. Podrías modificar el texto de igual manera usando solo el bloc de notas, solo abriendo el archivo.
Pero con la esperanza de seguir trabajando de forma “minimalista”, elijo continuar dentro de la terminal de comandos con Nano.
Si volvemos a la terminal y usamos de nuevo:
jekyll serve
Ahora vamos a poder actualizar el navegador y ver el nuevo título en el sitio.
Pero viene el problema… ¿Es necesario cerrar y volver a activar el proceso del server cada vez que hacemos una modificación? ¿Incluso trabajando localmente?
La realidad es que si. Hay que cerrar y volver a correr el servidor cada vez.
Por suerte hay un modo de evitar esto, utilizando la opción -w… pero antes hay que descargar otra gema… en resumen, haría que todo este texto se vuelva demasiado largo.
Por ahora, sigamos de este modo.
Y terminemos el texto de manera abrupta.
Conclusión:
Con esto termina nuestro primer apunte sobre cómo crear un sitio estático en Jekyll.
Es solamente una vista superficial, pero tengo la intención de traer más información.
En general es parte de un proyecto más grande que tengo, donde mi intención es encontrar otra forma de utilizar la tecnología.
Una forma que sea más sencilla, 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í puedo corregirlo.
Todas tus opiniones ayudan a mejorar el proyecto.
La seguimos en el siguiente apunte.
Leave a Reply