Skip to content
Bblog
返回项目列表
Bblog — This Site
精选项目

Bblog — This Site

从零搭建的 Next.js 14 博客，暖灰设计系统 + 构建期 MDX 管线，SSG 直出静态页。

Next.jsTypeScriptTailwindMDX
源码在线演示

目标

搭一个属于自己的技术博客：静态生成、极快、视觉锐利。不抄模板，从设计令牌到 MDX 管线全部自己写一遍。

技术选型

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: { formats: ['image/avif', 'image/webp'] },
};
export default nextConfig;

App Router + generateStaticParams 让每篇文章在构建期生成静态 HTML，部署到边缘 CDN 直接分发。

设计语言

  • 背景 #FAF9F6 暖米白，正文 #1C1C1E 炭色，强调 #E54B4B 勃艮第红。
  • 代码块背景 #2A2421 暖深色（不用纯黑），带行号。
  • 正文行高 1.8，栏宽 680px。

收获

把「性能预算」写进构建脚本，把「排版」写进 CSS 变量——约束即设计。