If you're managing blog content in a Next.js site using local MDX files and a headless CMS like GraphCMS, you can take things a step further by sourcing posts directly from a private GitHub repo.

In this post, I’ll show you how to fetch .mdx files from a private GitHub repository using the GitHub API and merge them with your existing content sources.

🧠 Why Add GitHub?

• Store posts in GitHub for remote editing or collaboration
• Use GitHub as a "lightweight CMS"
• Centralize content even if your site is deployed elsewhere (like Vercel)

🔐 Step 1: Create a GitHub Token

To access private repo content, you’ll need a Personal Access Token:

1. Go to GitHub > Settings > Developer Settings > Tokens
2. Click “Generate new token (classic)”
3. Check the repo scope
4. Copy the token and store it in your .env.local:

🔗 Step 2: Fetch GitHub Content in Next.js

Install dependencies:

Then, create a helper like lib/githubPosts.js:

🧩 Step 3: Merge GitHub Posts with Local and GraphCMS

In your post loader (e.g. getSortedPostsData()), combine all sources:

Then merge:

📄 Step 4: Render the Post

For each post, determine the source and fetch accordingly:

✅ That’s It!

Now your blog can source content from:

• Local MDX files (e.g. /posts)
• GraphCMS (via GraphQL)
• A private GitHub repo

It’s flexible, scalable, and keeps your content portable.

Got questions or want a starter template? Hit me up!