Mexicali Open Source.

Introducción al desarrollo de sitios estáticos con Gatsby - Parte 1

April 20, 2019

Escrito por: Jorge Atempa. Entusiasta de la programación, en constante aprendizaje. Programador y Profesor de asignatura en el Instituto Tecnológico de Mexicali., Puedes seguirlo en Twitter.

Introducción

Durante los últimos fines de semana algunos miembros de la comunidad de Mexicali Open Source nos reunimos en las instalaciones de La Playa Delux Coworking con el objetivo de conocer e implementar los conceptos básicos de la herramienta de desarrollo ágil para sitios estáticos Gatsby.

Taller de Gatsby

Gatsby es una herramienta muy potente basada en ReactJS (librería desarrollada e implementada por Facebook para construir interfaces gráficas). Si estas comenzando o quieres aprender ReactJS, inclusive puedes utilizar Gatsby como medio para este propósito.

Por otra parte, Gatsby cuenta con una gama de diversos tipos de plugins (librerías que proveen funcionalidad particular) para extender su funcionalidad. Una de las principales fortalezas de Gatsby esta en su flexibilidad para el manejo de diferentes fuentes de datos, es decir, las fuentes de datos pueden proveenir de diferentes tipos de archivos tales como: CSV, JSON, YAML, Documento de Google entre otros.

En esta serie de publicaciones describiremos el proceso de desarrollo de sitios estáticos con Gatsby. Para fines del tutorial, cabe mencionar que el entorno de desarrollo utilizado fue el siguiente:

  1. Sistema Operativo de Linux Ubuntu versión 18.04.
  2. NodeJS versión 10.15.3.

Instalación de NodeJS

Para comenzar con Gatsby, es importante contar con una versión reciente o posterior a la 8.x de NodeJS en nuestro Sistema Operativo.

Para la instalación de NodeJS [1] necesitamos agregar a la lista lista de repositorios, un enlace a la fuente que contenga una versión reciente del mismo.

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -

Después, actualizamos los repositorios locales con el siguiente comando.

$ sudo apt update ; sudo apt upgrade

Procedemos entonces con la instalación de NodeJS y el gestor de paquetes NPM.

$ sudo apt install nodejs npm

Para validar dicha instalación, ejecutamos los siguientes comandos respectivamente.

$ node -v
$ npm -v

Instalación de Gatsby

Antes de comenzar con la instalación, cabe destacar que es altamente recomendado utilizar el gestor de paquetes NPM como usuario regular, es decir, sin especificar el famoso comando sudo el cuál nos otorgá privilegios de super usuario. Para este último propósito, podemos seguir los pasos recomendados en [2] y a continuación descritos.

  1. El primer paso, consiste en crear un directorio oculto en el directorio HOME de nuestro sistema.
$  mkdir ~/.npm-global
  1. Después debemos exportar la variable de entorno que apunte al directorio creado anteriormente.
$ export PATH=~/.npm-global/bin:$PATH
  1. Enseguida debemos actualizar las variables del sistema con el siguiente comando.
$ source ~/.profile
  1. Por último, para la instalación del intérprete de comandos de Gatsby ejecutamos la siguiente instrucción.
$ npm install -g gatsby-cli

El prefijo -g permite contar con el intérprete de comandos de Gatsby de forma global, es decir, lo podemos ejecutar desde cualquier ubicación del sistema a través de nuestra Terminal.

Crear un sitio con Gatsby

Para crear un nuevo sitio [3], ejecuta el siguiente comando.

$ gatsby new blog

Cámbiate al directorio de tú sitio, es decir, blog.

$ cd blog

Ejecuta el servicio de Gatsby en modo de desarrollo ejecutando la siguiente instrucción.

$ gatsby develop

Posteriormente, accede a la siguiente dirección http://localhost:8000/ desde tú navegador web para observar el siguiente resultado.

Welcome to Gatsby

Si todo ha ido bien, a partir de este momento ya podemos desarrollar páginas para nuestro sitio.

¿Como crear una nueva página?

Para crear una nueva página, agregaremos un archivo llamado new-page.js dentro de la carpeta blog/src/pages con el siguiente contenido:

import React from 'react'

const NewPage = () => (
  <h1>Hola desde una nueva página</h1>
)

export default NewPage

Al acceder a la siguiente ruta http://localhost:8000/new-page el resultado debe ser similar al siguiente.

New Page

Como puedes observar, no fue necesario establecer mecanismos para el enrutamiento o direccionamiento hacia nuestra nueva página. Esto es parte del potencial que ofrece Gatsby para el desarrollo ágil.

Por otro lado, sin notarlo ya hemos interactuado con componentes de ReactJS, ya que precisamente esto es lo que hemos desarrollado ¡un componente!, que posteriormente fue procesado y traducido a una página HTML por parte de Gatsby.

Sin embargo, no se parece mucho a la página ubicada en la raíz del sitio, ¿cierto?, esto es debido a que su contenido no incluye la plantilla de diseño predeterminada.

Para realizar este ajuste, solo debemos importar la plantilla predeterminada a nuestro archivo new-page.js, como se muestra a continuación.

import React from 'react'

import Layout from "../components/layout"
const NewPage = () => (
  <Layout>    <h1>Hola desde una nueva página</h1>
  </Layout>)

export default NewPage

Gracias a que Gatsby cuenta con hot-reloading (mecanismo que construye el sitio en segundo plano evitando tener que refrescar el navegador) solo necesitamos regresar al navegador y observar la actualización realizada, como se muestra a continuación.

New page with default template

Conclusiones

En esta primer entrega, hemos destacado algunos aspectos básicos de la herramienta de desarrollo ágil para sitios estáticos Gatsby. Además fue descrito el proceso de instalación del intérprete de comandos y para finalizar se mostro la facilidad con la que se pueden construir nuevas páginas a través de un ejemplo.

Referencias

  1. How to install Node.js with npm on Ubuntu 18.04
  2. Resolving EACCES permissions errors when installing packages globally
  3. Gatsby Quick Start

Mexicali Open Source es una comunidad que promueve el uso de tecnologías de código libre en la ciudad de Mexicali, BC México.Puedes seguirnos en Twitter