文章开发

STAR Blog: A Markdown-First Personal Blog

置顶

Write locally in Markdown, publish automatically, and keep reading simple.

开发 3802 2026-08-04
Next.js Markdown Blog React
A small personal publishing space where content stays local, pages are generated from Markdown, and the writing experience remains the center of attention.

STAR Blog is built with Next.js and React. There is no separate CMS to maintain: create a Markdown file, add a few frontmatter fields, and the homepage, archive, search index, and article page update automatically.

demo
demo

What is available

The current implementation is intentionally focused on the essentials:

Local Markdown articles with generated routes

Date-based source folders with short public URLs

Categories, tags, pinned posts, and featured posts

Homepage filters, sorting, and in-site search

Link and archive pages

Lazy-loaded images

Code blocks with copy, raw view, and line numbers

KaTeX math rendering

Light and dark reading modes

Start with a Markdown file

Store articles inside the `article/year/month/day/` structure. For example:

text
1article/2└── 2026/3    └── 8/4        └── 4/5            └── welcome.md

The folder date is for source organization only. The public article URL comes from the Markdown filename, so this file is published at:

text
1/article/welcome

Keep filenames unique, even across different date folders.

Frontmatter

Frontmatter controls the article card and reading page:

yaml
1---2title: My new article3description: A short introduction for the article list.4date: 2026-08-045category: 开发6tags: [Next.js, React, Markdown]7pinned: true8featured: true9---

Set `pinned: true` to keep an article at the top of the list. Set `featured: true` to show it in the homepage featured section. An article is not shown there unless it is explicitly featured.

Reading experience

The article page uses a wide reading column, a table of contents, and a live reading-progress indicator. Images follow regular Markdown syntax and are loaded only as they approach the viewport:

md
1![Image description](https://example.com/image.webp "Optional title")
Writing does not have to wait for a perfect conclusion. A useful observation, a debugging note, or an unfinished idea can all become valuable future context.

Code blocks

Code blocks include a language label, optional line numbers, a raw-text view, and a copy action.

ts
1type ArticleFrontmatter = {2  title: string;3  category: string;4  tags?: string[];5  pinned?: boolean;6  featured?: boolean;7};8 9const welcome: ArticleFrontmatter = {10  title: "STAR Blog: A Markdown-First Personal Blog",11  category: "开发",12  tags: ["Next.js", "Markdown", "React"],13  pinned: true,14  featured: true,15};16 17console.log(`Publishing: ${welcome.title}`);

Mathematical notation

Inline mathematics work naturally: f(x)=anxn+an1xn1+an2xn2+f(x)=a_nx^n+a_{n-1}x^{n-1}+a_{n-2}x^{n-2}+\cdots.

Display equations can stand on their own:

2x5y=82x - 5y = 8

3x+9y=123x + 9y = -12

Greek letters, functions, operators, and set notation are supported: Γ\Gammaι\iotaσ\sigmaϕ\phi\int\ointtan\tansin\sinlog\logmax\max×\times÷\div\leq\neq\cup\cap\in\subseteqN\mathbb{N}R\mathbb{R}\infty

Search, filters, and archive

Use the category and sorting controls on the homepage to explore articles. Press `Ctrl + K` on Windows or `⌘ + K` on macOS to open in-site search. Search matches article titles, descriptions, categories, and tags.

The archive groups articles by the `date` field in frontmatter. Dates remain useful for organizing source files and timelines without becoming part of a reader-facing URL.

Keep writing

Create a new Markdown file and start with one heading. The site handles discovery and rendering automatically, so the workflow stays simple: write, save, and continue building a personal archive over time.