Installation Guide | MDX Starter

Quick Start

Get up and running with the MDX starter template in minutes.

Prerequisites

Node.js 18+ installed
pnpm package manager (recommended)

Installation Steps

Clone the repository

git clone https://github.com/brijr/mdx.git
cd mdx

Install dependencies

pnpm install

Start the development server

pnpm dev

Open your browser

Navigate to http://localhost:3000 to see your site.

Project Structure

mdx/
├── app/                 # Next.js App Router
│   ├── [...slug]/      # Dynamic catch-all routes
│   └── page.tsx        # Homepage
├── components/         # React components
│   ├── mdx/           # MDX-specific components
│   └── theme/         # Theme components
├── content/           # Your MDX content
│   ├── blog/          # Blog posts
│   └── docs/          # Documentation
└── lib/               # Utility functions

Adding Content

Create new .mdx files anywhere in the content/ directory:

---
title: "My New Post"
description: "This is my first post"
date: "2025-01-09"
published: true
---

# Hello World

This is my content!

The file structure determines the URL:

content/example.mdx → /example
content/blog/post.mdx → /blog/post
content/docs/guide.mdx → /docs/guide

Configuration

Edit velite.config.ts to customize content processing and schema validation.

Deployment

Deploy to Vercel with one click:

# Build for production
pnpm build

# Start production server
pnpm start

Your site is now ready for deployment!