从零搭建一个轻量、可持续的个人网站

示例文章：用于展示本站的 MDX 排版与博客能力，不代表作者的真实项目经历。

先想清楚，网站要承载什么

个人网站可以是一个长期生长的数字空间：文章负责记录思考，作品集介绍项目，实验室则让访问者亲手体验。把这三种内容的职责分开，会让导航和后续维护都更清晰。

第一次开发不必把所有想法塞进去。先建立一个完整闭环：能写文章、能展示项目、能运行一个实验，然后再根据真实需求扩展。

为什么选择静态生成

文章和项目介绍通常不需要在每次请求时重新计算。构建时生成 HTML，可以把页面直接交给 CDN 分发，同时减少后端维护工作。

静态并不等于没有交互。主题切换可以用原生 JavaScript 完成；需要持续绘图和状态管理的粒子实验，则可以放进独立 React 岛屿，让它只在需要的页面加载。

// 在构建时查询内容，草稿不会进入公开列表。
import { getCollection } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => !data.draft);
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

让内容拥有清晰的结构

与其在首页手写三张文章卡片，不如为文章定义统一的字段。标题、摘要、发布日期和标签都属于内容，而卡片的留白、边框与布局属于界面。

这样的分离带来两个好处：一篇新文章只需要新增一个文件；不同页面可以使用相同数据，而不必复制维护。

保留足够简单的边界

• Markdown / MDX 负责正文与内容元信息。
• Content Collections 在构建时检查字段。
• Astro 页面组织内容和布局。
• React 只处理确实需要状态的交互。

把维护体验也当作产品

视觉设计解决第一次访问的感受，工程设计决定半年后还能不能轻松更新。好的默认值、可重复的构建命令与明确的目录说明，都属于网站体验的一部分。

发布前还需要确认正式域名、替换示例个人信息，并检查手机上的导航、代码块和图片。一次真实的浏览器检查，往往能发现类型检查无法发现的问题。

下一步

先写一篇真正想分享的文章，再回头观察哪些功能确实有用。让需求来自使用，而不是来自一张永远填不完的功能清单。