Cómo instalar Gatsby.js Node Framework en Ubuntu 22.04

GatsbyJS o Gatsby es un framework gratuito y de código abierto para construir aplicaciones y sitios web rápidos y modernos con React. Gatsby está optimizado para la tecnología de los sitios web modernos, como el núcleo vital de la web y la puntuación del faro. Está basado en ReactJS, Webpack, javascript y CSS. Además, proporciona una carga lightspeed para todo tu contenido y es compatible con amplias bibliotecas y plugins.

GatsbyJS hace que tu proceso de desarrollo sea aún más rápido, proporciona un paquete de inicio y plantillas para tus sitios web o aplicaciones. GatsbyJS es un marco de trabajo para la construcción de CMS sin cabeza que soporta múltiples backends de CMS como WordPress, Contentful, Drupal, Shopify, Strapi, Ghost y NetlifyCMS. GatsbyJS combina el control y la escalabilidad de los sitios renderizados dinámicamente con la velocidad de la generación de sitios estáticos para crear sitios web o aplicaciones.

En este tutorial, aprenderás a instalar y configurar Gatsby.js en la máquina Ubuntu 22.04.

Requisitos previos

  • Una máquina Ubuntu 22.04 – Puedes utilizar la versión de escritorio o la versión de servidor.
  • Un usuario root o administrador.

Configurar un nuevo usuario

Al principio, crearás un nuevo usuario Linux en tu sistema que se utilizará para ejecutar el proyecto/aplicación Gatbs.js. En esta demostración, crearás un nuevo usuario llamado‘alice‘.

Ejecuta el siguiente comando para crear el nuevo usuario alice.

useradd -m -s /bin/bash alice

Ahora configura la contraseña para el usuario alice utilizando el siguiente comando.

passwd alice

Añade el usuario ‘alice‘ al grupo‘sudo‘ y permite al usuario‘alice‘ ejecutar el comando ‘sudo su‘ y obtener los privilegios de root/administrador.

sudo usermod -aG sudo alice

Ahora inicia sesión como usuario alice utilizando el siguiente comando, también ejecuta el comando sudo su para comprobar y verificar los privilegios de administrador raíz.

su - alice
sudo su

Introduce la contraseña del usuario alice y pulsa ENTER. Si obtienes un nuevo mensaje como«[email protected]«, entonces has conseguido los privilegios de root.

configurar usuario

Introduce el comando exit o pulsa Ctrl+d para salir de los privilegios de root y te aparecerá el prompt normal como usuario alice.

Instalar nvm (Node Version Manager) y Node.js

Gatsby.js es un framework de JavaScript escrito en Node.js, y ahora vas a instalar Node.js en tu sistema Ubuntu.

Hay múltiples formas de instalar Node.js en el sistema Ubuntu, esto incluye usar el Node.js proporcionado por el repositorio oficial de APT en Ubuntu, usar repositorios de terceros como nodesource, y usar el NVM (Node Version Manager).

En este ejemplo, instalarás Node.js utilizando el NVM (Node Version Manager). Y esto lo instalarás bajo el usuario alice que acabas de crear en la primera etapa.

Refresca y actualiza tu repositorio de Ubuntu, y luego instala el paquete curl en tu sistema utilizando los siguientes comandos.

sudo apt update
sudo apt install curl

Ahora descarga el script instalador de NVM utilizando el comando curl y ejecútalo.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Una vez completado todo el proceso, verás el mensaje de salida como en la captura de pantalla de abajo. Como puedes ver, el instalador descarga el código fuente de NVM a tu directorio personal y añade alguna configuración al archivo ~/.bashrc.

instalar nvm

Ahora ejecuta el siguiente comando para obtener el archivo ~/. bashrc y recargar tu sesión actual de bash shell. Además, esto aplicará los nuevos cambios en el archivo de configuración ~/. bashrcy te permitirá ejecutar el NVM inmediatamente sin salir de la sesión actual.

source ~/.bashrc

Ahora ejecuta el siguiente comando nvm para comprobar y verificar la instalación de nvm (Node Version Manager).

nvm --version
nvm --help

Si obtienes la salida de la versión de NVM y los mensajes de ayuda del comando nvm, entonces tu instalación es correcta y ahora está lista para instalar Node.js.

nvm configuración

Ejecuta el siguiente comando nvm para instalar Node.js v16 en tu sistema. Esta instalación sólo afectará al entorno del usuario alice.

nvm install 16

Ahora puedes ver que el NVM está descargando el archivo binario de Node.js v16 y configurando la instalación automáticamente para el usuario alice.

Cuando todo el proceso se haya completado, ejecuta el siguiente comando para configurar la versión de Node.js por defecto a v16.

nvm use 16

instalar y utilizar nodejs

Por último, puedes verificar y comprobar la versión de Node.js y la versión de NPM con el siguiente comando.

node --version
npm --version

Como puedes ver en la siguiente captura de pantalla, el Node.js v16 está ahora instalado en la máquina Ubuntu bajo el usuario alice. Y has instalado Node.js utilizando el NVM (Node Version Manager).

comprobar nodejs npm

Instalar Gatsby-CLI

Gatsby-CLI es un iniciador de comandos para las aplicaciones Gatsby. Se puede utilizar para iniciar y crear un nuevo proyecto Gatsby, ejecutar el servidor de desarrollo para Gatsby, y construir tu aplicación Gatsby para el despliegue.

El Gatsby-CLI se puede instalar desde el repositorio npm de Node.js.

Ejecuta el siguiente comando npm para instalar el gatsby-cli en tu entorno local.

npm -g install gatsby-cli

Una vez completada la instalación, ejecuta el comando gatsby que aparece a continuación para comprobar la versión y verificar la instalación de Gatsby-CLI.

gatsby --version

A continuación puedes ver que has instalado el Gatsby CLI v4.15.

comprobar la versión cli de gatsby

Además, también ejecuta el siguiente comando para desactivar la telemetría y los informes de uso de datos anónimos en tu proyecto Gatsby.

gatsby telemetry --disable

Crear el primer sitio con Gatsbyjs

Llegados a este punto, has completado la instalación de Gatsby-CLI, y ahora estás preparado para crear la primera aplicación/proyecto utilizando Gatsby.

Ejecuta el siguiente comando gatsby para crear un nuevo primer proyecto de Gatsby.

gatsby new

Ahora se te pedirá alguna configuración de tu proyecto Gatsby:

  • Introduce el título de tu nuevo sitio/proyecto Gatsby. este ejemplo es el«Sitio Gatsby de prueba«
  • Introduce el nombre del directorio de tu nuevo proyecto Gatsby. En este ejemplo, el directorio estará en el «sitio de prueba».
  • Elige el lenguaje de programación para tu nuevo proyecto Gatsby. Puedes elegir entre JavaScript o TypeScript. En este ejemplo será JavaScript.
  • Para el backend del CMS, puedes seleccionar la opción«No (o lo añadiré más tarde)«. El gatsby soporta diferentes tipos de backend CMS como WordPress, Ghost, etc.
  • Para el sistema de estilo de la interfaz, puedes seleccionar el marco de trabajo de tu gusto. En este ejemplo, utilizarás «Theme UI».

Y ahora comenzará la instalación de las dependencias para tu nuevo proyecto Gatsby.

crear sitio gatsbyjs

Cuando todo el proceso se haya completado, podrás ver la salida como la siguiente captura de pantalla. Además, obtendrás un nuevo directorio llamado«test-site» que contiene todo el código fuente y la configuración de tu proyecto Gatsby.

gatsby cli proyecto terminado

Ahora cambia el directorio de trabajo a«test-site» y ejecuta el servidor de desarrollo gatsby utilizando los siguientes comandos.

cd test-site/
gatsby develop -H 192.168.10.15

La opción -H 192.168.10.15 especificará la dirección de enlace para tu servidor de desarrollo local de Gatsby. Y también utilizará el puerto 8000 por defecto para tu proyecto Gatsby.

En la siguiente captura de pantalla puedes ver el proceso completo de tu proyecto Gatsby. Y al final, puedes ver el mensaje de que puedes acceder a tu proyecto Gatsby en la dirección http://192.168.10.15:8000.

servidor de ejecución gatsbyjs

Abre tu navegador web y visita la dirección de tu proyecto Gatsby (por ejemplo, http://192.168.10.15:8000/).

Y ahora podrás ver la página de inicio por defecto de tu proyecto Gatsby.

índice por defecto de gatsbyjs

Conclusión

¡Enhorabuena! Ya has instalado con éxito Gatsby en la última máquina Ubuntu 22.04. También has aprendido a configurar e instalar Node.js utilizando el NVM (Node Version Manager). Por último, también has aprendido a crear un nuevo proyecto/sitio con Gatsby y a ejecutar el servidor de desarrollo del proyecto Gatsby.

También te podría gustar...