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

En un pasado artículo 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.

Gitlab

A diferencia de Github, en Gitlab podemos crear grupos y dentro de esos grupos crear proyectos y referenciar esos proyectos con la url del proyecto https://proyecto.gitlab.io/

En el ejemplo voy a crear un proyecto dentro de un grupo, pero como digo, también puedes directamente crear un nuevo proyecto.

Creación de un grupo

Empezamos creando un nuevo grupo

gitlab1.png.

Rellenamos los datos del nuevo grupo

gitlab2.png.

Y pulsamos en crear grupo

gitlab3.png.

Creación de un nuevo proyecto

Creamos un nuevo proyecto dentro del grupo

gitlab4.png.

Asegúrate de que estamos creando un nuevo proyecto en blanco, sin utilizar ninguna plantilla

gitlab5.png.

Marca la casilla para inicializar el proyecto con el archivo README y crea el proyecto

gitlab6.png.

El proyecto se ha creado, pero aun queda por realizar un paso mas

gitlab7.png.

.gitlab-ci.yml

Necesitamos crear un fichero llamado .gitlab-ci.yml y pegar en su interior el siguiente código

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

Añadimos un nuevo archivo al proyecto

gitlab13.png.

gitlab12.png.

Y añadimos en su interior el código necesario para desplegar nuestro sitio

gitlab14.png.

Pulsa en Commit changes

gitlab15.png.

Esperamos a que se construya el sitio

gitlab17.png.

gitlab18.png.

Utilizando dominio gitlab.io

Podemos utilizar el dominio de Gitlab para acceder a nuestro proyecto, para ello, dentro de las opciones de configuración del proyecto, en el apartado Advanded pulsamos sobre el boton Expanded

gitlab9.png.

En el apartado Rename Repository en Path ponemos el nombre del proyecto mas el domino de gitlab.io y renombramos el proyecto

gitlab10.png.

Página html de prueba

Créate un sencillo archivo index.html para comprobar el funcionamiento

gitlab21.png.

Haz el commit

gitlab22.png.

Accede a la url del proyecto para ver la pagina creada

gitlab20.png.

Como ves, ahora tienes una forma sencilla de tener un sitio donde alojar tus paginas en Gitlab.

Referencias: