Back to templates

Template details

Fonscape

A React blog theme for individual writers with Markdown content management, long-form reading features, and one-click Cloudflare or Vercel deployment.

About this template

Fonscape (风栖) is a React blog theme built for individual writers, offering a customizable interface, Markdown-based content management, long-form reading features, optional community sections, and one-click deployment to Cloudflare Workers or Vercel.

What is Fonscape?

Fonscape is a blog theme template that manages public content in a Git repository and runtime data in a per-site database. Authors write posts in Markdown with Frontmatter, and at build time the theme scans that content to generate shared content targets for the frontend and API, splitting lists, search indexes, and article bodies into on-demand fixed chunks. It runs on Cloudflare Workers with D1 or Vercel with Turso for dynamic data, and the repository remains the single source of published content.

Key Features

  • Consistent visual system — page headers, light/dark themes, a toggleable frosted-material effect, and responsive layouts stay unified, with site-level customization.
  • Immersive long-form reading — Markdown support, code highlighting, callout blocks, math formulas, and charts, plus article table of contents, reading progress, image lightbox, series navigation, and per-article background music (Meting single-track URLs by default, local media optional).
  • Optional content and community sections — poems and a music space can be enabled on demand; the music space uses a unified record shelf for songs, albums, and playlists with site-wide playback, lyrics, and optional listening notes. Accounts, comments, and friend links can also be turned off for a purely static reading experience.
  • Comment message tracking — when community features are on, you can view received comments and replies in one place and follow messages back to the original article and discussion context.
  • RSS subscription — an RSS feed is generated when siteUrl is configured in fonscape.config.js.
  • Simple writing and deployment flow — content managed with Markdown and Git, with one-click deployment to Cloudflare and Vercel, and a theme updater that preserves personal content.
  • Configurable categories — five default post categories (随笔, 评谈, 记录, 笔记, 指南) whose names, counts, and order can be customized via postCategories.

Who is it for?

  • Individual bloggers who want a self-hosted personal blog with long-form reading features without building the frontend from scratch.
  • Writers who prefer Git-based workflows and want to author in Markdown while keeping content versioned and reviewable.
  • Writers who want optional community features and can enable or disable accounts, comments, and friend links as needed.
  • Developers deploying on edge platforms who want a ready path to Cloudflare Workers + D1 or Vercel + Turso.

How does Fonscape work?

Deploy via the Cloudflare or Vercel button using a GitHub account, filling in a self-generated ADMIN_BOOTSTRAP_TOKEN. After deployment, open /admin/setup and use the same token to create the first administrator; the token then permanently expires. For local development, clone the repo, enable corepack, install with pnpm, and run pnpm dev.

FAQ

Does Fonscape require a separate platform login for deployment?

No. A single GitHub account is enough: both Cloudflare and Vercel support GitHub login, so after clicking the deploy button you complete authorization, project creation, and first deployment in sequence.

Is Fonscape free?

Fonscape is open source under the MIT License per the repository.

What do I need to configure before deploying?

Both deployment forms require only a self-generated ADMIN_BOOTSTRAP_TOKEN. Setting siteUrl in fonscape.config.js enables generation of /feed.xml and /sitemap.xml; leaving it blank means neither file is generated.

How do I update the theme safely?

The updater previews by default without writing files; running it with --apply writes changes after producing a local backup, distinguishing user files, theme files, merged files, and migration history.

Screenshot of Fonscape