博客文章
使用 Astro 搭建个人技术博客
从内容组织、路由规划到静态输出，记录一个可长期维护的 Astro 博客最小闭环。
分类：astro发布时间：2026年7月5日更新：2026年7月18日阅读：3 分钟
使用 Astro 搭建个人技术博客§
我做个人博客时最在意两件事：长期维护成本和首屏性能。前者决定博客能不能持续更新，后者决定读者会不会在加载阶段就失去耐心。Astro 很适合这个场景，因为它默认偏向静态输出，且可以把交互收敛到必要的局部。
为什么先做内容模型§
如果一开始就把页面铺满，后面很容易出现重复硬编码：文章分类散落在各处、页脚里重复站点信息、列表页和详情页分别维护相同字段。更稳妥的方式是先把内容模型定下来，再让页面围绕内容模型渲染。
我会优先定义这些字段：
- 标题和摘要
- 发布时间和更新时间
- 分类与标签
- 封面图与替代文本
- 是否精选、是否草稿
这样做的好处是，首页、列表页、RSS、结构化数据和搜索索引都能共享同一份数据来源。
页面结构建议§
一个个人技术博客不需要特别复杂，但要有清晰层级：
- 首页负责介绍个人定位和软件产品。
- 博客列表负责筛选和发现。
- 文章详情负责沉浸式阅读。
- 分类、标签、归档负责补充浏览路径。
下面是我在项目里常用的路由组织方式：
const routes = [
"/",
"/blog/",
"/blog/[slug]/",
"/categories/",
"/categories/[category]/",
"/tags/",
"/tags/[tag]/",
];一个简单的文章数据结构§
export interface PostMeta {
title: string;
description: string;
publishDate: string;
updatedDate?: string;
category: string;
tags: string[];
featured?: boolean;
}有了稳定的元数据，页面层就可以专注于布局和交互，而不是到处判断字段是否存在。
阅读体验比花哨动效更重要§
博客最容易被忽略的是正文阅读体验。建议至少注意这些细节：
| 项目 | 建议 |
|---|---|
| 正文宽度 | 控制在 68 到 76 字符左右 |
| 行高 | 中文正文至少 1.8 |
| 代码块 | 允许横向滚动 |
| 图片 | 不要溢出容器 |
| 表格 | 小屏幕可横向滚动 |
真正影响阅读体验的通常不是“看起来好不好看”，而是能不能安静地读完。
让文章内容可复用§
技术博客文章经常会被反复引用。我的做法是把可复用的信息拆出去，比如：
- 分类配置单独维护
- 标签链接统一生成
- 文章卡片、目录、上一篇下一篇组件复用
- SEO 和 JSON-LD 统一输出
这样即使后面加入软件官网、更新日志和文档系统，内容管理方式也不会完全推倒重来。
总结§
Astro 适合做长期维护的个人博客，原因不是它“功能很多”，而是它能逼着你把内容和页面分离。对个人开发者来说，这种约束比无限灵活更重要。
如果后续还要把博客扩展成软件官网，我会继续沿用同一套内容模型和设计语言，而不是单独再做一套完全不同的站点。