🌐主流博客框架对比指南

┌─────────────┬──────────┬──────────┬──────────┬───────────┬──────────────┐
│   框架      │  语言    │ 构建速度 │ 学习曲线 │  GitHub   │  最适合      │
│             │          │          │          │  Pages    │              │
├─────────────┼──────────┼──────────┼──────────┼───────────┼──────────────┤
│   Hexo      │ Node.js  │   ⚡⚡    │   ★☆☆    │   ✅      │ 个人博客     │
│   Hugo      │   Go     │   ⚡⚡⚡  │   ★★☆    │   ✅      │ 大型站点     │
│   Jekyll    │  Ruby    │   ⚡⚡    │   ★☆☆    │   ✅✅    │ GitHub托管   │
│   Gatsby    │  React   │   ⚡     │   ★★★    │   ✅      │ 现代Web应用  │
│   VitePress │  Vue/TS  │   ⚡⚡⚡  │   ★★☆    │   ✅      │ 技术文档     │
│   Ghost     │ Node.js  │   N/A    │   ★★☆    │   ❌      │ 内容创作     │
│   WordPress │   PHP    │   N/A    │   ★☆☆    │   ❌      │ 全能型CMS    │
│   Astro     │ JS/TS    │   ⚡⚡⚡  │   ★★☆    │   ✅      │ 内容站点     │
└─────────────┴──────────┴──────────┴──────────┴───────────┴──────────────┘

graph LR
    A[Markdown 源文件] --> B[Hexo 引擎]
    B --> C[主题渲染]
    B --> D[插件处理]
    C --> E[纯静态 HTML]
    D --> E
    E --> F[GitHub Pages]
    E --> G[Vercel]
    E --> H[自有服务器]

graph TD
    subgraph "构建 5000 篇文章耗时"
        A[Hexo: ~120s] 
        B[Jekyll: ~90s]
        C[Hugo: ~2s]
        D[Gatsby: ~180s]
    end
    style C fill:#4CAF50,stroke:#333,color:#fff

flowchart TD
    A[推送 Markdown 到 GitHub] --> B{GitHub Actions}
    B --> C[Jekyll 构建]
    C --> D[生成静态 HTML]
    D --> E[部署到 GitHub Pages]
    E --> F[yourname.github.io]

graph TD
    subgraph "数据源"
        A1[Markdown 文件]
        A2[WordPress API]
        A3[Headless CMS]
        A4[数据库]
    end
    
    subgraph "Gatsby"
        B[GraphQL 数据层]
        C[React 组件]
        D[静态页面生成]
    end
    
    A1 --> B
    A2 --> B
    A3 --> B
    A4 --> B
    B --> C
    C --> D

graph LR
    subgraph "静态博客 (Hexo/Hugo)"
        A1[写作] --> A2[构建] --> A3[部署 HTML]
        A3 --> A4[CDN 加速]
    end
    
    subgraph "动态博客 (Ghost)"
        B1[在线编辑] --> B2[实时发布]
        B2 --> B3[数据库驱动]
        B3 --> B4[服务端渲染]
    end

WordPress 生态
├── 🧩 插件: 60,000+
├── 🎨 主题: 10,000+
├── 🌍 翻译: 200+ 语言
├── 👥 社区: 全球数百万用户
└── 💼 电商: WooCommerce 覆盖 30% 在线商店

传统 SPA 框架（如 Gatsby）：
┌──────────────────────────────────┐
│         整页都是 JS 水合           │  ← 200KB+ JS
│  ┌──────┐ ┌──────┐ ┌──────┐     │
│  │ Nav  │ │ 内容  │ │ 评论  │     │
│  └──────┘ └──────┘ └──────┘     │
└──────────────────────────────────┘

Astro 岛屿架构：
┌──────────────────────────────────┐
│  Nav（纯HTML）  │  内容（纯HTML）  │  ← 零 JS！
│                 │                │
│          ┌──────┴──────┐         │
│          │ 评论区(React) │         │  ← 只有这个加载 JS
│          └─────────────┘         │
└──────────────────────────────────┘

graph TD
    subgraph "传统静态博客"
        A1[Hexo] --> B1[纯静态 HTML]
        A2[Hugo] --> B1
    end
    
    subgraph "现代混合框架"
        C1[Astro] --> D1[静态 HTML + 按需 JS]
        C2[Next.js] --> D1
        C3[Gatsby] --> D1
    end
    
    B1 --> E[极致性能]
    D1 --> E
    D1 --> F[丰富交互]

flowchart TD
    A[你想搭建什么？] --> B{你是开发者吗？}
    
    B -->|是| C{主要用途？}
    B -->|否| D[WordPress<br/>零代码，功能全]
    
    C -->|技术博客| E{熟悉什么框架？}
    C -->|技术文档| F[VitePress<br/>文档体验最佳]
    C -->|作品展示| G[Astro<br/>框架灵活，性能极致]
    
    E -->|Vue| H[VitePress 或 Hexo]
    E -->|React| I[Astro 或 Gatsby]
    E -->|无偏好| J{在乎构建速度？}
    
    J -->|是| K[Hugo<br/>毫秒级构建]
    J -->|否| L[Hexo<br/>中文生态好]