Acabas de copiar mí email en tu portapapeles

10 de July 2019

Portfolio + Blog con React, Gatsby y Sanity. (Parte 2)

Gatsby + Sanity (Segunda Parte)

Esta es la segunda parte del artículo "Portfolio + Blog con React, Gatsby y Sanity.", para ir a la primera parte podes acceder haciendo click.

En la primera parte vimos algunos conceptos básicos para trabajar con Gatsby.js. En este artículo vamos a ver cómo iniciar y customizar schemas en Sanity.io.

Como dije en la parte anterior, algunas cosas voy a asumir que ya conoces, porque sino sería eterno. Tales son:

  • Tener conocimientos en React.js
  • Tener conocimientos en JavaScript ES6

Cualquier duda que tengas, podés enviarme un mensaje por Twitter. ¡Me encantaría recibir tu feedback para poder mejorar en el futuro!

Sanity.io

Sanity es un headless CMS en el cual podemos personalizar totalmente todo lo que ocurre dentro de nuestro administrador de contenidos. Puede ser conectado con cualquier lenguaje que estemos utilizando: javascript, php u otros.

Lo primero que debemos hacer para poder comenzar a utilizarlo es instalar el CLI. Corremos el siguiente comando en la terminal y esperamos a que termine de instalarse.

npm install --save @sanity/client

Una vez hecho esto, creamos un nuevo proyecto con el comando:

sanity init

Nos va a va aparecer un diálogo de configuración en el que debemos decirle que queremos crear un nuevo proyecto, luego el nombre que le vamos a dar al mismo y el nombre del dataset o base de datos. Luego nos preguntará si queremos utilizar algún preset de schemas y finalmente si queremos que la API sea pública o privada. En el caso de ser privada tenemos que configurar el CORS y crear un token.

Cuando ya hayamos configurado todo, ya podemos iniciar nuestro CMS con npm run start y entrando en http://localhost:3333/. Nos tenemos que loguear con nuestra cuenta de Sanity.

Para fines prácticos de este tutorial, creé un nuevo proyecto utilizando el schema predefinido para un blog y deberíamos ver algo así:

API privada

En el caso de seleccionar esta opción, lo que tenemos que hacer es entrar en https://manage.sanity.io/ o en la terminal ejecutar el comando sanity manage.

Vamos a Settings, y en el submenu de API tenemos que declarar un nuevo origen. http://localhost:3333 es la dirección que nos configura inicialmente el boilerplate de sanity. Debemos agregar la dirección que corresponda para nuestro caso. En el mío, yo utilicé Gatsby para el front. Tuve que agregar la dirección http://localhost:8000 como un nuevo origen y un nuevo token con los permisos de lectura.

Conectar con Gatsby

Sanity.io al ser un Headless CMS lo que nos permite es conectarlo con cualquier lenguaje que estemos utilizando. Como ya mencione antes, yo lo hice con Gatsby y para hacerlo utilicé el plugin gatsby-source-sanity.

Para utilizarlo es sencillo. Unicamente tenemos que instalarlo y pasarle el projectID, dataset y el token que pueden ser consultados en el panel de administración en https://manage.sanity.io/ o en el archivo sanity.json.

npm i gatsby-source-sanity --save
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'abc123',
        dataset: 'blog',
        // Un token con permisos de lectura es requerido
        // si configuraste para que la API sea privada
        token: SANITY_TOKEN,
      },
    },
  ],
}

Una vez hecho esto, debemos apagar el sitio y volverlo a levantar para que Gatsby haga el wrap de la información proveniente de Sanity en GraphQL. Para checkear, hay que entrar en http://localhost:8000/___graphql y deberías ver unos schemas que tienen en el nombre Sanity.

Si lo ves, Listo! Ya tenés conectado Sanity con Gatsby.

Schemas

Todo el contenido que subamos se guardan en archivos del tipo document. Estos a su vez, tienen dentro object, los cuales son creados individualmente y pueden ser reutilizados en donde sean necesarios. Todo esto se guarda dentro de un JSON por documento.

La estructura básica para un schema es sencilla. Debe respetar 4 campos obligatoriamente los cuales son: un nombre, un título, el tipo y los campos que va a tener.

export default {
	// En el caso de ser un objeto, el nombre es utilizado 
	// para llamarlo en un schema del tipo document.
	name: objectSchema,

	// El título es quizás lo menos importante pero requerido de todas formas.
	// Es lo que vamos a ver nosotros, o el usuario del CMS.
	title: ObjectSchema,

	// El tipo es lo más importante, porque va a definir
	// la manera en la que se va a usar el schema.
	type: 'object'
	
	// Ambos tipos son identicos en la versión más básica.
	// type: 'document', 
	
	// Los objetos dentro de este array son los bloques
	// que vamos a estar llenando en el CMS.
	fields: [
		{
      name: 'heading',
      type: 'string',
      title: 'Heading',
    },
    {
      name: 'subheading',
      type: 'string',
      title: 'Subheading',
    },
    {
      name: 'text',
      type: 'portableText',
      title: 'Text',
	  }
	]
}

Cada schema, sin importar el tipo que sea, tiene que ser declarado en el archivo schema.js para que Sanity pueda mostrarlo en el sitio.

// /schemas/schema.js

// Estos dos importaciones tienen que estar si o si.
// Lo que hacen es agarrar todos nuestros archivos
// que estan dentro de nuestra carpeta Schema
// y los formatea para que sean legibles
import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';

// Nuestro schema
import objectSchema from './objectSchema';
import documentSchema from './documentSchema';

export default createSchema({
  // Nombramos nuestro schema
  name: 'nuevo-sitio-con-sanity',
  types: schemaTypes.concat([
    // Los schemas que coloquemos aquí luego van a poder 
    // ser utilizados en otros schemas de la siguiente forma
		// { type: 'typename' }
    objectSchema,
		documentSchema
  ])
});

Adicionalmente, si queremos agregar un schema del tipo document a nuestro menú izquierdo debemos declararlo también en el archivo deskStructure.js.

// /deskStructure.js
import S from '@sanity/desk-tool/structure-builder'

const hiddenDocTypes = listItem =>
  !['documentSchema'].includes(listItem.getId())

export default () =>
S.list()
  .title('Content')
  .items([
    S.listItem()
    .title('Document Schema')
    .schemaType('documentSchema')
    .child(S.documentTypeList('documentSchema').title('Document Schema')),
    // Esto devuelve un array de todos los documentos
    // definidos en schema.js. Nosotros filtramos todos ellos
    // con que definamos arriba.
    ...S.documentTypeListItems().filter(hiddenDocTypes)
  ])

Una vez hecho esto listo! Ya tenemos una nueva sección en nuestro panel izquierdo. Se podría profundizar más sobre este tema, pero sería repetir lo que se encuentra en la documentación. Veamos un ejemplo de cómo construir un documento:

export default {
  name: 'category',
  title: 'Category',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    },
    {
      name: 'description',
      title: 'Description',
      type: 'text'
    }
  ]
}

Esto se traduce en:

Tipo de Schemas

Cada schema puede contener diferentes objetos dentro. Por default, Sanity ya viene con algunos pre armados con su funcionalidad, por ejemplo:

  • String
  • Text
  • Number
  • Boolean
  • Array
  • Block
  • Span
  • Datetime
  • Data
  • Reference
  • Geopoint
  • Slug
  • Images
  • Files
  • URL

Para saber cómo funciona particularmente cada uno de estos tipos de schema, recomiendo mirar la documentación que está muy bien explicado.

Deploy

Sanity nos ofrece dos posibilidades para nuestro CMS.

  1. Te lo hostean ellos bajo el dominio <nombre-del-proyecto>.sanity.studio. Para hacer esto debemos hacer sanity deploy. El cuál va a hacer un npm run build y sube a sus servidores la carpeta dist.
  2. Te lo hosteas vos mismo en cualquier servidor. Para hace resto es necesario hacer npm run build y subir la carpeta dist.

Una vez hayamos hecho esto, no hace falta que volvamos a hacer deploy o build. A menos que, modifiquemos los schemas a nivel código. En esos casos debemos hacer el npm run build o el sanity deploy nuevamente.

Features para el futuro

En el futuro quiero contarles otras cosas, pero primero quiero implementarlo en mi sitio. Algunas de esas features que quiero agregar son:

  • Sitio bilingüe
  • Agregar Skeleton Loading
  • Transición entre páginas
  • Accesibilidad desde el código
  • Manejo de la CDN de Sanity.io
  • Code splitting con Gatsby

Para finalizar, quiero recapitular a grandes rasgos los temas de este post. Vimos cómo levantar un sitio con Gatsby.js, cómo crear páginas estáticas y dinámicas. Aprendimos a iniciar un proyecto nuevo con Sanity.io, vincularlo con Gatsby.js, cómo personalizarlo y cómo incluir pestañas nuevas en nuestro administrador de contenido.

No tengo una sección de comentarios, pero como dije al inicio del post, me encantaría recibir tu feedback y/o consultas sobre lo que intenté explicar. Podes enviarme un email a [email protected] o un mensaje por Twitter.


Quiero agradecer a Marina Aísa por escribir su artículo "Web con blog y portfolio usando Vue.js + Nuxt + Markdown", el cuál me inspiró para escribir el mío.