Intermediate, Code Flavored

Learn while implementing a Markdown Publishing Workflow

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 createPage action.

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”. …


Beginner Friendly

A deep dive into making Dark Mode work with Gatsby and Emotion, without annoying flashes.

Gatsby JS and Emotion CSS

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!

Step 1. Install Gatsby Default Starter

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:


Beginner Friendly But With TLDRs!

Overview

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.

The gatsby-source-contentful package was stable for nearly 3 years at version 2.x. However, people building large Gatsby…

Ed Pike

Dad, Software Engineer, Tech Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store