搭博客时，很容易一开始就想到很多功能：评论、搜索、统计、管理后台、各种精致的动画。把清单写完，反而不知道先从哪里开始。

这个版本先把范围收小：一个首页，一个文章列表，一套舒服的阅读页面。

本文为示例内容，用来展示标题、列表、表格和代码块的排版。

先把内容放进去

首页可以展示一点个人信息，最近写下的文章，以及几样喜欢的东西。内容明确以后，页面结构也会更容易确定。

我把这个小站分成四个入口：

入口 放什么 希望解决什么问题
首页 个人介绍、最近文章、精选收藏 让来访者知道这是怎样的空间
文章 分类和完整文章列表 找到想读的内容
收藏夹 书、音乐灵感、工具与链接 留下喜欢的东西
关于 开场白和联系方式 认识这个空间背后的人

用一个配置文件管理个人资料

把会经常修改的内容集中起来，后续就不需要为了改一句简介，在页面文件里来回寻找。

export const site = {
  name: '你的名字',
  tagline: '写代码，也记录生活。',
  description: '记录那些值得留下的小事。',
  email: '',
};

在这个项目里，个人信息与收藏放在 src/data/site.ts，文章放在 src/content/blog/。

一篇文章的开头

文章前面的信息决定标题、日期、分类和摘要。正文仍然可以像普通笔记一样写。

---
title: "今天弄明白的一件小事"
description: "用一两句话概括这篇笔记。"
date: 2026-11-06T02:00:00Z
category: "工具笔记"
tags: ["记录", "学习"]
minutes: 3
---

把交互留给需要它的地方

页面里有一些很小的交互：切换外观，搜索文章，按分类筛选收藏。它们不需要让每一张卡片都变成一个复杂的应用。

可以先把页面做好，再为这些按钮加上明确的行为。

让手机也舒服

同一套布局，在手机上需要换一种排列方式：

  • 个人介绍变成横向卡片，让内容更紧凑。
  • 主导航移到屏幕底部，方便单手操作。
  • 文章目录在窄屏上收起，正文拥有完整宽度。
  • 卡片里的文字尽量保持可读，不把整个桌面布局简单缩小。

留给以后的小清单

先替换示例内容，再逐步补充真正需要的功能。每次更新都解决一个具体的问题，这个博客就能保持轻盈。

下一步，也许只是写下第一篇真正属于自己的文章。