A personal blog built on Next.js and Contentful
An extension of Vercel’s Next.js Blog with Draft Mode starter, developed into a complete personal publishing setup and shared under the same MIT licence.
The content model is deliberately compact. A Post type backed by Author and Category, plus a Code Block for embedded snippets, a Prompt Block for publishing the generative-image prompt behind a cover, a Sidenote for asides set in the margin, and a Page type for standalone pages. A Contentful export and a seed script ship with the repo, so a fresh fork has content to render from the first build.
Features
- Static generation with on-demand revalidation, so CMS edits go live by webhook without a redeploy
- Draft mode and live preview for working on posts before they publish
- Site search that runs entirely in the visitor’s browser via Pagefind, with no third-party service and no query leaving the page
- Syntax-highlighted code blocks with a copy button, highlighted at build time by Shiki
- Sidenotes that float into the right margin on wide screens and collapse behind their reference number on narrow ones, opening without JavaScript
- Per-post table of contents, reading time, image lightbox, and cross-page view transitions on cover images
- Light and dark colour schemes following the operating system preference
- Archive grouped by year, paginated home, category and author listings, and landing pages for each
- Sitemap, robots.txt, RSS feed, Open Graph and Twitter card metadata, and breadcrumb structured data
- Skip link, a single visible focus indicator across the site, and reduced-motion support
- Content Security Policy, HSTS, and Permissions-Policy headers set in
next.config.js - TypeScript throughout, with a vitest suite and a full build gating every pull request