¡Mi propio espacio en Internet y cómo está vivo!
Un poco de contexto
He sido desarrollador durante un par de años y en todos esos años no he tenido un espacio bueno y decente en Internet. Primero, era la universidad y la excusa interminable de no tener suficiente tiempo (mitad verdadero, mitad mentira). Luego fue el trabajo, plazos ajustados, cosas nuevas que aprender y no mucho tiempo para hacerlo (discutible). Y al final, fue el miedo a abandonar mi zona de confort, no tener suficiente contenido o no tener ningún contenido.
Porqué ahora
La idea de mi sitio personal estuvo tranquilamente en mi mente durante algún tiempo. Luego, el brote de COVID-19 nos tomó por sorpresa, y de repente todos estaban en estado de shock, incluyéndome a mí. Una de las formas en que enfrento el estrés y la ansiedad es siendo creativo y productivo, así que a principios de este año decidí que este era el momento perfecto para comenzar a trabajar en mi propio espacio.
Lo que quería
Tenía un grupo de requisitos específicos para mi página:
Necesita ser rápido
Debe estar alojado como un sitio estático en un CDN
Necesita tener una administración de contenido fácil
Necesita soportar múltiples locales
Imagino esto como un espacio donde la gente podría aprender un poco sobre mí, y también como un lugar donde puedo poner pensamientos, opiniones y realmente cualquier cosa que quiera compartir con el mundo. Por lo tanto, lo construyo con una estructura muy básica, una página de inicio pegadiza, una página sobre mí, una página sobre mis projectos open source y un blog.
Lo que terminé usando
Teniendo en cuenta lo que quería lograr, ya tenía dos cosas preseleccionadas. Elegí Netlify para alojar el sitio, manejar builds, dominios y más cosas. También utilicé Gatsby.js, un generador de sitios estáticos que usa React, para crear la interfaz de usuario y generar estáticamente todas las páginas. Lo único que faltaba y probablemente lo más importante para mí era algo que haría que la administración de contenido de múltiples locales fuera una tarea fácil. He escuchado cosas geniales sobre Contentful, pero no habia tenido la oportunidad de probarlo, y esta era la oportunidad perfecta.
Descubriendo Contentful
Sabía que Contentful era un nuevo headless CMS que era increíblemente rápido, fácil de usar, separado de la capa presentacional y, lo más importante, era un servicio. Además de eso, no sabía mucho sobre sus características, desafios y estrategias de modelado de contenido. Descubrí que Contentful tiene una plataforma de aprendizaje gratuita, con un montón de cursos diferentes para autores de contenido, modeladores de contenido y desarrolladores. En esta plataforma, puedes aprender desde lo más básico hasta temas complejos, como ejecutar migraciones de datos directamente en pipelines de CI/CD.
Comencé con un par de cursos básicos de autoría y modelado. Lo primero que aprendí fue que el modelado de contenido es uno de los pasos más importantes para cualquier proyecto de Contentful. Si lo haces mal, administrar el contenido podría convertirse en una tarea muy difícil. Hay que tomarse tiempo para revisarlo e iterar tanto como se necesite. Este es el centro de tu contenido, por lo que debe ser mucho más que aceptable.
Pronto profundizaré cómo funciona Contentful, pero por este vez intentemos poner esto lo más simple posible. Hay un gran contenedor de datos llamado Espace, tienen Content Types que son nuestros bloques de datos personalizados, y están compuestos por Fields como Text, Media, Dates, Locations, Booleans, JSON, Rich Text, References a otros Content Types.
Para poner esto en perspectiva, se ve así:
Hacer referencia a otros Content Types es algo muy flexible que me permitió no solo reutilizar y compartir contenido, sino también crear tipos de contenido complejos.
Cuando piensas en cómo funciona un CMS, generalmente hay un montón de contenido creado y administrado bajo la premisa que se usaría en una página determinada con un diseño determinado. Dado que Contentful no es su CMS habitual, el contenido se trata como datos que se servirían a través de una API en un cliente determinado. La flexibilidad más todos los features que esperaría de una Infraestructura de Contenido como localización, roles-permisos y versionamiento no solo hace que sea muy fácil de implementar, sino que también sea una de las mejores opciones para lo que quiero conseguir.
Revisitando Gatsby.js
En estos días, si puedes hacerlo estático, definitivamente deberías hacerlo. Sabía que quería que mi página fuera lo más rápida y simple posible. Soy un gran fanático de React, así que para mí, Gatsby.js fue la única forma de hacerlo. Lo he usado en el pasado, pero nunca lo he usado para autogenerar sitios estáticos desde un servicio externo como Contentful. Pensé que sería demasiado trabajo, pero estoy feliz de decir que no pude estar más equivocado.
Comencemos con lo básico, el concepto detrás de Gatsby.js es bastante simple, puede obtener datos desde cualquier lugar y usarlos para crear páginas estáticas basadas en React Components. Eso suena bien, pero ni siquiera es la mejor parte. Utiliza GraphQL, por lo que todos los datos externos se pueden consultar directamente desde un esquema autogenerado. Esto significa que no debemos preocuparnos por administrar el networking de nuestro contenido.
Gatsby.js tiene un gran inventario de plugins y uno de ellos es gatsby-source-contentful. Este es un plugin oficial que se puede utilizar para obtener contenido de cualquier space sin mucho esfuerzo. Solo se tiene proporcionar dos opciones, el SPACE_ID y ACCESS_TOKEN , y el plugin buscará y cargará automáticamente todo su contenido en el esquema GraphQL.
Funciona así:
Cómo funciona todo junto
Como pueden ver, Contentful y Gatsby.js funcionan bastante bien uno al lado del otro. Pero déjenme explicar cómo todo se une en mi página.
Generación de páginas
Por lo general, lo que haría para un sitio como este es crear páginas basadas en su contenido y eso sería todo, pero quería tener soporte de i18n y queria hacerlo de una manera diferente. Se Puede usar uno de los plugins de i18n disponibles para Gatsby. Esos no son tan flexibles y generalmente funcionan al tener una plantilla por locale. Sin embargo, quería tener solo un archivo por plantilla y crear las páginas basadas en las diferentes locales del contenido.
El plugin gatsby-source-contentful permite consultar contenido por locale fácilmente, pero algo extraño es que este plugin no expone la lista de los locales disponibles en el space. Lo cual para algunas cosas generales como la navegación, redireccionamientos o incluso el cambio de locale sería útil. La forma obvia de hacerlo sería utilizar el SDK de Contentful o hacer una llamada directa al endpoint de locales, pero sabía que este era un problema que tenían otros desarrolladores, así que decidí construir un nuevo plugin de Gatsby para obtener estos datos, se llama gatsby-source-contentful-locales.
Con la lista de locales en mi esquema GraphQL, fue realmente fácil crear todas las páginas. Como estoy usando un enfoque subdirectorio para la internacionalización en las URL (dominio / locale / ruta), quería crear una página de redireccionamiento para cada una que se creó. Aquí es donde la lista de locales fue muy útil. Estoy comprobando en el lado del cliente el locale del usuario y lo estoy redirigiendo a esa locale. Si no es compatible, estoy usando locale por defecto del espacio.
Para poner esto en perspectiva, la página del blog funciona así:
Build automáticos en cambios de contenido
No quería lidiar con builds manuales, incluso si solo se necesite hacer clic en un botón. Quiero que todo sea lo más automatizado posible. Utilicé Netlify Build Hooks para activar un nuevo build cada vez que el contenido cambia en mi espacio. Esto no solo elimina el paso adicional luego de publicar contenido, sino que también me da la tranquilidad de que si algo sale mal con el build, esos nuevos archivos estáticos no se enviarán a mi página de producción. Y tendré tiempo para descubrir por qué el build está roto.
Vistas previas de contenido con Gatsby Cloud
Utilicé un servicio relativamente nuevo llamado Gatsby Cloud (hecha por el propio Gatsby) que tiene un par de features interesantes. Decidi usar sus live previews. La integración fue relativamente fácil porque existe una aplicación dentro del Contentful Marketplace lista para usar. En unos minutos y sin mucho esfuerzo, tenia una configuración del servicio de live-preview en mi espacio de Contentful.
Concluyendo
Cuando comencé a trabajar en este proyecto, no tenía idea de cuántas cosas aprendería al final. Estaba buscando una manera fácil de publicar contenido, pero de una manera muy orientada al desarrollador. Estoy muy contento con los resultados y estoy muy emocionado de usar esta arquitectura para futuros proyectos.
Para mí, Gatby.js y Contentful son una gran combinación si quieres tener control completo sobre tu sitio sin el ajetreo de administrar el contenido de una manera extraña. Es muy conveniente porque puede usar todas las últimas tecnologías de Front End, la generación de tipos con TypeScript (esté atento a eso) y un ecosistema robusto como React como plataforma.
Recomiendo probarlo. Hay un tutorial de 5 minutos que te ayudara a configurar un proyecto Gatsby y un espacio de Contentful. Además, si te encuentras con un problema, no te preocupe, Gatsby.js tiene una comunidad enorme que crece constantemente, por lo que hay muchas personas dispuestas a ayudar.
Espero que hayas disfrutado esta publicación, y quiero hacerte saber que espero escribir y publicar al menos una vez por semana.
Se trata de salir de tu zona de confort ✌️