🥇 Crear un sitio estático con Gatsby

🍿 ¿Qué es y para que sirve Gatsby?

Gatsby permite crear sitios web estáticos, vamos a utilizarlo para crear nuestro primer proyecto y hacer el despliegue a mediante Gitlab.

Para instalar Gatsby desde la línea de comandos descargamos Gatsby CLI.

yarn add global gatsby-cli

Después probamos que este instalado correctamente.

gatsby --version

Creamos nuestro proyecto con gatsby.

gatsby new miproyecto

Al finalizar la creación del nuevo proyecto entramos al directorio y arrancamos el modo de desarrollo.

cd miproyecto
gatsby dev

Un nuevo servidor se abrirá sobre localhost:8000.

Vamos a crear ahora nuevamente un proyecto en Gitlab llamado “mi sitio estatico”, **Menu > Projects > Create new Project > Blank".

  • Project Name (nombre del proyecto): Mi sitio estatico
  • Visibility (visibilidad): Visible

Asegurate de no crear un archivo README.md, o eliminalo antes de descargar el repo.

Para poder incluir nuestros archivos dentro del proyecto.

Entramos al proyecto de forma local.

cd miproyecto

Agregamos como repositorio de origen el repo de gitlab.

git remote add origin https://gitlab.com/usuario/mi-sitio-estatico.git

Gitlab crea la branch por default con el nombre main, mientras que la branch de Gatsby tiene el nombre master.

Cambia el nombre de la branch local a main.

git branch -M main

Retrae los cambios.

git pull origin main --allow-unrelated-histories

Empuja el proyecto a Gitlab.

git push --all

Si revisamos el proyecto nuevamente dentro de Gitlab podremos ver que los archivos del proyecto de Gatsby ahora forman parte del repositorio.

🍿 Compilación del proyecto

Un proyecto Gatsby es una serie de archivos HTML, JavaScript y CSS. Para poder generar estos archivos utilizamos el comando.

gatsby build

Si entramos en el directorio public podremos ver todo el contenido de nuestro sitio web. Esto es lo que se requiere para hacer el despliegue de nuestro sitio web.

Podemos desplegar nuestra app utilizando el paquete serve, para ello lo instalamos con yarn o npm de manera global.

yarn global add serve

Y después dentro de public ejecutamos el sitio web.

serve .

Veremos un mensaje como el siguiente…

Serving!
 - Local:            http://localhost:3000

Abrimos la url proporcionada y veremos la aplicación web de gatsby ejecutandose.