从零搭建一个杂志风个人博客

距离上一次认真折腾博客已经过去很久。这一次，我想把它做成一本「个人杂志」——不是套模板，而是真正花心思在排版、留白和阅读节奏上。

为什么是 Astro

博客的本质是「内容 + 排版」。它不需要一个庞大的前端运行时，更需要的是：

• 内容优先，Markdown 直接写
• 构建产物是纯静态文件，服务器只挂一个 nginx
• 模板足够灵活，能实现杂志感的排版

Astro 恰好满足这三点。它的内容集合（Content Collections）用 Zod 校验 frontmatter，写错字段构建时直接报错，比什么都省心。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    featured: z.boolean().default(false),
  }),
});

export const collections = { posts };

静态搜索：Pagefind

全文搜索最怕的是「为了搜索而引入后端」。Pagefind 解决了这个问题——它在构建时把站点内容做成静态索引，浏览器端用一小段 JS 就能搜。

npm run build
npx pagefind --site dist

构建后，dist/pagefind/ 下会多出索引文件。搜索体验和 Algolia 那种云服务几乎没区别，但零成本、零隐私风险。

RSS：仍然重要

很多人以为 RSS 死了，其实它只是回到了它该在的位置——给那些愿意主动订阅的人。@astrojs/rss 让它变得几乎没有成本。

排版即设计

杂志感的秘诀不在特效，而在克制：

• 衬线标题 + 无衬线正文，形成对比
• 大量留白，让文字有呼吸感
• 一个强调色，点到为止
• 编号与卷号，给文章一种「期刊」的连续感

这本杂志刚创刊，后面的内容，我会慢慢写。