搭建个人博客网站全指南

引言

拥有一块属于自己的网络空间，是许多技术人的梦想。本指南将带你从零搭建一个现代化个人博客。

技术选型

• 框架: Next.js 16 — 全栈 React 框架，SSR/SSG 完美支持
• 样式: Tailwind CSS 4 — 原子化 CSS，高效开发
• 内容: Markdown + gray-matter — 简单易用的内容管理
• 部署: Vercel — 一键部署，自动 HTTPS

核心功能

1. 暗色模式

使用 CSS 变量 + prefers-color-scheme 实现系统级暗色模式，也可通过 JavaScript 手动切换。

2. 文章目录 TOC

通过 rehype-slug 自动为标题生成锚点，再构建树形目录结构。

3. 代码高亮

使用 rehype-highlight 支持 190+ 语言的语法高亮。

目录结构

blog/
├── app/          # Next.js App Router 页面
├── posts/        # Markdown 文章
├── lib/          # 工具函数
├── components/   # 共享组件
└── public/       # 静态资源

总结

这样你就拥有了一个功能完整、性能优异的个人博客。后续可以根据需要添加评论系统、RSS 订阅、站内搜索等进阶功能。