Contentful Blog

Using Contentful Headless-CMS, you can write content without committing any files or using a text editor.

✅ 1: Setup Contentful space

Start by creating an empty space in Contentful

• 1.1. Get an account: Community 🆓
• 1.2. Create a space: Create an empty space

✅ 2.1: Import Contentful

To import data into Contentful Blog spaces, use the predefined contentful-export.json file.

yarn add contentful-blog
# npm i contentful-blog

# npx contentful-blog --space-id=CONTENTFUL_SPACE_ID --content-management-apikey=CONTENTFUL_CONTENT_MANAGEMENT_APIKEY

npx -c 'contentful-blog --space-id=CONTENTFUL_SPACE_ID --content-management-apikey=CONTENTFUL_CONTENT_MANAGEMENT_APIKEY && say "Hooray, Contentful-Blog Data Imported successfully!"'

✍️ Replace ~~CONTENTFUL_SPACE_ID~~ with your Space ID and ~~CONTENTFUL_CONTENT_MANAGEMENT_APIKEY~~ with your content management token: Settings >> API keys >> Content management tokens.

☑️ 2.2: Export Contentful

To export your Contentful space into a JSON file, contentful-export.json.

node ./export.js --space-id=CONTENTFUL_SPACE_ID --content-management-apikey=YOUR-MANAGEMENT-TOKEN

✍️ Replace ~~CONTENTFUL_SPACE_ID~~ with your Space ID and ~~CONTENTFUL_CONTENT_MANAGEMENT_APIKEY~~ with your content management token: Settings >> API keys >> Content management tokens.

3. Contentful and Gatsby

Using Gatsby with a headless CMS like Contentful optimizes performance, speeds up build times, and improves the developer experience.

• Step 1: Install the required packages.

  On your Gatsby site, install the Gatsby plugin and the necessary packages after importing the Contentful CMS schema.

  cd site
  # cd education
  yarn add [email protected] dotenv

• Step 2: Enter access credentials

  Create a site/.env file and paste your Contentful Space ID and and ~~CONTENTFUL_CONTENT_DELIVERY_APIKEY~~ with your content management token: Settings >> API keys >> Content delivery / preview tokens.

  CONTENTFUL_SPACE_ID= (Your Contentful Space ID)
  CONTENTFUL_ACCESS_TOKEN= (Your Content Delivery API - access token)

• Step 3: Register Contentful plugin

  site/gatsby-config.js

  require('dotenv').config()
  
  module.exports = {
    plugins: [
      {
        resolve: 'gatsby-source-contentful',
        options: {
          spaceId: process.env.CONTENTFUL_SPACE_ID,
          accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
        }
      },
      {
        // ATTENTION: Match the theme name with the theme you're using
        resolve: 'gatsby-theme-blog-education',
        options: {
          sources: {
            contentful: true,
            local: false
          }
        }
      }
    ]
  }

  • Every time you modify gatsby-config.js file, you need to clean the cache:

  yarn clean

  • You can now start gatsby dev server to see your content from Contentful.

  yarn develop

• (Optional) Automate Re-Building

  Using webhooks, you can automatically rebuild your Contentful site when content is modified in your account when you plan to deploy it to Netlify or Vercel. Please refer to:

  • [x] AWS Amplify Webhook
    • [x] Use the Amplify Console with incoming webhooks to trigger deployments
  • [ ] Netlify Webhook
    • [ ] Netlify 🆓
  • [ ] Vercel Deploy hook