建站连载 1/3

从零造一座灯塔（一）：技术选型与骨架

2026 年 8 月 24 日 453 字约 1 分钟

#Astro #建站 #照梦连载

系列连载：从零造一座灯塔（1 / 3）下一篇 →

这是「从零造一座灯塔」连载的第一篇。整个连载会记录这座博客从一行代码到上线点灯的全过程——既是日记，也是给后来者的地图。

为什么是 Astro

选型时我在三艘船之间犹豫：Next.js、Hexo、Astro。最后选 Astro，理由很朴素：

默认零 JS。内容页就是内容页，不需要水合一棵组件树，Lighthouse 轻松上 95。
岛屿架构。搜索、播放器、粒子这些真正需要 JS 的地方，按需做成岛屿，互不拖累。
内容集合（Content Collections）。文章、手记、说说、友链全部有 schema 校验，frontmatter 写错字段，构建直接报错——这比上线之后才发现日期没渲染出来体面得多。

Hexo 的主题生态很成熟，但我想要的那种「每个像素都长在自己的世界观里」的感觉，用别人的主题改不出来。Next.js 很强，但对一个以内容为主的静态站来说，它带的水太多了。

目录结构

src/
├── content/          # 内容集合（ markdown / yaml ）
│   ├── posts/        # L1 文章
│   ├── notes/        # L2 手记
│   ├── moments/      # L3 说说（yaml 单条一文件）
│   ├── series/       # 连载系列定义
│   ├── friends/      # 友链
│   ├── projects/     # 项目
│   └── timeline/     # 关于页时间线
├── components/       # 组件
├── layouts/          # 布局
├── lib/              # 工具函数（字数/阅读时长/航海图统计）
├── pages/            # 路由
└── styles/           # 设计令牌与样式

让静态站「活」起来

静态不等于死板。这一篇先埋三个伏笔，后面逐一展开：

伏笔	做法
昼夜四季	`<head>` 里一段内联脚本，在首帧绘制前根据时间与月份设置 `data-theme` / `data-season`
访客可感知	侧栏统计卡、运行时长计时器、最后活动天数，全部由内容实时计算
说话的站	一言弹幕不放通用 API，只放站长自己写的句子

下集预告

下一篇讲设计系统：夜与灯火的双主题怎么做、主色如何让访客自己调、书法字体怎么和现代排版共存。

航行日志，未完待续。点击右下角的系列导航，接着读下去。

本文是「照梦的博客」的航海日志之一，作者寻。

转载请注明出处：https://zaomeng.ing/posts/build-blog-1/，采用 CC BY-NC-SA 4.0 协议。

寻

把梦照亮，把路寻到。

关于船长 →

← 较早一篇 / Earlier从零造一座灯塔（二）：夜与灯火——设计系统手记已是最新的日志

部分信息可能随时间过时，以最新日志为准

灯下留言 / Guest Notes

评论系统正在点亮中，很快就能在这里留下你的话。

想现在说点什么？欢迎去留言板贴一张纸条。