用 Astro 搭建个人网站

为什么选择 Astro

Astro 是一个专注于内容型站点的静态站点生成器，默认「零 JS」，非常适合个人主页与博客。

它的几个优点：

• 组件化的同时按需加载 JS；
• 内置 Markdown 内容集合，新增文件即自动收录；
• 语法高亮基于 Shiki，开箱即用。

内容集合

内容集合让博客文章以 Markdown 文件形式管理。只需在 src/content/blog/ 下新增一个 .md 文件，首页与博客列表就会自动更新。

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    summary: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

星空背景

星空背景使用 Canvas 绘制粒子，配合 requestAnimationFrame 做闪烁与视差动画。

const prefersReduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReduced) {
  drawStatic(); // 尊重系统设置：只绘制静态星空
} else {
  requestAnimationFrame(loop);
}

移动端优化

在窄屏下降低粒子密度，把帧率稳定在 50fps 以上。

小结

整体下来，Astro 让「内容优先」的网站搭建变得非常轻快。