Como crear un blog con Jekyll y Gitlab Pages

2017-09-23

Índice

  1. Creando un fork de Jekyll
  2. Configurando el proyecto
    1. Rompiendo la relación con el proyecto original
    2. Habilitando Runners
  3. Construyendo nuestro sitio
  4. Comprobando los primeros resultados
    1. usuario.gitlab.io como url de nuestro proyecto
      1. Cambiando el path
      2. Configurando configyml
    2. Consejos

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

img

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

img

Pulsamos en bifurcar

img

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

img

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

img

Recibiendo el aviso cuando termine

img

Configurando el proyecto

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

img

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

img

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

img

Vamos a romper la relación con el proyecto original

img

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

img

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

img

Habilitando Runners

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

img

Seleccionamos Runners settings

img

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

img

Aquí vemos como ya están activados

img

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

img

Seleccionamos el fichero READMEmd

img

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

img

Entre las lineas — ponemos cualquier texto

img

Y grabamos los cambios

img

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

img

Pulsamos en el botón pages

img

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

img

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.:

img

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

img

Vemos la dirección url del proyecto

img

Pinchando en el link nos llevara a nuestro nuevo blog

img

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

img

Guardamos los cambios

img

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

img

Configurando configyml

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

img

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

img

Debemos de quitar el valor /jekyll

img

Guardamos los cambios

img

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

img

Ahora nuestro sitio se debería de ver correctamente

img

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 este

Crea tu blog con Hugo y Gitlab Pages

2019-09-16 | #git #gitlab #hugo

Índice Creando un grupo para el proyecto Creacion del proyecto (blog) Añadiendo el dominio .gitlab.io al proyecto Anteriormente ya vimos como crear un blog estático mediante Jekyll y Gitlab Pages, tambión vimos como obtener tu propio certificado para ese mismo blog.

Continuar leyendo 