约 2 分钟阅读
从零搭建一个新拟态风格博客
记录用 Next.js + Tailwind CSS 搭建这个博客的过程，以及新拟态设计风格的实现思路。
文章目录
为什么要自己写博客
2025 年了，成熟的博客平台多不胜数。但我选择从零开始，原因有三：
- 完全控制设计 — 新拟态（Neumorphism）这种风格，没有一个现成模板能完全符合我的心意
- 学习前端 — 通过实践掌握 Next.js、Tailwind CSS、MDX 这些现代工具
- 内容归属权 — 我的文字、我的设计、我的域名，不依赖任何第三方平台
技术栈选择
| 技术 | 作用 |
|---|---|
| Next.js 16 | 框架，SSG 预渲染，极快的首屏加载 |
| Tailwind CSS v4 | 原子化样式，新拟态阴影直接用任意值写 |
| CSS 动画 | 渐进增强的淡入效果、卡片 hover 微动效 |
| MDX | Markdown 写文章，可嵌入 React 组件 |
新拟态的核心技巧
新拟态的关键在于双阴影和与背景同色的卡片：
.neu-card {
background: #f0f0f3;
border-radius: 16px;
box-shadow: 8px 8px 16px #d1d1d4,
-8px -8px 16px #ffffff;
}亮面和暗面共同营造出浮雕般的效果。hover 时加深阴影、微微上浮，卡片的「立体感」就出来了。
克制是最重要的设计原则。配色、阴影、圆角三要素统一，就赢了。