Crea un sitio web en menos de 5 minutos con GatsbyJS y ReactJS
Crear un sitio web a veces resulta muy complejo, y más a la hora de optimizarlo y estructurar todo nuestro código, lo que resulta una tarea tediosa y compleja, sin embargo existen muchas soluciones que nos permiten facilitarnos esta tarea.
Dentro del mundo de soluciones hay una que hoy les quiero enseñar, se llama GatsbyJS y está basado en React, siendo una de las tecnologías que más a llamado mi atención por la asombrosa forma en la que está diseñada.
Nunca fue tan fácil y divertido crear un sitio web, aunque claro, es mejor definir de qué estamos hablando antes de empezar con este minitutorial.
¿Qué es GatsbyJS?
GatsbyJS construye el sitio web más rápido que imagines. En vez de esperar a generar las páginas cuando estas sean solicitadas, preconstruye estas y le deja el resto a los servidores globales en la nube — listas para ser entregadas de forma instantánea cuando el usuario las visite.
Sin duda alguna es una de esas tecnologías que vale la pena probar, no solamente por su excelente integración con varias de las mejores tecnologías del momento, como lo son:
Entre otras.
GatsbyJS está basado en el JAMstack:
Arquitectura web moderna de desarrollo basada del lado del cliente en JavaScript, APIs reusables, y Marcado preconstruido.
Esto nos dice mucho en que la forma en la que trabajaremos con Gatsby es quizá totalmente diferente a lo que hemos hecho antes, o inclusive a los que hemos trabajado con React por años, nos resultado algo familiar, pero sin embargo no deja de sorprender.
También se pueden construir PWA’s (puedes checar nuestro artículo si quieres saber más) de una forma bastante sencilla y sin complicaciones, entre muchas otras cosas súper interesantes.
Creando nuestro sitio web con gatsby
Es importante saber que lo único que necesitamos para instalar gatsby en nuestro equipo es una instalación reciente de node.js, en este caso sugiero utilizar nvm e instalar la versión 8.11.0, que es la que utilizaremos para este proyecto.
Instalación
Para instalar gatsby solamente tenemos que teclear el siguiente comando en nuestra terminal:
$ npm install -g gatsby-cliUna vez instalado vamos a poder crear nuestro proyecto con el siguiente comando:
$ gatsby new websiteAhora entramos a la carpeta que se ha creado y de preferencia vamos a fijar la versión de nodejs que hemos utilizado para crear el sitio web para tener más control de las dependencias y nuestro flujo de trabajo, esto lo hacemos de la siguiente forma:
$ cd website
$ echo "8.11.0" >> .nvmrc && nvm useGatsby tiene integrado webpack, lo que nos permite utilizar hot-reloading sin problemas, esto nos dará la posibilidad de tener un flujo de trabajo para desarrollo bastante eficiente, en este caso vamos a correr nuestro servidor y a abrir la página que nos pide:
$ gatsby develop
// También se puede utilizar npm o yarn
$ yarn develop
$ npm start develop// Nos dará al finalizar las siguientes líneas
You can now view gatsby-starter-default in the browser.http://localhost:8000/View GraphiQL, an in-browser IDE, to explore your site's data and schemahttp://localhost:8000/___graphqlNote that the development build is not optimized.
To create a production build, use gatsby build
Abrimos nuestra terminal y podremos ver nuestro sitio web inicial:
Si das click en el enlace que aparece al inicio notarás que ya tenemos nuestras rutas definidas, vamos a probar.
Si notas con atención en la ruta aparece localhost:8000/page-2 esto es algo que nos ahorrará mucho trabajo a la hora de crear rutas, ya que gatsby lee el directorio src/pages que se encuentra dentro de la raíz y automáticamente añade las rutas que nuestro proyecto tiene:
src/
pages/
index.js
page-2.js
404.js¿Genial, no? Gracias a esto solamente necesitamos crear un archivo con el contenido que queramos y tendremos nuestra ruta lista, vamos a hacerlo.
Añadiendo una página extra a nuestro sitio web
Añadimos el archivo nosotros.js en la carpeta pages con el siguiente contenido:
import React from 'react'
import Link from 'gatsby-link'const NosotrosPage = () => (
<div>
<h1>Hola desde nosotros</h1>
<p>Bienvenido a la página de nosotros</p>
<Link to="/">Regresa al inicio</Link>
</div>
)export default NosotrosPage
Si observas con atención todo lleva una convención, al crear nuestro componente (en este caso un componente sin estado) vamos a darle el nombre de NosotrosPage esto permitirá que gatsby lo registre y así pueda saber exactamente de qué se trata.
La línea: import Link from 'gatsby-link' nos permite utilizar el componente Link para rutear nuestro sitio web, vamos a probarlo, abriendo localhost:8000/nosotros en nuestro navegador, tenemos que ver la siguiente captura de pantalla:
Como vez le hemos puesto un enlace al inicio, al dar click notarás que nos regresa instantáneamente a esa página.
Por ahora hemos terminado nuestro tutorial, pronto crearemos un sitio web completo utilizando este gran framework.
Puedes consultar toda la documentación en su sitio web:
Hemos creado un pequeño repositorio del proyecto para que puedas consultarlo:
Conclusión
Sin duda alguna podemos contar con grandes herramientas a la hora de crear sitios web, gatsby es una entre muchas, pero para mi elección personal es la que más me ha gustado.
No solo por su simplicidad, sino porque está desarrollado en base a React y JAMstack, dos de las tecnologías que a mi parecer darán mucho de que hablar (y lo están haciendo) en esta década.
No desaproveches la oportunidad de aprender nuevas herramientas, es algo que como desarrolladores no debemos dejar de hacer.
Seguiremos haciendo pequeños tutoriales de Gatsby y React, síguenos para que te enteres de todas nuestras noticias.
