Next.js 静态博客搭建指南

为什么选择静态博客？

静态博客有几个显著优势：部署简单、加载极快、安全性高，无需数据库或后端服务。托管在 Vercel、Netlify 或 GitHub Pages 上都可以完全免费。

项目结构

my-blog/
├── app/
│   ├── layout.tsx        # 全局布局
│   ├── page.tsx          # 首页（文章列表）
│   └── blog/
│       └── [slug]/
│           └── page.tsx  # 文章详情页
├── lib/
│   └── posts.ts          # Markdown 处理工具
└── posts/
    └── hello-world.md    # 你的文章

Markdown 文件格式

每篇文章都是一个 .md 文件，顶部使用 YAML front matter 定义元数据：

---
title: "文章标题"
date: "2024-03-15"
description: "文章摘要，会显示在列表页"
tags: ["标签1", "标签2"]
---

正文内容从这里开始...

核心处理流程

Markdown 转 HTML 使用了 unified 生态：

const result = await unified()
  .use(remarkParse)      // 解析 Markdown AST
  .use(remarkGfm)        // 支持表格、删除线等 GFM 扩展
  .use(remarkRehype)     // 转换为 HTML AST
  .use(rehypeHighlight)  // 代码高亮
  .use(rehypeStringify)  // 输出 HTML 字符串
  .process(content);

代码高亮效果

支持多种语言，高亮效果由 highlight.js 提供：

def fibonacci(n: int) -> int:
    """计算斐波那契数列第 n 项"""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# 使用记忆化优化
from functools import lru_cache

@lru_cache(maxsize=None)
def fib_cached(n: int) -> int:
    if n <= 1:
        return n
    return fib_cached(n - 1) + fib_cached(n - 2)

部署到 Vercel

在 next.config.js 中添加 output: 'export'，然后推送到 GitHub，Vercel 会自动部署。

静态导出意味着每次修改文章都需要重新构建，但借助 CI/CD，这个过程可以完全自动化。

总结

一个轻量、快速、易维护的个人博客就这样诞生了。