本站是如何搭建的

这个博客最大的特点是：不需要数据库，也不需要后台，把 Markdown 文件丢进 blog 目录，重新构建就能发布。

技术栈

• Next.js 16：全栈 React 框架，负责路由与静态生成
• React 19：底层 UI 库
• next-mdx-remote：在服务端把 .mdx 编译为 React 组件
• gray-matter：解析 Markdown 文件头部的 YAML frontmatter
• remark-gfm + rehype-highlight：GFM 语法支持与代码高亮

文章是怎么被读取的

src/lib/posts.js 在构建时直接读取项目根目录 blog 文件夹里的所有 .md / .mdx 文件：

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const BLOG_DIR = path.join(process.cwd(), 'blog');

const files = fs.readdirSync(BLOG_DIR).filter((f) => /\.(md|mdx)$/.test(f));

每一篇文章的 frontmatter 提供元信息：

---
title: '文章标题'
date: '2026-08-12'
description: '摘要'
tags: ['技术', 'MDX']
---

静态导出

在 next.config.mjs 中开启：

const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true,
};

执行 npm run build 后，所有页面（首页、文章列表、每篇文章、关于页）都会被预渲染成纯 HTML/CSS/JS，输出到 out/ 目录，可以托管到 GitHub Pages、Vercel、任意 Nginx 等任何静态服务器。

给写作的人

新增一篇博客只需要两步：

1. 在 blog/ 下新建一个 xxx.mdx 文件
2. 写好 frontmatter 和正文，重新 npm run build

就这样，剩下的交给 Next.js。