Perfect for first-time bloggers

notebook-blog-starter

The most aesthetic blog starter for Next.js

The fastest way to go from idea to live blog — no backend, no CMS, no prior experience needed. Just drop in .mdx files and deploy to Vercel in minutes.

Browse Components Get Access

No databaseNo CMSNo backendFree on Vercel

Try the /studio editor — no signup

supacode.in/blog/weekend-in-kyoto

Weekend in Kyoto

Best visited in spring for cherry blossoms, or autumn for the maple leaves.

Kyoto holds a quiet magic that is hard to describe until you have walked its temple paths at dawn. The city layers centuries of history beneath every cedar beam and stone lantern, inviting slow exploration. We arrived on a Friday evening and left wondering how we fit three lifetimes of memory into forty-eight hours.

Fushimi Inari at sunrise (arrive by 6am)
Philosopher's Path in cherry blossom season
Nishiki Market for street food
Arashiyama bamboo grove before 8am

Dawn at Fushimi Inari

The temples never felt like tourist traps. Each one earned your attention through architecture, silence, or sheer unexpected beauty. Ryoan-ji's rock garden, in particular, stopped us both mid-sentence.

Built with this starter

therationalinvestor.in/blog/gold-dollar-rupee-stock-market-connection

The Rational Investor — a personal finance blog built with notebook-blog-starter

Visit therationalinvestor.in →

Why this starter

Most blog starters look the same. Yours shouldn't.

Generic templates hand you gray cards and leave the hard part — making the blog feel like yours — up to you. notebook-blog-starter ships 30 hand-crafted MDX components, a book-style reader, and a visual editor, with SEO and performance already wired in. You publish something readers remember today, not after weeks of design work.

Who it's for

Built for people who publish

Beginners with ideas

Never built a blog before? Good. No backend to configure, no CMS to learn. Write in .mdx, push to GitHub, live in minutes.

Indie hackers & founders

Launch a marketing blog, changelog, or docs site that looks designed — without hiring a designer or wrestling a page builder.

Writers & educators

Essays, tutorials, or STEM lessons: formula blocks, timelines, and callouts make dense topics a pleasure to read.

Developers

A typed Next.js 16 + MDX codebase with 30 components, book mode, and SEO already wired. Clone, configure, ship.

What you get

Everything to ship a beautiful blog

30 Notebook Components

StickyNotes, Polaroids, WashiTape, FlipCards, and more. MDX-native, zero setup.

Book Reader Mode

A paginated reading experience with chapter navigation. Toggle on in theme.config.ts.

5 Accents + 3 Intensities

amber, blue, rose, emerald, violet. Dial from full notebook chaos to clean subtle.

/studio Visual Editor

Non-technical authors can draft, style, and preview posts right in the browser.

SEO Infrastructure

JSON-LD schemas, OG tags, sitemap, canonical URLs. All wired up.

No Backend. No CMS.

Your content lives as .mdx files. No database, no API, no subscriptions. Deploy free to Vercel.

Theme intensity

One dial. Three personalities.

Change intensity in theme.config.ts to control how decorative your blog feels.

Fullintensity: 'full'

Everything is intentionally decorative. Notes, tape, Polaroids all show.

Why This Matters: The notebook aesthetic is front and center.

Mediumintensity: 'medium'

Cleaner feel. Sticky notes remain, heavy decoratives step back.

Tip: A good balance for professional blogs.

Subtleintensity: 'subtle'

Key Point: Minimal. Clean. Zero decoratives. Just content.

At subtle intensity, only structural elements like callouts and highlights appear. Perfect for content-first, distraction-free reading.

Component library

Every post element, reimagined

20+ MDX components designed for blogs. Use them in any post, just drop the JSX.

Phosphorus helps sleep. Take magnesium.

StickyNote

Flash Card

What is a moat?

tap to flip ↺

A competitive advantage that is hard to replicate, like a castle moat protecting a business.

FlipCard

Tip: Use FlipCards for Q&A sections and key concepts.

Callout

Margin notes float beside your paragraphs.This is a sample paragraph. The margin note floats to the right of this text on desktop.

MarginNote

Kyoto, 2024

Polaroid

Before

Manual calculation every time

After

Automated with one line of code

Before

Manual calculation every time

After

Automated with one line of code

Compare

Browse all components

Built-in editor

Non-technical authors welcome.

The /studio editor is a 3-pane visual workspace built into the starter. Pick components from the palette, edit content with live preview, and download the .mdx file. No code knowledge required.

Palette of all 30 components
Live MDX preview
Download as .mdx
Dev-only, zero production overhead

See the /studio

supacode.in/studio

Palette

📌 StickyNote

🎞 Polaroid

📎 WashiTape

🃏 FlipCard

💬 CallOut

📐 Compare

🗂 IndexCard

📝 MarginNote

Editor

---
title: "My Post"
date: "2026-06-20"
---

# Introduction

<StickyNote color="yellow"
  title="Key Point">
  Write like you talk.
</StickyNote>

The first paragraph hooks
the reader immediately.

<Callout type="tip">
  Keep sentences short.
</Callout>

Preview

My Post

Introduction

Key Point

Write like you talk.

The first paragraph hooks...

Tip: Keep sentences short.

Getting started

Up and running in minutes.

Get the starter

After you get access, you receive the full source code with all 30 components and infrastructure wired up.

# full source, ready to run

Configure

Edit site.config.ts for your name and contact. Edit theme.config.ts for accent, intensity, and fonts.

# site.config.ts + theme.config.ts

Deploy

Push to GitHub, connect to Vercel. First deploy takes under 2 minutes.

git push && vercel deploy

Ready to build the most beautiful blog on the web?

Get the full source code. One-time access, lifetime use.

Get Access Browse Components