dtedes.co is a powerful personal website framework built on Next.js 15, designed specifically for effortlessly rendering content from Markdown files. This boilerplate application allows you to create dynamic pages with ease, leveraging the flexibility of Markdown combined with the robust capabilities of React components.

Key Features

• Dynamic Page Rendering: Automatically transform your Markdown files into beautifully styled web pages.
• Component Integration: Enrich your content by seamlessly incorporating React components within your Markdown.
• Intuitive URL Structure: The directory structure of your Markdown files determines the URL paths, simplifying content organization.
• Styled with Tailwind CSS: Global styles are effortlessly managed using Tailwind CSS along with DaisyUI for enhanced styling options.

Usage Examples

Creating Pages

Create a Markdown page by adding a .mdx file in the app/content directory, which will be instantly available as a stylized web page:

# My Page

This is my page.

Routing Made Simple

The naming convention of your Markdown files directly creates user-friendly routes:

• app/content/index.mdx → /
• app/content/a-beautiful-page.mdx → /a-beautiful-page
• app/content/more-content/another-page.mdx → /more-content/another-page

React Component Example

Add custom React components by placing them in the components directory and utilizing them in your .mdx files:

import MyComponent from '../components/my-component'

**Hey**, here's a component:

<MyComponent />

*And here's some more markdown content.*

Project Structure

The application is organized for simplicity, allowing you to focus on creating compelling content without unnecessary complexity:

my-markdown-app/
.
├── README
├── app
│   ├── [...slug]     # Dynamic route for all pages
│   │   └── page.tsx    # Page component
│   ├── content        # **This is the only folder you need to worry about.**
│   │   ├── more-content  # Example of a nested folder
│   │   │   └── another-page.mdx  # Another page, routes to /more-content/another-page
│   │   └── index.mdx  # Home page content
│   ├── globals.css    # Global styles and Tailwind imports
│   ├── layout.tsx     # Root layout with shared styling
│   └── page.mdx       # Home page content (renders index.mdx at root)
├── components       # Add custom React components in this directory
├── mdx-components.tsx # Sets up MDX components
├── next.config.mjs    # Next.js configuration  
├── package.json       # Project dependencies
├── postcss.config.js  # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json      # TypeScript configuration

With dtedes.co, you can build your personal site with a modern framework that is both powerful and easy to use. Enjoy the simplicity of managing your content as Markdown while enjoying the benefits of a fully featured React application!