Como crear un blog con Jekyll y Gitlab Pages

2017-09-23

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

Creando un fork de Jekyll

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

Pulsamos en bifurcar

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

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

Recibiendo el aviso cuando termine

Configurando el proyecto

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

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

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

Vamos a romper la relación con el proyecto original

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

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

Habilitando Runners

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

Seleccionamos Runners settings

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

Aquí vemos como ya están activados

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

Seleccionamos el fichero README_md

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

Entre las lineas — ponemos cualquier texto

Y grabamos los cambios

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

Pulsamos en el botón pages

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

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

Vemos la dirección url del proyecto

Pinchando en el link nos llevara a nuestro nuevo blog

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 Espero que te haya gustado, pasa un buen día. 🐧

Ingrese la dirección de su instancia


Más publicaciones como esta

Cómo crear un sitio web estático en Gitlab Pages

2018-12-10 | #gitlab

En un pasado articulo vimos como crear nuestro sitio web estático utilizando Gitlab Pages y Jekyll, sin embargo, si no quieres utilizar ningún generador de sitios web tipo Jekyll, Hugo, etc, y simplemente quieres disponer de un sitio donde alojar y publicar páginas html estáticas con Gitlab puedes hacerlo.

Continuar leyendo 