Cómo configurar un sitio de desarrollo Jekyll en Ubuntu 20.04

Introducción

Si estás buscando construir un sitio web o blog estático rápidamente, Jekyll podría ser una gran solución.

Un generador de sitios estático de código abierto escrito en Ruby, Jekyll permite la ejecución rápida de comandos. Este te ayuda a administrar tu sitio desde la implementación inicial hasta la producción, todo desde tu línea de comandos.

Jekyll es consciente de los blogs, dando prioridad a las categorías, publicaciones y diseños con una gama de importadores disponibles. Esto para importar el contenido del blog anterior.

Si necesitas trabajar sin conexión con frecuencia, prefieres usar editores livianos a formularios web para el mantenimiento de contenido. Asimismo, si deseas usar el control de versiones para rastrear los cambios en tu sitio web, Jekyll proporciona lo que necesitas para lograr tus objetivos.

En este tutorial, instalaremos un sitio de desarrollo de Jekyll en Ubuntu 20.04 con contenido generado automáticamente. Con Jekyll instalado, podrás crear un sitio personal o blog principalmente utilizando archivos de Markdown y algunos comandos de Jekyll.

Prerrequisitos

Para seguir este tutorial, necesitarás:

Una vez que hayas completado este requisito previo, estará slisto para instalar Jekyll y sus dependencias.

Paso 1 – Instalación de Jekyll

Comenzaremos actualizando nuestra lista de paquetes para asegurarnos de tener la información más reciente sobre las versiones más nuevas de paquetes y sus dependencias:

A continuación, vamos a instalar make y build-essential para que las bibliotecas de Jekyll compilen, y para usar Ruby y sus bibliotecas de desarrollo. Incluimos el indicador y aquí para confirmar que sí, nos gustaría instalar los paquetes y evitar la solicitud de confirmación.

Cuando esté completo, agreguemos dos líneas a nuestro archivo .bashrc para decirle al administrador de paquetes  gem de Ruby que coloque gems en la carpeta de inicio de nuestro usuario.

Esto evita los problemas que surgen de las instalaciones de todo el sistema al tiempo que agrega el comando jekyll local al usuario PATH.

Abre .bashrc con un editor de tu elección, como nano:

Al final del archivo, agrega las siguientes líneas:

Guarda y cierra el archivo. Para activar las exportaciones, ejecuta lo siguiente:

Cuando esté completo, usaremos gem para instalar Jekyll y Bundler, que administra las dependencias de gems. Ten en cuenta que esto puede llevar algo de tiempo.

A continuación, nos aseguraremos de que nuestra configuración de firewall permita el tráfico hacia y desde el servidor web de desarrollo de Jekyll.

Paso 2 – Abrir el firewall

Verifiquemos si el firewall está habilitado. Si es así, nos aseguraremos de que el tráfico a nuestro sitio esté permitido para que podamos ver nuestro sitio de desarrollo en un navegador web.

Si has encontrado un estado que muestra inactive, ejecuta los siguientes comandos.

Esto permitirá que tu firewall se ejecute al iniciar el sistema. Puedes recibir las siguientes indicaciones (confirma con ‘y‘ para continuar):

En nuestro caso, solo se permite SSH a través de:

Es posible que tenga otras reglas establecidas o ninguna regla de firewall en función de cómo hayas configurado tu firewall. Dado que solo se permite el tráfico SSH en este caso, necesitaremos abrir el puerto 4000, el puerto predeterminado para el servidor de desarrollo Jekyll:

Ahora nuestras reglas de firewall deberían incluir lo siguiente:

Ahora con el software instalado y el puerto necesario abierto, estamos listos para crear el sitio de desarrollo.

Paso 3 – Crear un nuevo sitio de desarrollo

Desde nuestro directorio de inicio, estamos usando el comando new de Jekyll para crear andamios para un sitio en un subdirectorio llamado www:

El comando jekyll new inicia un bundle install para instalar las dependencias requeridas, luego instala automáticamente un tema llamado Minima. Después de una instalación exitosa, deberías recibir una salida como la siguiente:

El comando new de Jekyll crea los siguientes directorios y archivos:

Estos no son los archivos reales del sitio web. Son los archivos fuente que Jekyll usará para crear el sitio estático. Jekyll se basa en nombres específicos, patrones de nombres y estructuras de directorios para analizar las fuentes de contenido y ensamblarlas en un sitio estático.

Es importante utilizar la estructura existente y seguir las convenciones de nomenclatura de Jekyll al agregar nuevas publicaciones y páginas.

Consejo: tree es un comando útil para inspeccionar estructuras de archivos y directorios desde la línea de comandos. Puedes instalarlo con el siguiente comando:

Para usarlo, ingresa cd en el directorio que deseas y escribe tree o proporciona la ruta al punto de inicio con tree /home/cesar/www

Paso 4 – Iniciar el servidor web de Jekyll

El servidor web liviano incorporado de Jekyll está diseñado para soportar el desarrollo del sitio. Esto al monitorear los archivos en el directorio y regenerar automáticamente el sitio estático cada vez que se guarda un cambio.

Debido a que estamos trabajando en un servidor remoto, especificaremos la dirección del host para navegar por el sitio desde nuestra máquina local. Si estás trabajando en una máquina local, puedes ejecutar jekyll serve sin la configuración del host y conectarte a http://localhost:4000:

Cuando invocamos jekyll serve, Jekyll analizó los archivos de configuración y contenido en un nuevo directorio, _site y comenzó a mostrar el contenido en esa carpeta _site:

También comenzó a observar el directorio actual, www, para ver los cambios. Tan pronto como se guarde un cambio en una publicación o página, el sitio estático se reconstruirá automáticamente. Por lo tanto, es importante no realizar cambios directamente en los archivos de la carpeta _site.

Si dejamos esta terminal abierta con el servidor de desarrollo ejecutándose en primer plano cuando trabajamos en nuestro sitio, recibiremos comentarios inmediatos. Esto a medida que agreguemos páginas y publicaciones y cambiemos el contenido.

Nota: Si estás trabajando con un sitio grande, habilitar la compilación –incremental puede acelerar la reconstrucción cada vez que realices un cambio. Esto al regenerar solo los archivos que se cambian, pero no lo necesitamos para este sitio pequeño. Puedes obtener más información sobre esta característica experimental en el sitio web de Jekyll.

El sitio ya está disponible. En un navegador web, podemos visitarlo en la dirección del servidor y el puerto que se muestran en la salida de jekyll serve:

Conclusión

En este tutorial, instalamos Jekyll y creamos un sitio de desarrollo con contenido generado automáticamente. Puedes obtener más información sobre Jekyll leyendo otros tutoriales sobre este tema.