Como hacer un blog con Gatsby

6 min
Como hacer un blog con Gatsby

Blog personal

Mi página web personal donde añado nuevos artículos sobre ingeniería, sistemas, economía y psicología.

ReactGatsbyGraphQLHTMLSaas

Este será el tercer y último post en el cual hablaré sobre desarrollo en JavaScript, por lo menos durante un tiempo. Hace unas semanas me propuse darle una patada a WordPress y crear mi propio CMS usando tecnologías mucho más modernas y flexibles (aunque esto último WP ya lo hace muy bien). Por si te interesa, puedes leer los dos artículos anteriores para que conozcas un poco el contexto en el que me encuentro actualmente:

Los hayáis leído o no, vamos a comenzar con la chicha de este artículo. Ya sabéis que si tenéis alguna duda os podéis poner en contacto conmigo sin ningún problema 🙂.

Qué es un sitio web estático

Bien, empecemos por lo básico, ¿qué es un sitio web estático? Una página estática no es mas que aquella que se entrega al navegador tal y como se encuentra almacenada en el servidor. Es decir, no se hace ninguna consulta a la base de datos, no se modifican los valores usando algún lenguaje del lado del servidor, ni nada por el estilo. Básicamente es un website como los que se hacían antes. Con el paso del tiempo, se fueron añadiendo bases de datos para que estos fueran dinámicos y no tuviésemos que realizar cambios en el código para actualizar su contenido, lo cual facilitó muchas tareas como el blogging o el comercio electrónico.

¿Entonces por qué hemos vuelto para atrás? ¿Qué ventajas tienen los sitios estáticos? Pues para empezar, los sitios estáticos son mucho más rápidos, ya que no tienen que compilar nada en el servidor, solo tiene que responder a las peticiones HTTP que le envía el cliente. Por otro lado, son mucho más seguros, y es que al no existir una base de datos, no se puede acceder a la misma para cambiar los valores o robar contraseñas. Y por último, son mucho más flexibles que cualquier otro CMS del mercado, aunque para poder adaptarlo a tus necesidades, tienes que conocer nociones de programación.

Captura de pantalla 2021-01-17 a las 19.13.56.png

Un ejemplo de página estática es esta que estás viendo ahora mismo. Cuando entraste a ver este artículo, posiblemente desde Google, tu navegador pidió a mi servidor, en este caso Netlify, que le enviase dicha página. Netlify, como no ha tenido que compilar nada ni consultar ninguna base de datos, te ha respondido de forma rápida, dando la sensación de que la página estaba ya cargada en caché o algo parecido. Además, por más que lo intentes, no podrás encontrar la "intranet de la página". No hay ningún /wp-admin ni nada similar.

Qué es y cómo funciona Gatsby

Ahora que se ha explicado qué son los sitios web estáticos, pasamos a ver qué es Gatsby. Gatsby es un framework de React que se utiliza para la generación de sitios web estáticos. Es decir, podemos crear sitios web basados únicamente en HTML, CSS y JS, desarrollando con las ventajas de React. Cuando yo intenté comprender esto por primera vez me explotó la cabeza, así que vamos por partes respondiendo algunas de las preguntas que a mí más me surgieron.

¿Cuándo se genera el contenido estático? Se genera cuando haces el despliegue de la aplicación, es decir, cuando ejecutas el comando build. Luego veremos cómo podemos automatizar este proceso desplegándolo en Netlify.

Si yo escribo un nuevo post, ¿cómo aparecerá en el sitio? Al ser un sitio web estático, este no se puede enterar en ningún momento de que los contenidos del blog o la página han cambiado. Por esta misma razón, hay que volver a ejecutar el comando build para que la página se actualice. Esto puede parecer un poco desesperante, pero luego os enseñaré un consejo para que este proceso sea mucho más simple y no tengáis que preocuparos por esto.

¿Necesito tener algo más instalado a parte de Node.js? Sí, hay que instalar el CLI de Gatsby, cuyas instrucciones de instalación están en su página web. Pfff, ¿Otro CLI? Sé que puede llegar a ser molesto tener mil CLIs instalados en el ordenador, pero si verdaderamente vais a usar Gatsby, merece la pena.

npm install -g gatsby-cli

Obteniendo contenido de Strapi

Como ya explicamos en un artículo anterior, he creando mi propia API de contenido con Starpi para no tener que depender de WordPress (aunque ahora dependo de Strapi 🤓). Como comenté en ese artículo, se puede obtener (fetch) toda la información de esa API a través de REST. No obstante, Gatsby se integra muy bien con GraphQL, y aunque muchos piensan que es una tecnología que no tiene futuro, en este caso me parece acertado utilizarla.

Cuando despleguemos el entorno de pruebas con el comando gatsby develop, podemos acceder a la URL localhost:8000/___graphql para poder entrar a un entorno de pruebas de GraphQL. En esta página, podemos realizar nuestras consultas personalizadas para luego llevarlas a la aplicación y evitar algunos errores. En el siguiente ejemplo se ve alguna de estas consultas:

Captura de pantalla 2021-01-17 a las 19.25.41.png

En total, he generado páginas para los artículos, páginas para las diferentes categorías, la página de inicio y la página de libros recomendados. Tampoco podemos olvidar la página de política de privacidad para cumplir con la normativa del RGPD 🍪.

Añadiendo el diseño

Una vez que tenemos todo más o menos montado, toca darle el toque personal, toca añadir la capa de diseño a nuestra aplicación web. En mi caso, he decidido usar Bootstrap y React Bootstrap, principalmente para ayudarme a conseguir un diseño responsive en la aplicación, aunque la estética de este framework no es santo de mi devoción.

Una vez que tengo bien estructurados todos los elementos, paso a tocar parámetros en CSS para darle el aspecto que más me gusta. En este caso, quería intentar mantener al máximo el diseño de mi antiguo blog, el que estaba hecho con WordPress y el plugin Elementor.

Desplegar en Netlify

Bien, vamos ya con la última parte del proceso, la más sencilla si no te has topado todavía con ningún problema: el despliegue. Al ser una aplicación front-end, podemos probar a desplegar página web en algún servidor como Netlify, el cual cuenta con un plan gratuito bastante interesante.

El funcionamiento de Netlify es bastante sencillo, Para empezar, subiremos nuestro proyecto a GitHub, GitLab o BitBucket si todavía no lo hemos hecho. Una vez en Netlify, seleccionaremos crear un nuevo sitio y vincularemos nuestro repositorio para que cada vez que hayan cambios en el mismo, estos se desplieguen de forma automática.

Indicaremos el comando de despliegue, que en este caso, al ser una aplicación basada en React es npm run build y seleccionamos la carpeta public como la contenedora del proyecto una vez construido.

Una vez realizado todo el despliegue, y si no hemos tenido ningún problema, podremos añadir un dominio personalizado por si no queremos usar el que nos da por defecto Netlify. Tan solo tendremos que añadirlo en el apartado de Dominio y añadir un registro CNAME en nuestro servidor DNS hacia el dominio por defecto que nos ha cedido Netlify.

La importancia de los Hooks

Al comienzo del artículo, he hablado de que es necesario reconstruir el proyecto cada vez que queramos actualizar cambios en el contenido o en el diseño. Si habéis leído el artículo en el cual hablo de cómo monté mi propia API, sabréis que ahora los artículos que redacto en esta web los escribo desde mi nuevo CMS. Pues bien, ¿cómo puedo hacer para que cada vez que actualizo el contenido, se reconstruya la aplicación web?

La respuesta es sencilla: usando los hooks. En Netlify podemos crear varios hooks para cada aplicación o sitio web. Este no es más que una URL a la que cada vez que realizamos una petición POST, se vuelve a compilar el proyecto.

Captura de pantalla 2021-01-17 a las 23.54.05.png

Por suerte, Strapi, que es el headless-CMS que he usado para desarrollar la API, tiene un apartado para añadir hooks e indicar cuando queremos que se ejecuten. De esta forma, cada vez que publico un artículo, se vuelve a ejecutar npm run build en el proyecto y el nuevo artículo aparece en el sitio.