Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Learn more about #100DaysOfGatsby here!
Challenge 11:Make Your Site Content Editor Friendly by Connecting a CMS
This is the most important week of the #100DaysOfGatsby series! Up until now you’ve created a website with Markdown files, and you’ve had Gatsby programmatically create pages using those files, which is pretty cool. But Gatsby can do so much more…
What makes Gatsby unique and immensely useful for your most demanding client projects is the framework’s ability to source content from anywhere, and make it available through a flexible data layer.
As Kyle Mathews wrote:
“A little-understood reason for Gatsby’s popularity: Gatsby’s data layer has the highly novel feature of enabling people to build and share data processing primitives that automatically work together and are exposed and controlled through a consistent GraphQL API. In most other frameworks, you’d need to build much of this yourself in a one-off, brittle fashion. Gatsby’s data layer enables simple snapping together of data sourcing and transformation primitives enabling the content mesh.”
The website you’re on right now is a combination of content from Airtable, Markdown, and raw JSX. Gatsbyjs.org also has a swag store that sources content from Shopify, and the Gatsby Cloud website gets data from Contentful and a PostgreSQL database. The days of shoehorning multiple content types into a monolithic CMS are over. Now you can choose the best tool for the job, and stack (or switch) CMS’s easily.
Today we challenge you to add an external data source (or two) to your Gatsby project!
Challenge Resources
- “What is a headless CMS?” is a solid place to get started. It also lists specific CMS’s that have Gatsby “source” plugins you can install..
- If you’re not sure which CMS to choose, many Gatsby users have had success with Contentful, Cosmic, and DatoCMS. If you want to use an open source and free CMS, try WordPress, Ghost, Netlify CMS, and Drupal.
- If you’d like to learn from fully baked examples, auto-provision a site from Gatsby Cloud. Examine and experiment with the gatsby-node.js API file and any additional plugins the CMS developers decided to add. Use the patterns you discover in your own project.
What to Do If You Need Help
If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.