Prologue Blog

Prologue Blog is a content-first blog starter that compiles Markdown and MDX files into a Next.js 16 site with built-in fuzzy search, RSS, SEO metadata and dark mode. It is published by hxlog as a GitHub template repository named prologue-blog-template and ships with a one-click Vercel deploy link.

What is Prologue Blog?

Prologue Blog is a blog template built on Next.js 16, React 19, Tailwind CSS v4 and Contentlayer2, maintained by hxlog. It takes Markdown and MDX files stored in the repository as input and outputs statically generated article pages, a search page, comment-enabled posts, an about/personal page and a friend-links page. The reference site runs at prologue.dev, while the stripped-down starter — without the author's historical posts — lives at github.com/hxlog/prologue-blog-template.

Key Features

• Next.js 16 and React 19 — the app router site is cloned from a GitHub template repository and deployed to Vercel through a hosted clone button.
• Tailwind CSS v4 — all layout and typography styling uses the Tailwind utility system, including the responsive mobile views for the homepage, personal page and friend-links page.
• Contentlayer2 with Markdown and MDX — posts accept a frontmatter block with required title, description and publishDate, plus optional lastmod, featured, tags, image and imageDesc fields.
• Fuse.js search — a lightweight client-side search engine handles full-text and fuzzy matching without an external search service.
• Mermaid rendering — diagrams written in Mermaid syntax inside posts are rendered on the page, alongside support for math formulas.
• Full SEO output — every post generates OpenGraph tags, JSON-LD structured data and an RSS feed.
• Adaptive dark mode — the theme follows the visitor's system preference automatically.
• Configuration-driven customization — site metadata, friend links, microblog entries and tag labels live in sitemetadata.js, links.yaml, microblog.yaml and taglabel.js under the /data directory, while static assets sit in /public.

Who should use Prologue Blog?

• Indie bloggers who want to write in Markdown and publish a personal site without building layout, search or SEO plumbing from scratch.
• Developers who plan to fork the template and extend the Next.js and Tailwind code, or strip it down using the minimal prologue-blog-template repository.
• Obsidian users who want to open the /data folder as a Vault, edit YAML frontmatter as structured tables, and keep the same files as a knowledge base.
• Technical writers who need Mermaid diagrams, formulas and code-friendly MDX inside their posts.

What can you do with Prologue Blog?

• Publish a personal blog: drop Markdown files into /data/content/blog, set the frontmatter fields, and the site builds article pages with tags, featured flags and cover images.
• Run a knowledge base: keep long-form notes in /data/content/pages, author them in Obsidian, and rely on Fuse.js search to find content across the site.
• Document technical work: embed Mermaid diagrams and formulas directly in MDX posts so architecture and math render as part of the article.
• Ship a link page and microblog: maintain friend links and short updates through links.yaml and microblog.yaml instead of editing components.

How does Prologue Blog work?

1. Clone or fork hxlog/prologue-blog-template, then run npm install and npm run dev to start the local site.
2. Add Markdown or MDX posts to /data/content/blog and standalone pages to /data/content/pages with the required frontmatter fields.
3. Update sitemetadata.js, links.yaml, microblog.yaml and taglabel.js, keep images in /public, and deploy — Vercel is supported through the template's clone link.

FAQ

Is Prologue Blog free to use?

Yes. Prologue Blog is an open GitHub template repository, so you can fork or clone it and run it locally. There is no license fee or account requirement described on the project page; hosting costs depend on where you deploy, such as Vercel.

What content formats does Prologue Blog support?

Posts and pages are authored as Markdown or MDX files processed by Contentlayer2. MDX posts can include Mermaid diagrams and math formulas. Blog posts require title, description and publishDate frontmatter; lastmod, featured, tags, image and imageDesc are optional.

Does Prologue Blog include search?

Yes. Search is powered by Fuse.js, a lightweight client-side library that performs full-text and fuzzy matching over your content without requiring an external search service or index server, and it also backs the dedicated search page shown in the template previews.

Can I edit Prologue Blog content in Obsidian?

Yes. The project recommends opening the /data directory as an Obsidian Vault, where YAML frontmatter renders as structured tables. This keeps the blog files usable as a knowledge base while still building the site through Next.js, Contentlayer2 and Tailwind CSS v4.

How do I customize the site configuration?

All configuration lives in the /data directory and static assets in /public. Site metadata, friend links, microblog entries and tag labels are edited in sitemetadata.js, links.yaml, microblog.yaml and taglabel.js, so most changes need no component edits.