Integrate with Contentful?

[reeceatkinson]

Is it possible to integrate contentful for blog.

[Advait251206]

Yes — you can integrate Contentful with Docusaurus for a blog, but it is not built-in. You need to pull Contentful data at build time and convert it into Markdown/MDX or use a custom content plugin.

---

✅ Recommended approach (static build integration)

Docusaurus works best with static content, so the cleanest setup is:

Contentful → Build step → Markdown/MDX → Docusaurus blog/docs

---

1. Install Contentful SDK

npm install contentful

---

2. Create a Contentful fetch script

Example:

// scripts/fetchContentfulBlog.js

const fs = require('fs');
const path = require('path');
const contentful = require('contentful');

const client = contentful.createClient({
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
});

async function run() {
  const entries = await client.getEntries({
    content_type: 'blogPost',
  });

  const outputDir = path.join(process.cwd(), 'blog');

  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  entries.items.forEach((item) => {
    const { title, slug, body, date } = item.fields;

    const fileContent = `---
title: "${title}"
slug: "${slug}"
date: "${date}"
---

${body}
`;

    fs.writeFileSync(
      path.join(outputDir, `${slug}.md`),
      fileContent
    );
  });

  console.log('Contentful blog synced');
}

run();

---

3. Add script to package.json

{
  "scripts": {
    "fetch:blog": "node scripts/fetchContentfulBlog.js",
    "build": "npm run fetch:blog && docusaurus build"
  }
}

---

4. Use Docusaurus blog normally

In docusaurus.config.js:

blog: {
  showReadingTime: true,
}

Docusaurus will automatically pick up generated Markdown files in /blog.

---

⚡ Alternative approach (advanced): custom plugin

Instead of generating files, you can:

• fetch Contentful inside a plugin
• inject content via contentLoaded()

Example structure:

module.exports = function contentfulPlugin() {
  return {
    name: 'contentful-blog',

    async loadContent() {
      const client = createClient(...);
      return client.getEntries();
    },

    async contentLoaded({ content, actions }) {
      const { createData, addRoute } = actions;

      addRoute({
        path: '/blog',
        component: '@theme/BlogListPage',
        modules: {
          posts: content.items,
        },
      });
    },
  };
};

---

⚠️ Important limitations

• Docusaurus blog system is file-based by default
• Contentful is API-based CMS
• So you must bridge them at build time

---

🧠 Best practice recommendation

Approach	Use case
Generate Markdown files	✅ easiest + most stable
Custom plugin	advanced dynamic control
Runtime fetching	❌ not recommended (breaks SSR/static build)

---

🚀 Summary

Yes, Contentful integration is possible, but:

✔ You must convert CMS data into Markdown/MDX at build time
✔ OR use a custom Docusaurus plugin to inject content

Docusaurus does not directly support CMS-driven blogs without a build step.

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206