Blog

Blog Overview

StarterKitPro includes a blog powered by Fumadocs, allowing you to easily create and manage content using MDX.

Key Features:

• MDX Support: Write blog posts using Markdown with embedded React components.
• Shadcn UI & Tailwind CSS: Styled with modern and customizable components.
• React Server Components: Optimized for performance with minimal client-side JavaScript.
• Optimized Images: Handles image optimization automatically.
• SEO: SEO optimized works handle the metadata and markup schema for google rich results.

Writing Blog Posts

1. Location: Create your blog post files within the app/(marketing)/blog/_content/ directory.
2. Format: Write your posts in .mdx format. You can import and use custom React components directly within your content.
3. Metadata: Add frontmatter (like title, description, date, author) at the top of your MDX file.

---
title: My First Blog Post
description: This is my first blog post using Fumadocs.
date: 2025-04-11
authorName: Hasan Afzal
authorImage: /public/blog/avatars/hasan-avatar.png
featuredImage: /public/blog/first-blog/featured-image.png
tags: [products, tech]
---
 
Welcome to my blog! This is the content of my very first blog post created with Fumadocs.
 
### test
 
You can use Markdown and JSX within your blog posts just like in your documentation.
 
**Example Code Block:**
 
```javascript
console.log("Hello from my blog post!");
```

Customizing the Blog

1. Content Location & Schema

The configuration for Fumadocs is managed in source.config.ts.

• Changing Content Directory: To store blog posts in a different folder, update the dir property within the source.config.ts.

• Modifying Post Schema: To add, remove, or change fields available in your post frontmatter (like adding tags), modify the schema object within source.config.ts.

2. Storing Static Assets (Images)

Place images and other static files in the public/blog/ directory. Reference them in MDX using a path like /blog/your-image.png.

3. Customizing Blog Pages UI

Comes with the great UI. Still want to customize:

• Edit the Blog List Page: app/(marketing)/blog/page.tsx
• Edit the Blog Post Page: app/(marketing)/blog/[slug]/page.tsx

Modify these components using Tailwind CSS and Shadcn UI.

Removing the Blog Completely

If you decide to remove the blog, follow these steps:

1. Uninstall Packages: Remove Fumadocs related dependencies from your package.json:

   npm uninstall fumadocs-core fumadocs-mdx fumadocs-ui

2. Delete Files and Directories: Remove the following files and folders from your project:

   • source.config.ts (Root configuration file)

   • .source (Generated content cache directory)

   • lib/source.ts (Helper file for Fumadocs)

   • app/(marketing)/blog/ (Directory containing blog pages and content)

   • public/blog/ (Directory for blog static assets)

   • next.config.ts (Open this file and remove these lines)

   • app/sitemap.ts remove the blog pages from this file

     import { createMDX } from "fumadocs-mdx/next"; // remove this
     const withMDX = createMDX(); // remove this
      
     export default withMDX(nextConfig); // update this with
     export default nextConfig;

3. Clean Up Imports: Search your codebase for any remaining imports from the deleted files or packages and remove them.

After these steps, the blog feature will be completely removed from StarterKitPro.