用 Astro 搭一个工程图纸风的独立博客

这个站点第一版的目标很简单：不需要后台，不需要评论系统，但要有一套足够独特的视觉语言，并且以后写文章的成本足够低。

为什么选 Astro

如果只是写技术博客，静态生成器通常比自建前后端更省心。Astro 的优势在于：

• Markdown 文件就是文章，frontmatter 写标题、日期、分类和标签；
• 构建产物是纯静态 HTML，可以部署到任何静态托管；
• 交互只在需要的地方引入，默认页面没有多余 JavaScript；
• TypeScript 支持开箱即用，内容集合有类型检查。

内容模型

每篇文章的 frontmatter 固定为以下字段：

字段	类型	说明
title	string	文章标题
description	string	列表页和搜索用摘要
pubDate	date	发布日期
category	string	分类，从文章自动聚合
tags	string[]	标签，同样自动聚合
draft	boolean	草稿不进入构建
slug	string	可选，默认用文件名

分类和标签不需要单独维护数据文件，构建时从所有文章里统计即可，避免两处数据不一致。

图纸视觉的实现

整站视觉由三层组成：

1. 固定背景的蓝图网格，用四层 linear-gradient 叠加出 32px 和 256px 两级网格；
2. 跟随鼠标的十字准星，坐标显示在右上角，只对桌面鼠标启用；
3. 大标题使用 Big Shoulders Display，配合等宽字体的小标签，形成工程图的感觉。

.blueprint-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

视觉参考不等于复制。站点文案、字体组合和交互细节都重新设计过，没有使用原站的代码和素材。

后续计划

第一版只做核心阅读链路。之后按需再考虑评论、访问统计或内容后台，而不是一开始就把所有功能堆进来。