George Kanchev

Blog

2026-04-12

No CMS, No Database: Adding a Blog to a Next.js Site

The decisions that matter before you write a line of code — how to build this in under 30 minutes by planning first.

  • Next.js
  • TypeScript
  • Tailwind
  • Shiki
  • AI

You've got a Next.js app already scaffolded. Now you want to add a blog — without standing up a CMS or a database.

Decisions that matter

Match the existing site theme. Not a separate blog — a section. Same dark palette, same teal accent, same hover interactions.

Borrow a structure you already like. Find a reference with the layout you want and adapt it. Don't invent the UX. Mine was: featured hero up top, card grid below.

No database. A CMS or database adds cost and maintenance surface for no gain at this scale. Posts live as markdown files with gray-matter frontmatter. published: true gates what renders. featured: true flags the hero. Changing either means editing a text file.

Watch Shiki's colors. Shiki bakes background color into inline styles, which collides with @tailwindcss/typography. Strip it:

[&_.shiki]:!bg-transparent
[&_.shiki_code]:!bg-transparent
prose-pre:!bg-transparent
prose-pre:!p-0
prose-pre:!border-0

Don't reach for new tools if your site already has the pieces. You only need gray-matter, marked, and shiki.

Before you write any code, make a plan. Describe your existing architecture, name a reference for the structure you want, state your constraints. Feed that into whatever agentic tool you're already using — Claude Code, Codex, Kilo Code — and let it handle the implementation. You'll spend your time on the parts that need judgment, not on boilerplate decisions.

What you need: gray-matter (parses frontmatter) · marked (markdown to HTML) · shiki (server-side syntax highlighting)