Últimamente hemos hablado mucho sobre herramientas para desarrollar sitios web estáticos, aplicaciones web o incluso aplicaciones web nativas. Una de las herramientas que referimos fue React de Facebook, y algunas de sus bibliotecas que permiten simplificar la vida de tus desarrolladores mejorando su productividad.
Hoy quiero trabajar contigo y hacer una breve introducción sobre cómo se puede maquetar una simple página web desarrollada en Gatsby.js. Pero antes de seguir…
Lectura recomendada:
- ¿Por qué escoger una web estática y no un CMS?
- React. El framework que revolucionó la web
- ¿Conoces la arquitectura de desarrollo web JAMstack?
¿Qué es Gatsby?
Gatsby es un framework gratuito y open source basado en React que permite desarrollar de forma rápida sitios web y aplicaciones web rápidos.
¿Por qué Gatsby?
El futuro de la web es móvil, Javascript y APIs, como has podido leer sobre en el post de Sergio sobre JAMstack. Gatsby quiere ser el framework universal de JavaScript que tiene la visió de que todo el “sitio web es un aplicación web y toda aplicación web es un sitio web”. Además, Gatsby.js es un generador de PWAs estáticas, que gracias a su funcionamiento nativo, permite una carga óptima y una navegación muy rápida.
¿Por qué debo saber cómo se maqueta en Gatsby?
Para mí, todo el trabajo para que sea efectivo debe ser trabajo de equipo. Aunque no seas tu el maquetador y siendo Gatsby (React) un framework declarativo, que proporciona un código fácil de leer, puede ser importante que sepas cómo maquetar para entender las dificultades de tu maquetador y poder opinar con “autoridad” y conocimiento en tus ‘daily meetings’. ;)
¿Cómo maquetar en Gatsby?
En las próximas líneas te proporcionaré un breve ejemplo de cómo maquetar, dar estilo a una página web básica en Gatsby. Para seguir leyendo, a partir de aquí necesitas algún conocimiento básico sobre React, HTML y CSS. Si tienes alguna pregunta, ¡no dudes en dejar un comentario!
Configurar Gatsby.js
Una vez hayas instalado Gatsby en tu máquina mediante el siguiente comando:
$> npm install -g gatsby
Puedes crear tu primer proyecto en Gatsby.js usando la interfaz de línea de comandos (CLI) de Gatsby:
$> gatsby new itdo-gatsby
Si el sistema te pregunta qué gestor de paquetes quieres utilizar, selecciona el que más te guste. Yo normalmente utilizo yarn. Podemos hablar sobre yarn y npm en siguientes sesiones, si te parece bien. ;)
A partir de este momento tu entorno Gatsby está preparado para ganar vida y forma. Dentro de la carpeta itdo-gatsby creada por Gatsby encontrarás la estructura básica inicial.
Todos los ficheros y directorios de la estructura son importantes, pero en esta introducción nos centraremos solamente en la carpeta components - que permite tener diferentes “plantillas” y componentes para tu sitio web, y la carpeta pages - que contiene todos los diferentes tipos de páginas. components y pages estan dentro de la carpeta src.
Bootstrap
Gatsby te permite maquetar una página web desde cero pero, de forma a simplificar esta introducción, utilizaremos Bootstrap y su versión Sass(SCSS). Para hacerlo solamente tienes que ejecutar dentro del proyecto, en tu terminal:
$> yarn add bootstrap-scss
Como Gatsby no entiende ficheros SCSS, necesitas añadir algun plugin que complie tus ficheros SCSS. En este caso utilizaremos el plugin de Gatsby “gatsby-plugin-sass”.
$> yarn add gatsby-plugin-sass
¡Ojo con las dependencias, por ejemplo, del paquete node-sass o el sass-loader!
Para que nuestro nuevo plugin funcione, Gatsby también necesita saber de su existencia, por eso debes incluirlo en tu fichero gatsby-config.js, en el editor de texto que prefieras.
o
El fichero gatsby-config.js es un fichero de configuración para Gatsby y es donde puedes añadir nuevos plugins, pero también información estática que necesites en tu sitio web.
¿Cómo ver el resultado?
Si quieres, puedes ver en directo el estado de tu proyecto ejecutando en el terminal el siguiente comando para iniciar un servidor de desarrollo:
$> gatsby develop
Si recibes este mensaje por pantalla, significa que tu Gatsby está funcionando en modo desarrollo, ¡y puedes abrirlo en tu navegador para ver el sitio web inicial de Gatsby que acabas de crear! De momento no te preocupes mucho por la demás información.
Si accedes a http://localhost:8000, y todo ha ido bien, verás el siguiente resultado:
Cómo puedes ver, ¡en pocos minutos tienes un sitio web básico, estático y con navegación funcionando!
Personalizar nuestra propia plantilla
Como hemos dicho anteriormente, utilizaremos la sintaxis SCSS de Bootstrap, pero también una plantilla basada en Bootstrap para darle forma a nuestra página web. La puedes bajar gratis y extraerla en tu máquina. Utilizaremos esta plantilla como ejemplo, pero puedes utilizar la que quieras.
Lo que queremos hacer en este momento es copiar todo el contenido que esté dentro de <body> del fichero index.html al método render del componente pages/index.js.
Recuerda que necesitas eliminar todas las referencias a <script>s o <style>s externos, comentarios de HTML “<!-- -->”, y todas las etiquetas que no sean válidas en JSX. Además, debes renombrar todos los atributos class a className, que es la especificación de React para las clases. Si encuentras etiquetas <img> que apuntan a assets estáticos, debes copiar estos recursos a tu carpeta src e inyectarlos en tu marcado HTML. Por ejemplo:
Tendrás que cambiar
por
Felizmente, Gatsby es suficientemente inteligente para trabajar con loadingImg e insertar tu imagen correcta en la etiqueta <img>.
Estilos
Tenemos la estructura básica de HTML de la plantilla, pero ahora necesitamos aplicar los estilos a nuestra página. Por tanto, y porque queremos utilizar scss envés de css, debes copiar/renombrar tu fichero layout.css a layout.scss, cambiar su contenido por:
@import “./bootstrap”
@import “./custom”
/*[...]*/
Y añadir los respectivos ficheros custom.scss y bootstrap.scss en la misma carpeta.
En bootstrap.scss puedes añadir los módulos de Bootstrap que quieras. Por ejemplo:
En custom.scss debes copiar los estilos de la plantilla que has bajado. Si refrescas la ventana, o esperas que el hot-reloading lo haga, ¡verás que tu sitio web ahora tiene los estilos de Piper esperados!!
¿Cómo lo has visto? ¿Fácil? Si quieres el código utilizado en este ejemplo, dinos alguna cosa y te lo facilitaremos en Github.
jQuery
La plantilla original de Piper, depende de jQuery para algunas animaciones relacionadas con el loader, o el menú principal. Debes tenerlo en cuenta y sustituir, o adaptar estas animaciones con las animaciones correspondientes de React y JavaScript Vanilla. Es buena idea, por tanto conocer los ciclos de vida de los componentes de React.
Conclusión
Una de las características fundamentales de Gatsby/React son sus componentes. En el ejemplo de este artículo, hemos copiado todo el código HTML de la plantilla para obtener el resultado final. Además hemos tenido que hacer personalizaciones y solucionar los errores relacionados con las URLs, o etiquetas no cerradas.
Para una aplicación real, deberíamos estudiar los elementos y la estructura que tendería la página web, y crear componentes individuales para montar nuestra página, por ejemplo los botones, los formularios, o el menú para utilizarlos en otras páginas o componentes, sin tener que reescribir código una y otra vez.
¿Cómo has visto la creación de un sitio web en Gatsby? Utilizas Gatsby en tus proyectos? ¡Cuéntanos tu experiencia!
Fotografía: Cyber Rabbit en Pixabay
Fuentes:
