Build technical documentation and a blog in 25 minutes. Perfect for open source projects, SaaS products, and developer tools.

What You'll Build

• Documentation site with sidebar navigation
• Blog with categories and RSS
• MDX support for interactive content
• Search functionality
• Clean, readable design

Step 1: Generate Your Docs Site

Create a documentation website for [Product Name].

Include:
- Docs homepage (/docs) with getting started guide
- Sidebar navigation with collapsible sections
- Documentation pages for:
  - Getting Started (installation, quick start)
  - Core Concepts (key terms and ideas)
  - Guides (step-by-step tutorials)
  - API Reference (if applicable)
  - FAQ

- Blog section (/blog) with:
  - Blog listing page
  - Individual post template
  - Categories: Tutorials, Updates, Tips

Design: Clean, minimal, optimized for reading.
Dark mode toggle.
Code syntax highlighting.

Example:

Create a documentation website for OpenWidget, an open source
embeddable widget library.

Include:
- Docs homepage with quick start code example
- Sidebar navigation with sections:
  - Getting Started
  - Configuration
  - Theming
  - Plugins
  - API Reference

- Blog for tutorials and release notes

Design: Clean, developer-focused, with dark mode.
Code blocks with syntax highlighting.
Copy button on code blocks.

Step 2: Structure Your Docs

Organize documentation for progressive disclosure:

Create this docs structure:

Getting Started (for new users):
- Introduction - What is it?
- Installation - How to install
- Quick Start - First working example

Core Concepts (understanding):
- Key Concepts - Terminology
- Architecture - How it works
- Best Practices - Recommended patterns

Guides (tutorials):
- Common Tasks - How to do X
- Advanced Usage - Complex scenarios
- Troubleshooting - Common issues

Reference (lookup):
- API Reference - All methods/options
- Configuration - All settings
- Changelog - Version history

Step 3: Create Navigation

Build sidebar navigation:

Collapsible sections for each category.
Active state highlighting for current page.
Table of contents for the current page (right sidebar).
Previous/Next navigation at bottom.
"Edit this page" link to GitHub (optional).

Step 4: Set Up Blog

Create blog structure:

Listing page (/blog):
- Grid of post cards with:
  - Featured image
  - Title
  - Date and read time
  - Category tag
  - Excerpt
- Category filter
- Pagination

Post template:
- Featured image
- Title, date, author
- Category and tags
- Content area with MDX support
- Table of contents
- Related posts
- Share buttons
- Newsletter signup

Step 5: Add MDX Components

Make docs interactive with custom components:

Add these MDX components:

<Callout type="info/warning/tip">
For important notes and warnings

<CodeGroup>
Tab between code examples for different languages

<Steps>
Numbered step-by-step instructions

<Card>
Linked cards for related content

<Tabs>
Tab between different content versions

Example usage:

<Callout type="warning">
This method is deprecated in v2.0. Use newMethod() instead.
</Callout>

<CodeGroup>
```js tab="JavaScript"
import { widget } from 'openwidget';
widget.init();

from openwidget import Widget
widget = Widget()

</CodeGroup>

## Step 6: Add Search

Add search functionality:

Search bar in header. Keyboard shortcut (Cmd+K). Search results with:

• Page title
• Section heading
• Content preview
• Category/type indicator

Index all docs and blog content.

## Step 7: Optimize for Readability

Typography and layout for reading:

• Line length: 65-75 characters
• Font size: 16-18px for body
• Line height: 1.6-1.8
• Generous whitespace between sections
• Clear heading hierarchy (h1, h2, h3)
• Syntax highlighting for code
• Copy button on code blocks

## Step 8: Set Up SEO

SEO for docs and blog:

Docs: Title: "[Topic] | [Product] Docs" Description: Specific to the page content

Blog: Title: "[Post Title] | [Product] Blog" Description: Post excerpt OG Image: Auto-generate with post title

Site-wide:

• sitemap.xml including all docs and posts
• robots.txt allowing full crawling
• RSS feed for blog (/blog/rss.xml)

## Step 9: Write Your First Content

### First Doc Page

Write the Getting Started doc:

Getting Started

Brief intro paragraph.

Installation

npm install yourpackage

Quick Start

Minimal working example with code.

Next Steps

Links to:

• Core Concepts
• First tutorial
• API Reference

### First Blog Post

Write a launch announcement:

Introducing [Product] 2.0

What's new and why it matters.

New Features

Feature 1

Description and example.

Feature 2

Description and example.

Migration Guide

How to upgrade from v1.

What's Next

Roadmap preview.

## Step 10: Publish

1. **Publish** your docs site
2. **Add custom domain** (docs.yourproduct.com)
3. **Submit** sitemap to Google Search Console
4. **Link** from your main product site
5. **Share** launch announcement

## Docs Site Templates

### Open Source Project

Focus: Quick start, contribution guide, API reference Key sections: Getting Started, API, Contributing, Changelog Special: GitHub links, license info, sponsor section

### SaaS Product Docs

Focus: User guides, feature explanations, troubleshooting Key sections: Setup, Features, Integrations, FAQ Special: Video tutorials, support links, upgrade prompts

### Developer Tool

Focus: Technical depth, code examples, best practices Key sections: Concepts, Guides, Reference, Examples Special: Interactive code playground, multiple language tabs

## Content Tips

### Write for Skimming

- Clear headings
- Short paragraphs
- Bulleted lists
- Code examples first

### Show, Don't Just Tell

- Working code examples
- Screenshots where helpful
- Before/after comparisons

### Keep It Updated

- Version your docs
- Note deprecations
- Link changelog from relevant pages

## Next Steps

- [Article Editor](/docs/features/article-editor) — Editing MDX content
- [SEO Best Practices](/docs/tips/seo) — Rank your docs
- [Content Sites for SEO](/docs/use-cases/content-seo) — Content strategy