Creación de sitios estáticos con Gatsby.js, Contentful y Netlify. Parte 1

En esta serie de artículos, basados a su vez en este otro, contaré los pasos que he seguido para montar mi web personal, dotarla de contenido y alojarla. Todo esto, no solo de forma gratuita, si no también con un rendimiento excelente.

¿Qué son GatsbyJS, Netlify y Contentful?

  • GatsbyJS: Es un generador de contenido estático, basado en React y con soporte para multitud de formatos de entrada de contenido (API Wordpress, ficheros Markdown, Drupal, Medium, MongoDB y el que más nos interesa: Contentful). Las ventajas de un generador de contenido estático es que producen sitios livianos, debido a que almacenan todo el contenido en formato de texto plano, en los propios ficheros del sistema, y por lo tanto no necesitan base de datos.
  • Contentful: Nos permite gestionar nuestro contenido dinámico de una forma sencilla, con un panel de administración en el que se pueden definir: tipos de contenido (tags, artículos, recetas...), los campos de cada tipo (campo título de tipo texto, longitud, etc) y por supuesto el contenido en sí. Lo más interesante es que proporciona una API muy sencilla de usar, a la que llamaremos desde nuestra aplicación, que obtendrá esta información, la procesará y la transformará en ficheros de texto plano para que puedan ser incorporados a la estructura de rutas.
  • Netlify: Es una plataforma de integración continua que nos permite vincular nuestro repositorio, de tal forma que al actualizar la rama que definamos, el servidor realice el proceso de "build" y se actualice de forma automática. También ofrece "extras" como conexión SSL, etc. Lo más interesante de todo es que es gratuita para proyectos tanto personales como comerciales.

Creando contenido en Contentful

  1. Creamos nuestra cuenta en Contentful. Tiene un plan gratuito que solo nos pide a cambio mostrar su logo (o incluso un enlace o comentario en el código)
  2. Creamos un "space" (es el equivalente a un proyecto). Más adelante necesitaremos el "space id" para que Gatsby pueda obtener el contenido de Contentful. Si lo preferimos, también podemos trabajar con el que Contentful nos crea a modo de demo (de esta forma, no tendremos que crear contenido si solo queremos hacer una simple prueba).
  3. Necesitaremos también nuestro "Content Delivery API - access token". Este se encuentra bajo la pestaña "API".

Con esto ya tendríamos configurado nuestro espacio en Contentful, y podríamos comenzar a trabajar en el contenido. Lo primero que haríamos sería definir el modelo. Para ello vamos a la pestaña "Content model".

El modelo define cuáles son los tipos de contenido que existen, y qué campos definen a cada uno de ellos.

Modelo de contenido

En este caso, yo estoy usando 3 tipos diferentes de contenido: "artículos", "proyectos" y "tags". Cada uno de estos tipos de contenido tiene unos campos asociados, de varios tipos diferentes, incluyendo el tipo "relación" (por ejemplo, un "artículo" o un "proyecto" se puede asociar a varios "tags").

Creación de campos

Una vez creada la estructura, es hora de crear algunos datos de prueba. Para ello accedemos al apartado "content" y pulsamos sobre "Add entry". Ahora solo debemos seleccionar el tipo de contenido para el que queremos crear los datos y nos aparecerá un panel similar al de algunos CMS como WordPress, con los campos que hemos definido anteriormente.

Editor de Contentful

Instalando y configurando Gatsby

Enlace a la Documentación oficial

  1. yarn global add gatsby-cli
  2. En el directorio donde desees crear la aplicación: gatsby new myproject

Con esto ya tendríamos creado el "esqueleto" de nuestra aplicación. Podemos abrir el proyecto en nuestro IDE favorito y comenzar a trabajar. Si no nos apetece tener que configurar todo desde cero, hay algunos "starters" que nos añaden características como Google Analytics, Styled Components, TypeScript, etc. No obstante, dado que Gatsby está basado en React, extender nuestra aplicación por nosotros mismos no debería costarnos demasiado.

Dado que ya existe un tutorial en la propia web de Gatsby, no me extenderé explicando sus características. Básicamente:

  • Permite realizar consultas GraphQL para acceder al contenido, ya sea local o remoto. El acceso a este contenido se activa mediante plugins, configurados en el fichero gatsby-config.js.
  • Se pueden crear páginas tanto de forma estática, como dinámica (para ello recurrimos a templates).
  • Todo lo que se almacena en el directoro "static" se copia a "public", sin alterar los ficheros.

A continuación, vincularemos nuestra cuenta de Contentful en nuestro proyecto de Gatsby:

  1. Instalamos el plugin yarn add gatsby-source-contentful
  2. Configuramos el plugin, dentro de la sección "plugins", en "gatsby-config.js":

    {
      resolve: 'gatsby-source-contentful',
      options: {
        spaceId: XXXXXXXX,
        accessToken: XXXXXXXXX,
      },
    },
    ```