The core issue we’ll cover is using environment variables with page queries for pages in the
src\pages folder. This is apparently a common problem (example). I definitely struggled with it before I got it working. We’ll also cover page queries, variables, and the
My blog uses the Gatsby Starter Blog, which loads blog articles from Markdown (MD) files. It lists and loads ALL the blog articles whether you are done writing them or not.
I want a standard publishing workflow: articles will be shown on the web site based on their “status”. …
We’ll be using Chrome, Windows 10, Gatsby 2, gatsby-plugin-emotion, gatsby-use-dark-mode plugin, @emotion/react, @emotion/styled and use-dark-mode React Hook. Let’s get cracking!
I recommend creating a very basic Gatsby project. We are dealing with CSS. If you try adding all of this to an existing site with CSS and styling, you are asking for trouble. Once you get it working with a basic site, you will be better able to add it to an existing site.
Create a Gatsby default starter project. Run
gatsby develop to make sure it runs. You should see:
TLDR: The plugin changed from 2.x to 4.x in four months. Rich Text changed from having one “json” field to a combination of a “raw” string field and “references” array.
If you use Contentful headless CMS with Gatsby, you need the gatsby-source-contentful plugin to gain access to your content. Rendering most of the data types to HTML is straight forward. The Rich Text field is a major exception. Most examples, tutorials, and Gatsby starters refer to an older, simpler version of the plugin.
Dad, Software Engineer, Tech Educator