Blog template

Developer Blog

Modern Next.js + Fumadocs MDX blog with dark mode, tags, featured posts, and clean typography.

Next.js 15TypeScriptTailwind CSSFumadocs MDXshadcn/ui

Clone it

terminalClone the template

git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./developer-blog
cd developer-blog
pnpm install
pnpm dev

What's in the box

MDX-powered posts with full component support
Dark / light theme toggle
Tags + categories
Featured posts surface on the homepage
Mobile responsive
Built-in syntax highlighting
SEO metadata per post

When to use

Use it

You want to publish technical posts, tutorials, or insights — and you want a clean reading experience without setting up a CMS or fighting with Wordpress.

Skip it

You need user accounts, comments, paid subscriptions, or multi-author workflows — use Substack, Ghost, or a real CMS.

The 7 customization sections

When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.

01 · Branding3 q
Site name, tagline, favicon, social card.
- →What's the blog's name and one-line tagline?
- →What's your brand color? (hex — used for accents, not the body)
- →Do you have a favicon and OG image, or should I generate placeholders?
02 · Navigation2 q
Top nav links and footer.
- →What top nav links do you want? (e.g. Home, Blog, Tags, About, Contact)
- →What footer links do you want? (e.g. Twitter, GitHub, RSS, About)
03 · Homepage3 q
Lead intro + featured posts grid + recent posts list.
- →Write a 1–3 sentence intro for the homepage (about you / about the blog).
- →How many featured posts should appear at the top? (typically 1–3)
- →How many recent posts in the list below? (typically 6–10)
04 · Post template3 q
Frontmatter fields, layout, share/related-posts widgets.
- →What fields should the post frontmatter support? (defaults: title, description, date, tags, cover, featured)
- →Do you want a share-to-Twitter button on each post?
- →Do you want a 'related posts' section at the bottom (by shared tags)?
05 · Tags page1 q
/tags index + /tags/[slug] pages listing posts by tag.
- →Should we generate static /tags/[slug] pages for each tag, or keep it as filter-only on the main /blog page?
06 · Seed content1 q
Initial blog posts to ship with the template.
- →Do you have 1–3 starter posts you want to seed into the blog, or should it ship empty with a sample 'Hello world' post?
07 · Deployment2 q
Where you'll host the blog.
- →Will you deploy to Vercel? (recommended — works out of the box)
- →Do you have a custom domain to point at it?

Customization prompt — paste into your AI agent

After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:

paste into your AI agentCustomization interview prompt

I want to customize the "Developer Blog" template using the VibeKit customization guide.

Walk me through the 7 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.

After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.

CUSTOMIZATION GUIDE:
Walk the user through Branding → Navigation → Homepage → Post template → Tags → Seed content → Deployment. After answers, edit `app/layout.tsx` for branding, `components/navbar.tsx` for nav, `app/page.tsx` for homepage layout, `source.config.ts` for frontmatter schema, and seed the `blog/content/` folder with their starter posts. Don't restructure the project.

SECTIONS:
1. Branding — Site name, tagline, favicon, social card.
   Questions: 
     - What's the blog's name and one-line tagline?
     - What's your brand color? (hex — used for accents, not the body)
     - Do you have a favicon and OG image, or should I generate placeholders?

2. Navigation — Top nav links and footer.
   Questions: 
     - What top nav links do you want? (e.g. Home, Blog, Tags, About, Contact)
     - What footer links do you want? (e.g. Twitter, GitHub, RSS, About)

3. Homepage — Lead intro + featured posts grid + recent posts list.
   Questions: 
     - Write a 1–3 sentence intro for the homepage (about you / about the blog).
     - How many featured posts should appear at the top? (typically 1–3)
     - How many recent posts in the list below? (typically 6–10)

4. Post template — Frontmatter fields, layout, share/related-posts widgets.
   Questions: 
     - What fields should the post frontmatter support? (defaults: title, description, date, tags, cover, featured)
     - Do you want a share-to-Twitter button on each post?
     - Do you want a 'related posts' section at the bottom (by shared tags)?

5. Tags page — /tags index + /tags/[slug] pages listing posts by tag.
   Questions: 
     - Should we generate static /tags/[slug] pages for each tag, or keep it as filter-only on the main /blog page?

6. Seed content — Initial blog posts to ship with the template.
   Questions: 
     - Do you have 1–3 starter posts you want to seed into the blog, or should it ship empty with a sample 'Hello world' post?

7. Deployment — Where you'll host the blog.
   Questions: 
     - Will you deploy to Vercel? (recommended — works out of the box)
     - Do you have a custom domain to point at it?

Begin with section 1 now.