上海
Post

如何用 Astro 构建一个极简的个人聚合站

2026-04-18 #astro#web#personal

为什么是 Astro

Astro 默认 0 JS、构建期渲染、原生支持 Markdown / MDX 与 Content Collections。 对个人站这种「内容多、交互少」的场景,几乎是完美的契合。

核心思路

把首页拆成「模块化的卡片」,每张卡都是一个独立的 .astro 组件, 拥有自己的数据源(本地 JSON / 构建期 fetch / 运行时 API)。

// 例如这样组装首页
<CardPosts />
<CardGitHub />
<CardNowPlaying />
<CardLocation />

后续要新增模块,只需要写一个新的 Card*.astro 文件丢进去。

终端风格的视觉语言

  • 等宽字体(JetBrains Mono)
  • 每张卡是一个带 ●●● 三色灯的窗口
  • $ 提示符 + 闪烁光标
  • 暖米色背景 + 硬阴影(neobrutalism)
  • 卡通色块(黄/粉/绿/蓝/橙/紫)作为模块强调

写到这里,发现这种风格的好处是:它自己就在描述自己是什么。 你打开网页第一眼就明白,作者是个写代码的人。


← all posts