Como crear un blog con Jekyll y Gitlab Pages

Con Gitlab Pages podemos tener nuestro propio blog elaborado en Jekyll y con la url de nuestro usuario o grupo de Gitlab al estilo usuario.gitlab.io fácilmente y en pocos minutos

Para empezar, deberemos de tener una cuenta en Gitlab

jekyill_gitlab1.png.

Creando un fork de Jekyill

Después de hacer login con nuestro usuario de Gitlab iremos Gitlab Pages donde encontraremos los proyectos compatibles con Gitlab Pages, seleccionamos el proyecto jekyll

jekyill_gitlab2.png.

Pulsamos en bifurcar

jekyill_gitlab3.png.

Si ademas de nuestro usuario hemos creado un grupo, debemos de elegir en cual de los dos vamos a bifurcar el proyecto

jekyill_gitlab4.png.

Una vez que hemos elegido donde bifurcar el proyecto empezará el proceso

jekyill_gitlab5.png.

Recibiendo el aviso cuando termine

jekyill_gitlab6.png.

Configurando el proyecto

En el menú superior elegimos Projects y pulsamos en _Your projects

jekyill_gitlab7.png.

Entre nuestros proyectos tendremos uno nuevo llamado jekyll, pulsamos sobre él para empezar a trabajar

jekyill_gitlab8.png.

Rompiendo la relación con el proyecto original

Antes de seguir, deberemos hacer unos pequeños cambios en la configuración del proyecto, en el menú de la parte izquierda nos vamos a Settings -> General -> Advanced settings

jekyill_gitlab9.png.

Vamos a romper la relación con el proyecto original

jekyill_gitlab12.png.

Debemos confirmar que realmente queremos romper la relación, ponemos el nombre del proyecto y pulsamos en Confirm

jekyill_gitlab13.png.

Aparece el mensaje informando que se ha roto al relación

jekyill_gitlab14.png.

Habilitando Runners

El siguiente paso es configurar los Runners para generar el docker, lo haremos desde el menú Settings y seleccionamos CI/CD

jekyill_gitlab15.png.

Seleccionamos Runners settings

jekyill_gitlab16.png.

En caso de que estén desactivados como en la captura de pantalla, pulsaremos en Enable shared Runners

jekyill_gitlab17.png.

Aquí vemos como ya están activados

jekyill_gitlab18.png.

Construyendo nuestro sitio

Ahora vamos a modificar un fichero para que se pueda inicializar el sitio, seleccionamos la opción Archivos del menu Repository que encontramos en el lateral izquierdo

jekyill_gitlab19.png.

Seleccionamos el fichero README_md

jekyill_gitlab20.png.

y pulsamos sobre el botón Edit para editar el fichero

jekyill_gitlab21.png.

Entre las lineas — ponemos cualquier texto

jekyill_gitlab22.png.

Y grabamos los cambios

jekyill_gitlab23.png.

Ahora si nos vamos otra vez al menú de la izquierda elegimos CI/CD y seleccionamos Pipelines veremos como se va construyendo el sitio.

jekyill_gitlab24.png.

Pulsamos en el botón pages

jekyill_gitlab25.png.

Y otra vez en el botón en ejecución

jekyill_gitlab26.png.

Deberíamos ver una pantalla parecida a esta, donde veremos diversos mensajes de información sobre la creación del sitio, como por ejemplo la instalación de las gemas que tengamos configuradas en el archivo Gemfile, etc.:

Comprobando los primeros resultados

Una vez que hemos creado el sitio, podemos ver el resultado, para conocer la url de la pagina inicial del proyecto, desde el menú Settings -> Pages

jekyill_gitlab28.png.

Vemos la dirección url del proyecto

jekyill_gitlab29.png.

Pinchando en el link nos llevara a nuestro nuevo blog

jekyill_gitlab30.png.

usuario.gitlab.io como url de nuestro proyecto

Podemos modificar el proyecto para que la dirección url coincida con el nombre de nuestro usuario de Gitlab o si hemos creado un grupo con el nombre del grupo, del estilo elblogdelazaro.gitlab.io

Cambiando el path

Tenemos que modificar el path del proyecto poniendo el nombre de usuario o del grupo que contenga el proyecto y añadirle al final gitlab.io, la hacemos desde el menú Settings -> General -> Advanced settings -> Rename Repository

Guardamos los cambios

Si ahora nos vamos al menú Settings -> Pages vemos que la url de nuestro sitio ha cambiado

Configurando config_yml

Sin embargo cuando pulsamos sobre el link de la nueva dirección url la pagina no se visualiza bien.

Esto es debido a que hemos cambiado el path del proyecto por lo que también debemos cambiarlo dentro del fichero de configuración config.yml, modificando la variable baseurl

Debemos de quitar el valor /jekyll

Guardamos los cambios

Tendremos que esperar un poco para que los cambios se hagan efectivos,

Ahora nuestro sitio se debería de ver correctamente

Consejos

Puedes cambiar fácilmente el tema para tu blog mediante gemas (plugins) en este enlace te explican como hacerlo de una manera muy fácil Cómo personalizar nuestro sitio Jekyll con gemas

Si además estas empezando en Jekyll y te gustan los podcasts, te recomiendo que sigas Experimenta con Jekyll