Navigate back to the homepage

Publishing with Contentful, Gatsby Novela, and Medium

John
December 2nd, 2020 · 2 min read

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 drop down. 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 Host your own blog with Gatsby, Novela, and GitHub Pages, 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 file: .env Add the following lines:

1CONTENTFUL_SPACE_ID= YourSpaceIdHere
2CONTENTFUL_ACCESS_TOKEN= YourAccessTokenHere

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 file. Above module.exports const dotenv = require("dotenv").config()

Add plugin config to plugins object:

1{
2 resolve: 'gatsby-source-contentful',
3 options: {
4 spaceId: process.env.CONTENTFUL_SPACE_ID,
5 accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
6 },
7},

Set Novela Content Path by setting options: { sources: { contentful:true }}

1resolve: "@narative/gatsby-theme-novela",
2 options: {
3 contentPosts: "content/posts",
4 contentAuthors: "content/authors",
5 basePath: "/",
6 authorsPage: true,
7 sources: {
8 //local: true,
9 contentful: true,
10 },
11 }

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 contentmodel to propogate 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 posts public URL.

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Publark

Host your own free blog with Gatsby, Novela Theme, and Github Pages

How to launch your own gorgeous blog for free with Gatsby, Novela Theme, and Github Pages!

December 2nd, 2020 · 1 min read
© 2019 Publark
Link to $https://github.com/johnfischer14Link to $https://www.instagram.com/johndavidfischer/Link to $https://www.linkedin.com/in/john-f-59742356/Link to $https://open.spotify.com/user/1294781914?si=bm4ZKALeTR2Sr8nbq0bdJA