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«root@ubuntu-machine«, entonces has conseguido los privilegios de root.
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.
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.
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
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).
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.
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.
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.
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.
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.
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.