基于 Astro 打造极速且富有质感的个人博客

在挑选个人博客框架时，市面上有许多选择：Next.js、Hugo、Hexo、VuePress 等。但为什么 Astro 能够成为内容驱动型网站的新标杆？

为什么选择 Astro？

Astro 提出了 Islands Architecture（群岛架构） 与 Zero JS by Default 哲学：

1. 默认纯静态：如果不显式声明客户端指令（如 client:load），页面中不会注入任何不必要的 JavaScript 包。
2. 极高的 Lighthouse 得分：天然享有满分 SEO、无障碍访问（A11y）与加载性能。
3. 强大的内容集合（Content Collections）：利用 TypeScript 和 Zod 提供严格的内容 Frontmatter 模式校验。

---
// src/pages/posts/[...slug].astro 示例代码
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<article class="prose max-w-none">
  <h1>{post.data.title}</h1>
  <Content />
</article>

个性化设计的关键要素

为了让极简风格不陷入平庸，我们融入了以下关键设计要素：

• 微网格背景（Subtle Grid）：赋予页面如工程图纸般的现代科技质感。
• 动态阅读进度与平滑目录：在长文阅读时提供清晰的上下文感知。
• 定制 Shiki 代码语法高亮：根据深色/浅色模式自动适配 GitHub Light 与 One Dark Pro。

# 构建纯静态产物
pnpm build

# 本地快速预览
pnpm preview

极简不意味着简陋，而是让技术沉淀在文字之后，提供无与伦比的阅读体验。