Company
Date Published
Author
Tim Beyer, Stephan Schneider
Word count
1498
Language
English
Hacker News points
None

Summary

GatsbyJS is a popular framework that allows developers to create hybrid sites using React, which are rendered statically but become interactive once loaded client-side. Gatsby offers a full-fledged static content authoring experience that connects projects to many APIs and data sources, including Contentful's content infrastructure. With Contentful being a first-class citizen in the Gatsby world, content is easily edited in a nice UI and with Netlify, setting deployments up takes less than a minute. The authors aim to solve the contradiction between static sites and dynamic content by using Contentful's delivery and management APIs, GraphQL, and React components. They set up a static site that automatically deploys to Netlify, uses Gatsby's source plugin for Contentful, and hooks into the build process to add additional data about the content model on top of the fetched data. The authors create a wrapper component that enables on-page editing by wrapping any other React components with a 'ContentfulEditor' component, which renders an interface to edit the content and syncs changes back to Contentful via the API. This allows developers to easily mark parts of the static site as loaded from a specific Contentful entity and show an 'Edit' link on the generated site, making it possible to update the content right on the website without requiring any additional setup.