¿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 estático”, **Menu > Projects > Create new Project > Blank".
- Project Name (nombre del proyecto): Mi sitio estático
- Visibility (visibilidad): Visible
Asegúrate de no crear un archivo README.md, o elimínalo 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 ejecutándose.
