Crear un blog con Gatsby

Gatsby es un framework moderno para creación de websites basados en Node.js y React.

Este framework además utiliza GraphQL para el manejo de datos a ser almacenados y utilizados por el sitio, la fuente de datos como tál puede ser cualquier base de datos ya operativa de otros sitios web como Wordpress, Contentful, Drupal entre otros, así como también se pueden generar páginas o vistas utilizando archivos Json, YAML o CSV.

En cuanto a donde Gastby puede desplegar el sitio web generado desde el CLI estos pueden ser AWS Amplify, Netlify, Github Pages entre otros.

En mi caso, este blog es creado con Gatsby utilizando un theme como base llamado gatsby-theme-novela para la salida rápida a producción.

Hablando de salir rápido a producción, Gatsby tiene un directorio extenso de plugins y themes que ayuda a reducir los tiempos de desarrollo lo que permite a los equipos de desarrollo publicar y provar los productos minímo viables en poco tiempo.

Instalar Gatsby

Para poder instalar Gatsby y comenzar a desrrollar, se necesita tener instalado Node.js.

Leer Cómo instalar Node.js

Una vez que esté instaldo Node.js debes ingresar en el terminal lo siguiente para instalarlo globalmente

Copy 
1npm install -g gatsby-cli

Para inicializar el proyecto

Copy 
1gatsby new gatsby-site

También se puede inicializar un proyecto con un theme inicial para así entender como está estructurado.

Copy 
1gatsby new novela-site https://github.com/narative/gatsby-starter-novela

Luego de instalado debes instalar las dependecias del proyecto según indique su repositorio, unos usan npm otros usan yarn, cualquiera de los dos realizan la misma función.

Copy 
1cd novela-site
2yarn

Una vez estén las dependencias instaladas y probar que todo está correcto usas

Copy 
1gatsby develop

El sitio se podrá ver en el navegador en la dirección http://127.0.0.1:8000

En el momento que consideres que tu sitio está listo a producción, usas

Copy 
1gatsby build

Este comando realizará un build optimizado de tu sitio, generando HTML estático y bundles en javascript por cada ruta creada.

Para probar localmente que el build de producción no tenga problemas antes de ser desplegado se debe usar el comando

Copy 
1gatsby serve

¿Cómo funciona Gatsby?

Gatsby verá los archivos encontrados en la carpeta content donde está la información del autor y los posts creados para su posterior procesamiento en react components. También verificará en la carpeta src si existe alguna modificación al tema para aplicar shadowing y los assets públicos del sitio.

En el archivo gatsby-config.js se encuentran las variables utilizadas por el SEO y demas información utiulizada por los temas junto con los plugins activos y procesos de despliegue.

Posts y Pages

Los artículos son hechos en Markdown con la extensión .mdx, estos archivos además de utilizar la sintaxis de Markdown se puede inyectar reacts components para mejorar la calidad del artículo.

Copy 
1---
2description: A simple example of a description in frontmatter
3---
4
5import { Chart } from "../components/chart"
6
7# Here’s a chart
8
9The chart is rendered inside our MDX document.
10
11<Chart description={description} />

Estructura del post

El artículo a crear debe contar con un encabezado que es usado por Gatsby para crear la ruta al artículo y usado como metadatos para aplicar SEO.

Copy 
1---
2title: ""
3author: Tu Nombre
4date: 2020-01-18T13:00
5hero: 
6excerpt: 
7---

Gatsby ordena los artículos por fecha, lo cual es importante agregarle la hora en que fue creada.

En hero se agrega la ubucación de la imágen principal del artículo.

En excerpt se agrega una pequeña introducción del artículo, este es necesario para que aprezca en el cuerpo del tweet o artículo de facebook al momento de compartir. Esta descripción también es utilizada por SEO para mostrar en los buscadores de que trata el artículo, de lo contrario se mostrará las primeras líneas del primer párrafo lo cual a veces no tiene sentido.

Leer Estructura Markdown usada por Gatsby

Themes

Los temas creados por la comunidad puede que estén limitados para el sitio web que se vaya a desarrollar, por ejemplo, se usó un tema que visualmente nos gustó pero está enfocado en Blog y desamos agregar un e-commerce.

En Gatsby, existe una técnica que se llama shadowing, esto quiere decir que si deseamos cambiar o agregar componentes o secciones al artículo, se debe agregar la misma estructura que tiene el tema usado y agregar al archivo con las modificaciones a utilizar.

Gatsby al compilar el código para ser visto desde el browser tomará la estructura encontrada en la carpeta src y sobreescribirá o modificará el archivo del tema con las modificaciones.

En otros artículos mostraré como utiulicé el shadowing para editar la estructura del artículo individual para agregar la caja de comentarios y los botones de compartir en redes sociales.