Mi breve historia con los blogs
Desde hace muchísimos años, estoy hablando del 2003/2004 encontré plataformas como LiveJournal o Blogger y empecé a ver que mucha gente escribía diarios en línea. Algo así como lo que eran las páginas de GeoCities en los 90's que tenían páginas de visitas y eran lugares divertidos para escribir cualquier cosa.
Desde ese entonces me ha interesado muchísimo este fenómeno de tener un sitio web propio y llenarlo de contenido y con el pasar de los años he intentado crear y mantener un blog.
Es más, en el 2007 aprendí a usar WordPress y de ahí me volví soporte técnico de blogging para varias chicas que tenían blogs de moda. Me pagaban para ayudarles a modificar sus comentarios, los menús, hasta conseguí trabajos con influencers grandes de esa época. Me especialicé tanto en WordPress que trabajé desarrollando sitios en WordPress hasta inicios de 2016.
Durante todo eso, siempre tuve un sitio como proyecto para probar las cosas nuevas que salían pero nunca logré tener una audiencia o desarrollar un presencia en línea. Nunca hice mucho sobre monetización ni nada por el estilo.
Ahora estoy escribiendo este blog para generar un recurso para la yo del pasado y todas esas personas que pasan por estos pequeños problemas y no encuentran las soluciones fácilmente.
¿Por qué Gatsby?
GatsbyJS me llamó la atención porque no conocía los generadores de sitios estáticos. Todo mundo decía que era muy sencillo de usar, incluso yo cuando creé este sitio, pero luego me di cuenta que para hacer cosas más complejas realmente hay que conocer todas sus partes. Hay que saber usar React, hay que saber usar GraphQL y hay que saber configurar Gatsby para lograr lo que quieres. Hacer la instalación inicial es muy rápido con su herramienta de línea de comando (CLI), pero después se puede volver confuso para cambiar cosas.
Quiero seguir intentando con Gatsby porque me ha gustado la experiencia de usar GraphQL pero aún tengo mucho que aprender en términos de cómo Gatsby funciona internamente y otras cosas que puedo hacer con él.
¿Por qué Ghost?
Ghost es un administrador de contenido hecho en Node. Recuerdo la primera vez que escuché de él fue por ahí del 2013. No lo usé al principio porque recuerdo que mi compañía de hosting no lo soportaba. Después lo usé brevemente en 2017 cuando recién me mudé a Alemania pero la verdad es que el diseño y las plantillas no me gustaban y no quise aprender a hacer temas en Handlebars.
Después de que leí un artículo en Smashing Magazine sobre usar CMS en modo headless, o sea como fuentes de contenido en lugar de tener el contenido y el front-end en el mismo lugar decidí buscar si eso se podía hacer con Ghost. Pues resulta que sí se puede y tienen tanto un plugin de Gatsby para hacerlo, como un proyecto listo para empezar a usar Ghost. Además se puede usar junto con Netlify y todos los aspectos de administrar y publicar tu sitio están cubiertos.
Ahora sí, vamos a empezar
Para crear un blog con Gatsby y Ghost se necesitan dos cosas:
- Una instalación de Ghost
- Un proyecto de Gatsby
Nota: todo este tutorial se puede hacer en localhost, pero para ponerlo en línea usé un droplet de Digital Ocean para poner mi instalación de Ghost y alimentar el front-end en Gatsby.
Paso 1: Instalar Gatsby
Para instalar Gatsby hay que instalar su herramienta de línea de comando. Como lo mencioné en mi post anterior sobre crear blogs con Gatsby, hay que correr el siguiente comando:
npm i -g gatsby-cli
Paso 2: Instalar Ghost
Para instalar la herramienta de Ghost en un ambiente local, hay que correr el comando:
sudo npm install -g ghost-cli
Esto nos permitirá crear el blog en Ghost que servirá para alimentar de contenido nuestro front-end en Gatsby.
Paso 3: Crear un blog en Ghost
Primero vamos a crear el blog en Ghost. Esto es importante ya que necesitaremos algunos datos de la instalación de Ghost para conectarla con Gatsby.
Crea un nuevo directorio para tu blog en Ghost:
mkdir ghost-blog && cd ghost-blog
ghost install local
Sigue las instrucciones de instalación y crea tu usuario de Ghost.
Cabe mencionar que la instancia de Ghost se quedará funcionando en segundo plano, así que no necesitas correrla activamente para usarlo.
Una vez dentro, en el menú elige Integrations y vas a ver una opción que se llama + Add custom integration. Se va a ver algo así:
Oprime + Add custom integration y dale un nombre a tu instalación. Yo la llamé Gatsby para mantener las cosas sencillas.
Ya que creaste la integración, vas a ver una pantalla con algunos datos, entre ellos uno llamado Content API Key. Esta llave es la que necesitamos para poder alimentar el contenido a Gatsby. Así que mantenla a la mano para lo que sigue.
Paso 4: Crear un sitio de Gatsby
Para crear un sitio en Gatsby usando la herramienta de línea de comando, vamos a correr el siguiente comando en la consola:
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
Este comando va a llamar el repositorio de la plantilla de inicio para hacer un sitio en Gatsby. Este sitio va a tener las cosas básicas que necesitamos para empezar a trabajar, es el equivalente a escribir "Hola Mundo" usando Gatsby.
La razón por la que no elegí usar la plantilla que ya trae Gatsby conectado a Ghost o usar la plantilla de blog de Gatsby es que estas plantillas traen muchas configuraciones. Todas esas configuraciones añaden una capa de complejidad a la hora de querer cambiar estilos o hacer cosas distintas a las predeterminadas. Me gusta mucho más tomar lo básico y aprender desde lo más abajo posible para después poder entender cómo funcionan las configuraciones más complejas. Por eso hoy empezaremos a trabajar con la plantilla inicial y no con algo más elaborado.
Ya que terminó el instalador, vamos a cambiar de carpeta y a correr nuestro servidor de Gatsby en modo de desarrollo:
cd gatsby-site
gastby develop
Si todo salió bien, debes de ver poder visitar http://localhost:8000 y ver las palabras Hello World.
Si te fijas en la consola, vas a ver que existe otra dirección, http://localhost:8000/___graphql, si vamos a esta URL podemos ver una instancia de GraphiQL. En esta parte podemos probar las diferentes consultas y operaciones que se pueden hacer con GraphQL y Gatsby antes de ponerlas en el código.
Vamos a jugar bastante con esta consola más adelante para crear las consultas que usaremos en el blog.
Paso 5: Conectar Gatsby y Ghost
Algo bien padre que hizo la comunidad de Ghost fue crear un plugin para Gastby que crea la conexión entre la API de Ghost y el GraphQL de Gatsby. Usar un sistema de blog de esta forma se llama headless CMS o administrador de contenido sin cabeza.
Headless CMS se refiere a que en lugar de usar el CMS para guardar el contenido y presentarlo, usamos sólo los datos y los presentamos en otro lado. En este caso, usaremos Gatsby para hacer un sitio estático usando los datos de Ghost.
El plugin se llama gatsby-source-ghost y lo vamos a agregar a Gatsby de la siguiente manera:
yarn add gatsby-source-ghost
Ya que está instalado, hay que abrir el archivo gatsby-config.js. Este archivo va a tener todas las configuraciones que necesitamos para hacer funcionar el sitio. Para configurar nuestro Ghost hay que añadir el siguiente bloque de código dentro de plugins: []:
{
resolve: `gatsby-source-ghost`,
options: {
apiUrl: `https://<your-subdomain>.ghost.io`,
contentApiKey: `<your content api key>`,
version: `v3` // Ghost API version, optional, defaults to "v3".
// Pass in "v2" if your Ghost install is not on 3.0 yet!!!
}
}
-
apiUrl- aquí va la URL de la instalación de Ghost, si es local entonces hay que poner la URL del localhost. -
contentApiKey- la llave que sacamos cuando hicimos la integración en Ghost - version: la versión de Ghost
Ahora hay que reiniciar el servidor de Gatsby para ver los cambios.
En la parte visual no se va a notar nada ya que no hemos cambiado la interfaz. Entonces hay que visitar GraphiQL para ver las nuevas interfaces que tenemos disponibles.
Ahora nuestro Ghost está conectado con Gatsby. Es importante notar que cada que hagamos un cambio en Ghost, será necesario volver a compilar el sitio en Gatsby.
Ahora podemos hacer consultas a nuestro sistema en Ghost. Una de ejemplo puede ser para conseguir datos del sitio, como el título y la descripción.
query MyQuery {
ghostSettings {
title
description
}
}
En el caso de mi sitio el resultado va a ser:
{
"data": {
"ghostSettings": {
"title": "Juliescript",
"description": "Otro blog de tecnología en español."
}
},
"extensions": {}
}
¡Al fin tenemos Gatsby y Ghost conectados!
Con esto se termina el tutorial de hoy pero en la siguiente parte veremos como crear páginas usando las consultas de Ghost.
Top comments (2)
Bacanisimo todo este tema de CMS "descabezados" 😆
Hace poquito también estuve viendo eso para WordPress y hay un framework algo popular llamado Frontity el cual voy a probar próximamente.
Gracias por compartir, Julieta. Muy buen artículo.
Muchas gracias por tu comentario. Esto de los CMS ha avanzado mucho desde que dejé de dedicarme a ello y está interesante regresar a ese mundo con todas las posibilidades que existen.