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:
- Un servidor Ubuntu 20.04 con un usuario no root con privilegios de sudo: puedes obtener más información sobre cómo configurar un usuario con estos privilegios en nuestra guía de Configuración básica de un servidor con Ubuntu 20.04
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:
$ sudo apt update
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.
$ sudo apt -y install make build-essential ruby ruby-dev
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:
$ nano .bashrc
Al final del archivo, agrega las siguientes líneas:
.bashrc
# Ruby exports
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH
Guarda y cierra el archivo. Para activar las exportaciones, ejecuta lo siguiente:
$ source ~/.bashrc
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.
$ gem install jekyll bundler
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.
$ sudo ufw status
Si has encontrado un estado que muestra inactive, ejecuta los siguientes comandos.
ufw allow OpenSSH
sudo ufw enable
Esto permitirá que tu firewall se ejecute al iniciar el sistema. Puedes recibir las siguientes indicaciones (confirma con ‘y‘ para continuar):
Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup
En nuestro caso, solo se permite SSH a través de:
2
3
4
5
6Output
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
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:
$ sudo ufw allow 4000
Ahora nuestras reglas de firewall deberían incluir lo siguiente:
Output
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
4000 ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
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:
$ cd ~
$ jekyll new 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:
Output
New jekyll site installed in /home/cesar/www.
El comando new de Jekyll crea los siguientes directorios y archivos:
...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│ └── 2020-05-29-welcome-to-jekyll.markdown
└── _site
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:
$ sudo apt install tree
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:
$cd ~/www
$jekyll serve --host=203.0.113.0
Output of jekyll server
Configuration file: /home/cesar/www/_config.yml
Source: /home/cesar/www
Destination: /home/cesar/www/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.645 seconds.
Auto-regeneration: enabled for '/home/sammy/www'
Server address: http://203.0.113.0:4000/
Server running... press ctrl-c to stop.
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:
...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│ └── 2020-05-29-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ │ ├── main.css.map
│ └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2020
└── 05
└── 29
└── welcome-to-jekyll.html
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.