Markdown Site Starter 🚀

A generalized, production-ready starter kit for building documentation sites from Markdown. Features automatic diagram rendering, beautiful dark mode UI, and zero configuration.

✨ Features

• 📝 Write in Markdown: Just drop .mdx files in the content/ folder.
• 📊 Auto-Diagrams: Use standard Mermaid syntax in code blocks - they render automatically!
• 🎨 Premium UI: Built-in dark mode, glassmorphism, and responsive design.
• ⚡️ Fast: Built on Next.js 14 App Router with static generation.
• 🤖 AI-Ready: Perfect for rendering output from ChatGPT, Claude, or Gemini.

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/mhmdez/markdown-site-starter.git
   cd markdown-site-starter

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

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

📖 How to Add Content

1. Create a new file in content/ (e.g., content/my-project.mdx).

2. Add your markdown content.

3. To add a diagram, just use a code block with mermaid:

   ```mermaid graph TD A[Start] --> B[End] ```

4. Save and view at http://localhost:3000/my-project.

🛠️ Customization

• Styling: Edit app/globals.css to change colors and fonts.
• Layout: Modify app/layout.tsx or app/[slug]/page.tsx to change the page structure.
• Components: Customize markdown element rendering in mdx-components.tsx.

📦 Deployment

The easiest way to deploy is to use Vercel.

1. Push your code to GitHub.
2. Import the project into Vercel.
3. Deploy!

📄 License

MIT