Publishing with Contentful, Gatsby Novela, and Medium
There are endless content platform solutions out there for bloggers and developers alike to generate, manage, and present content for their readers. Contentful in particular provides a well-documented Content Delivery API which allows Gatsby.js sites to easily publish your content managed in Contentful! I’ll show you how to do this and even cross-post to Medium!
Contentful
For many bloggers and devs, Contentful may be more than you need. However, what I’ve found even as a newcomer to the world of content creation is that it provides enough features and scalability to make the free tier absolutely worth it.
If you haven’t already, head on over to https://www.contentful.com/sign-up/ and get yourself a free tier account.
Once you’re signed up and logged in Contentful will let you generate an Example Space. This space already has content models populated, which lets you create content right away! These are great examples and feel free to play around with how the platform lets you create content based on your content models.
Once you’re done creating, and playing, we’re going to delete the example space. Contentful only allows one space in their free tier. And since we want to import our own content model specific to our personal Gatsby.js blog we’ll have to delete the example.
In your Contentful Space home Select Settings to bring up a dropdown. Choose General settings under Space settings.
From here scroll down to the Danger zone, and select Delete space and all its contents. Follow the prompts to delete your example space.
Contentful should provide you the option to generate a new space now, or it’s available in the top left menu.
Gatsby
Assuming you’ve already read Launching your personal blog with Gatsby and Novela, then you should already have a local Gatsby starter blog setup. However, the steps below can be tailored to work with any Gatsby starter that supports Contentful.
Configure gatsby-source-contentful plugin
Install plugin
npm install gatsby-source-contentful
Add Contentful Space ID and API Key to dotenv
Create and/or edit the file: .env Add the following lines:
You can find your Space ID and Content Delivery API — access token in your Contentful Space Home at Settings -> API Keys
Modify gatsby-config.js
Add dotenv require to top of the file. Above module.exports const dotenv = require("dotenv").config()
Add plugin config to plugins object:
Set Novela Content Path by setting options: { sources: { contentful:true }}
Import Novela’s content model to Contentful
Install Contentful CLI
npm install -g contentful-cli
Authenticate with your Contentful Space
contentful login
Import Novela’s content model
contentful space import --spaice-id YourSpaceIdHere --content-file ./node_modules/@narative/gatsby-theme-novela/contentful/contentful-export.json
You should be able to edit your content in contentful now! Note: It may take a few minutes for the content model to propagate to the content page in Contentful. But once it has, you can create new content right on Contentful.
Run with Gatsby
Now that you’ve configured everything in gatsby-config.js your gatsby build will automatically pull in the Contentful content.
gatsby develop
And you’ll see your new post from Contentful!
Tips
If you make updates to existing Contentful content but have already pulled that content with gatsby develop then you will want to run gatsby clean to delete the cache. This will force a pull from the Contentful API
Novela has some default articles and authors in the local space. Everything in your local space is automatically pulled even if you have sources local set to false and source contentful set true.
Medium
Publishing to Medium is easy if you’ve deployed to a public site host. In your medium account click on your profile picture, and select Stories In Your Stories Click the Import a story button and paste in your post's public URL.
Originally published at https://publark.com on December 2, 2020.