Ir al contenido

Development

Primeros pasos con Jekyll y Docker

Aprende a configurar Jekyll con contenedores Docker para disponer de un entorno de desarrollo limpio y aislado. Este tutorial te guía en la creación, personalización y despliegue de un sitio estático sin instalar Ruby ni Jekyll directamente en tu equipo, ideal para desarrolladores que buscan un flujo de trabajo homogéneo en cualquier plataforma.

3 min de lectura

Jekyll es un generador de sitios estáticos escrito en Ruby por el cofundador de GitHub Tom Preston-Werner. Jekyll procesa plantillas Liquid y contenido almacenado en Markdown para producir contenido estático que después puede servir cualquier servicio web. Este contenido en Markdown está libre de todo el HTML, la maquetación, los estilos y los shortcodes personalizados que a menudo contaminan el contenido en otras plataformas de blogs como WordPress.

Si buscas una buena introducción a Jekyll, te recomiendo Jekyll Bootstrap.

Docker

¿Por qué usar Docker? En su configuración básica, Jekyll se limita a generar contenido estático, pero se puede ampliar mediante plugins. Docker ofrece la ventaja de poder entregar a los desarrolladores, o a los servicios de despliegue continuo, un contenedor sencillo y listo para arrancar.

Docker Machine

Los usuarios de Linux pueden omitir la instalación de Docker Machine, pero tendrán que instalar Docker Compose. Los usuarios de OS X tendrán que crear una instancia de Docker Machine si aún no tienen ninguna en ejecución. Antes de continuar, asegúrate de tener instalada la versión más reciente de Docker Toolbox.

docker-machine create --driver=virtualbox default
eval $(docker-machine env default)

Docker Compose

Los usuarios de Linux tendrán que instalar docker-compose por separado, ya que normalmente no se incluye en la instalación de Docker. Encontrarás las instrucciones en el sitio web de Docker.

Contenedor de Jekyll

Jekyll tiene una imagen en Docker Hub que hace que esto sea pan comido.

Ten en cuenta que no estoy usando la versión de GitHub Pages de este contenedor. Si tienes previsto usar GitHub Pages, deberías cambiar la etiqueta de la imagen de abajo de latest a pages. La imagen pages emula con más fidelidad la configuración de Jekyll que utiliza GitHub Pages.

Crea un archivo llamado docker-compose.yml en la raíz de tu repositorio e introduce lo siguiente:

version: "2"
services:
  web:
    image: "jekyll/jekyll:latest"
    name: jekyll
    ports:
      - "4000:4000"
    volumes:
      - ./:/srv/jekyll
networks:
  default:
    driver: bridge

Después, inicia un contenedor Docker con Docker Compose:

docker-compose up -d

Abre tu navegador preferido y ve a http://localhost:4000. Todavía no tenemos archivos, así que el servicio web que usa el contenedor mostrará un listado del directorio de nuestro volumen montado.

Si usas OS X, no obtendrás respuesta de localhost:4000 porque Docker se ejecuta dentro de una máquina virtual. En su lugar, tendrás que ejecutar docker-machine ip default para averiguar la IP de la Docker Machine, o bien configurar la redirección de puertos en VirtualBox. Con la Docker Machine default en ejecución, ejecuta el siguiente comando en el Terminal para configurar una redirección de puertos:

VBoxManage controlvm "default" natpf1 "http,tcp,,4000,,4000"

Así podrás ir a http://localhost:4000 como si el sitio se sirviera en local.

Inicializar el sitio

Para inicializar el sitio podemos reutilizar el contenedor de Jekyll existente. Ejecuta jekyll new . --force en el directorio raíz del repositorio con el comando docker exec.

docker exec -it jekyll jekyll new . --force

Si actualizamos el navegador, veremos el tema predeterminado de Jekyll ya recompilado y algunas páginas y entradas de ejemplo.

Confirmar en el control de versiones

Este es un buen momento para crear un repositorio Git, confirmar el sitio y subirlo a tu repositorio. Sustituye <username> por el nombre de tu cuenta de GitHub:

git init
git add . -m "Initial Jekyll site"
git remote add origin git@github.com:<username>/<username>.github.io.git
git push -u origin master

Personalizar la configuración de Jekyll

En algún momento querrás actualizar el _config.yml de Jekyll y tendrás que reiniciar el servicio de Jekyll. Para ello, en realidad hay que reiniciar el contenedor Docker.

docker-compose restart
Compartir