LAT: 37.7749° N LONG: 122.4194° W

calendar_today 2025-05-15 schedule 预计阅读 3 分钟 folder 前端

前端选型

个人网站技术栈选型：
静态站点生成器对比

从个人博客的实际需求出发，横向对比 Astro、Hugo、11ty、Hexo、VitePress 等主流静态站点生成器。从构建性能、内容管理、组件化能力和部署体验四个维度做出最终技术选型。

场景定义

需求特征：

内容驱动（文章、个人介绍、项目展示）
静态部署（Vercel / GitHub Pages / Cloudflare Pages）
轻量快速，SEO 友好
有一定自定义设计空间

不需要：

后端数据库
用户登录系统
复杂的实时交互

主流方案一览

技术栈	语言/生态	构建速度	设计自由度	学习成本	社区活跃度
Astro	JS/TS	快	★★★★★	低	高（增长快）
Hugo	Go	极快	★★★☆☆	中	高（成熟）
11ty	JS	快	★★★★☆	低-中	中
Hexo	JS	中	★★☆☆☆	低	中（中文社区强）
VitePress	Vue	快	★★★☆☆	低	高
Jekyll	Ruby	慢	★★★☆☆	中	下降中
Next.js (Static)	React	中	★★★★★	高	极高
Nuxt (Static)	Vue	中	★★★★★	高	高

详细对比

1. Astro

定位： 内容驱动的现代静态站点框架

核心理念： Islands Architecture — 页面默认零 JS，只在需要交互的”岛屿”加载脚本。

优势：

写法接近原生 HTML，上手几乎没有门槛
原生 Markdown/MDX 支持（Content Collections）
Tailwind 一行命令集成
可按需引入 React/Vue/Svelte 组件（但不强制）
构建产物极轻，Lighthouse 评分高

劣势：

生态相对年轻（2022 年 1.0），插件数量不如 Hugo
不适合重交互应用

示例 — 一个页面组件：

---
// src/pages/index.astro
const title = "你好，我是 Yang"
const posts = await Astro.glob('../content/blog/*.md')
---

<html lang="zh-CN">
<head>
  <title>{title}</title>
</head>
<body class="bg-slate-900 text-white">
  <h1 class="text-4xl font-bold">{title}</h1>
  <p>喜欢探索，拥抱 AI 编码</p>

  <ul>
    {posts.map(post => (
      <li>
        <a href={post.url}>{post.frontmatter.title}</a>
      </li>
    ))}
  </ul>
</body>
</html>

感受： 就像在写 HTML，但有组件化和数据能力。

2. Hugo

定位： 构建速度最快的静态站点生成器

核心理念： 用 Go 模板语法组织内容，极致构建性能。

优势：

构建速度无敌（上千篇文章毫秒级）
单二进制文件，无 Node.js 依赖
主题生态丰富
内置图片处理、多语言、分类系统

劣势：

Go 模板语法不直观（{{ .Title }} / {{ range }} / {{ partial }}）
自定义组件和交互效果较麻烦
想脱离主题自己设计需要深入理解其模板系统

感受： 需要学 Go 模板语法，逻辑和展示混在一起，可读性一般。

3. 11ty (Eleventy)

定位： 最简单灵活的静态站点生成器

核心理念： 零配置、不绑定框架、模板语言自选。

优势：

极简——核心概念很少
支持多种模板语言（Nunjucks / Liquid / Markdown / JS）
不引入任何客户端框架
数据处理灵活

劣势：

没有内置组件系统（要靠模板 include/partial）
样式方案自己搭（Tailwind 需手动配置）
文档风格偏”参考手册”，新手容易迷路

感受： 介于 HTML 和模板引擎之间，灵活但一切要自己组装。

4. Hexo

定位： 快速搭建博客的工具

核心理念： 选主题、写 Markdown、一键部署。

优势：

中文社区强，教程多
主题一键切换，快速出效果
纯写作体验好

劣势：

自定义设计受限于主题结构
想做个人展示页（非纯博客）比较别扭
技术架构偏老，生态活跃度在下降

感受： 写博客很舒服，但做个人展示页设计自由度低。

5. VitePress

定位： Vue 驱动的静态文档站点生成器

核心理念： 以 Markdown 为核心，Vue 组件增强。

优势：

Vue 生态内最简单的 SSG 方案
热更新极快（基于 Vite）
默认主题即可用，适合文档/技术博客
可在 Markdown 里直接用 Vue 组件

劣势：

默认 UI 是”文档风格”，做个人展示页需要大量覆盖样式
绑定 Vue 生态
自定义布局比 Astro 繁琐

感受： 文档站很省心，但做个人展示页有点”工具味”太重。

场景匹配决策树

你的需求是什么？
│
├─ 纯写博客，不关心设计 → Hugo / Hexo
│
├─ 技术文档站 → VitePress
│
├─ 个人展示 + 博客，想自定义设计
│   ├─ 喜欢极简，自己掌控一切 → 11ty
│   └─ 想要现代开发体验 + 轻量产物 → Astro ✓
│
└─ 已有 React/Vue 项目，顺便加个博客 → Next.js / Nuxt

最终选择：Astro

为什么在这个场景下选 Astro：

设计自由度最高 — 没有框架的”味道”强加给你，完全自己设计
学习成本最低 — 会 HTML 就能写，--- 之间放数据逻辑，外面写模板
炫技空间大 — 可以纯 CSS/JS 做动效，不受框架约束
Markdown 原生 — docs/ 下的文章零配置变页面
产物最轻 — 默认零 JS，加载速度打满分
Vercel 部署丝滑 — 官方适配，push 即部署

一句话：Astro 是”我只想做个好看的网站”这个需求的最优解。

场景定义

主流方案一览

详细对比

1. Astro

2. Hugo

3. 11ty (Eleventy)

4. Hexo

5. VitePress

场景匹配决策树

最终选择：Astro

参考链接