How I made this blog, no fuss.

I just wanted a blog that looks nice, is easy to deploy, and simple to maintain. There are tons of solutions out there (Hugo, Jekyll, 11ty, Astro... you name them), but since I already use Next.js elsewhere, why not here too?

Whole stack:

• Next.js 15 + React 19
• TailwindCSS + shadcn/ui components
• Posts in plain .md files, rendered with react-markdown, remark-gfm, and rehype-highlight
• Icons from lucide-react

No CMS, no backend. Just good old Markdown 🙂‍↔️

Writing Posts

Each post is a simple .md file with frontmatter like this:

---
title: How I made this blog, no fuss.
date: 2025-06-17
---

You can parse that however you want (or let an LLM help you 😉).

💻 Rendering

And to render a post? Something like this:

return (
  <div className="flex flex-col items-center justify-center">
    <div className="mx-auto py-12 px-6 w-full">
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
      <p className="text-sm text-muted-foreground mb-8">{post.createdAt}</p>
      <Separator className="mb-6" />
      <div className="prose mt-4">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeHighlight]}
        >
          {post.content}
        </ReactMarkdown>
      </div>
    </div>
  </div>
);

This is it. No fuss, no bloat. Just write and hit re-deploy. (You’ll want to set up a deployment pipeline, obviously.)

If you’re curious about anything else, feel free to ask me on X - mehmetaderin.

🫧 Bonus:

Here’s how I styled prose-related elements (including pre and code):

.prose {
  @apply max-w-4xl;
}

pre {
  @apply bg-transparent border-1;
}

code.hljs {
  @apply bg-transparent;
}

code:not(.hljs) {
  @apply bg-muted text-muted-foreground px-1 py-0.5 rounded;
  font-weight: normal;
}

code:not(.hljs)::before,
code:not(.hljs)::after {
  content: none;
}

pre code {
  background: none !important;
}

Tweak the colors to match your theme. Tailwind’s typography plugin handles the rest.