A personal blog built with Next.js, deployed on Vercel.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4
- Content: MDX via next-mdx-remote
- Deployment: Vercel
app/
├── blog/
│ ├── posts/ # MDX blog post files
│ ├── [slug]/page.tsx # Dynamic post page
│ ├── page.tsx # Blog listing
│ └── utils.ts # Blog utilities (parsing, formatting)
├── about/
│ └── page.tsx # About page
├── components/
│ ├── nav.tsx # Navigation bar
│ ├── mdx.tsx # Custom MDX components
│ ├── posts.tsx # Blog posts list
│ └── footer.tsx # Footer
├── og/route.tsx # Dynamic OG image generation
├── rss/route.ts # RSS feed endpoint
├── layout.tsx # Root layout
├── page.tsx # Home page
├── sitemap.ts # XML sitemap
└── global.css # Global styles
Blog posts are written in MDX format and stored in app/blog/posts/. Each post requires YAML frontmatter:
---
title: "Post Title"
publishedAt: "2025-01-01"
summary: "A brief description of the post."
---
Your content here...Posts are automatically:
- Parsed and sorted by date (newest first)
- Rendered with syntax highlighting and custom components
- Added to the sitemap and RSS feed
- Dynamic OG Images: Generated at
/og?title=for social sharing - RSS Feed: Available at
/rss - Sitemap: Auto-generated at
/sitemap.xml - Dark Mode: Supported via Tailwind CSS
pnpm install
pnpm devThis site is deployed on Vercel. On every push to the main branch:
- Vercel automatically builds the Next.js app
- Static pages are pre-rendered at build time
- Dynamic routes (blog posts, OG images) are generated on demand
- The site is deployed to Vercel's edge network
To deploy your own:
- Push the repo to GitHub
- Import the project in Vercel
- Vercel auto-detects Next.js and configures the build
- Your site is live