基于nextjs、heroui构建的静态博客网站

最近想给自己制作一个博客网站,要求能够通过markdown或者Markdown with JSX编写内容,并且最终能编译成静态产物,部署到github page上.

首先我确定了一些基本需求如下:

1. 通过markdown或者Markdown with JSX编写内容,并且最终能编译成静态产物.
2. 支持主题切换(dark/light主题).
3. 最终能编译成静态产物,部署到github page.

技术栈选择

针对这些需求我选择了以下技术栈:

核心框架

• Next.js 15 - 主要的React框架,提供静态站点生成(SSG)能力和App Router架构
• React 19 - 现代化的前端框架，提供组件化开发体验
• TypeScript 5 - 提供类型安全和更好的开发体验

UI框架与样式

• HeroUI 2.8 - 现代化的React组件库，提供美观的UI组件和暗黑主题支持
• Tailwind CSS 4 - 原子化CSS框架，与HeroUI完美配合，提供高效的样式开发
• Framer Motion - 强大的动画库，为组件添加流畅的过渡效果

Markdown处理

• @next/mdx - Next.js官方MDX插件，无缝集成MDX支持
• @mdx-js/mdx & @mdx-js/react - 核心MDX处理库，支持在Markdown中使用React组件
• gray-matter - 解析Markdown文件的frontmatter元数据

主题与代码高亮

• next-themes - 优雅的主题切换解决方案，支持系统主题检测
• prism-react-renderer - 实现自定义代码块渲染，支持多语言语法高亮

开发工具

• ESLint 9 - 代码质量检查工具，确保代码规范性
• cross-env 10.0.0 - 跨平台环境变量设置，支持不同操作系统的构建

项目结构

Copy
coolloong.github.io/
├── .github/
│   └── workflows/
│       └── deploy.yml         # GitHub Actions 自动部署配置
├── content/                   # 博客文章内容目录
│   └── *.md                   # Markdown/MDX 格式的博客文章
├── public/                    # 静态资源目录
├── src/                       # 源代码目录
│   ├── app/                   # Next.js App Router 目录
│   │   ├── about/             # 关于页面
│   │   ├── api/               # API 路由
│   │   │   └── posts/         # 文章相关API
│   │   ├── friends/           # 友链页面
│   │   ├── posts/             # 文章内容页
│   │   │   └── [slug]/        # 动态路由
│   │   ├── globals.css        # 全局样式
│   │   ├── layout.tsx         # 根布局组件
│   │   ├── page.tsx           # 首页
|   |   ├── favicon.ico        # 网站favicon
│   │   └── providers.tsx      # 全局Provider配置
│   ├── components/            # React 组件目录
│   │   ├── BlogCard.tsx       # 博客卡片组件
│   │   ├── Client.tsx         # 客户端组件
│   │   ├── Footer.tsx         # 页脚组件
│   │   ├── Navbar.tsx         # 导航栏组件
│   │   ├── Pagination.tsx     # 分页组件
│   │   └── ThemeToggle.tsx    # 主题切换组件
│   ├── data/                  # 数据API目录
│   │   └── posts.ts           # 文章数据API
│   ├── lib/                   # 工具函数目录
│   │   ├── posts.ts           # 服务端文章处理逻辑
│   │   └── posts-client.ts    # 客户端文章处理逻辑
│   └── types/                 # TypeScript 类型定义
│       └── blog.ts            # 博客类型定义
├── next.config.ts             # Next.js 配置文件
├── tailwind.config.js         # Tailwind CSS 配置
├── tsconfig.json              # TypeScript 配置
├── package.json               # 项目配置
└── README.md                 

总结

通过这次实践，我深感现代前端开发的便利性. 成熟的框架生态(Next.js + React)、完善的UI组件库(HeroUI)、以及丰富的第三方库支持，让静态站点生成不再是复杂的技术挑战，而是一次简单愉快的开发体验.