K
所有文章
#个人网站 #Astro #前端

为什么我又重建了一次个人网站

· 1 分钟

每隔一段时间，我都会觉得现在的个人网站不够好，然后决定推倒重来。这次也不例外。

起点：一个笔记仓库

这个网站最初只是一个 Markdown 文件的集合——C++、AI、Python 的面试八股整理。纯文字，没有任何网站。后来用 Astro 搭了一个文档站，跑起来，能用。

但「能用」和「好用」之间有很大的距离。

我想要的是一个能代表我这个人的地方，不只是一堆技术笔记的容器。

目标重定义

我给自己列了三条标准：

  1. 一眼能看出「我是谁」 — 首屏要有个人品牌，不能是冷冰冰的文档首页
  2. 内容越积越多 — 博客文章、项目、笔记，都要有地方放
  3. 炫酷但不浮夸 — 视觉上要有记忆点，但 Lighthouse 不能掉到 90 以下

技术选型：继续 Astro

Astro 5 的内容集合（Content Collections）对我来说是最合适的：

  • Markdown / MDX 一等公民
  • 构建时全静态，不依赖任何后端
  • View Transitions 原生支持，页面切换丝滑
  • 整个 JS 预算保持在 < 50KB

唯一新增的依赖是 @astrojs/mdx，让博客文章可以内嵌组件。

最大的改动：路由重组

原来笔记在 /cpp/、/ai/ 等顶级路由下。改造后迁到 /notes/cpp/ 等子路径，把顶级路径留给博客和项目。

路由层面只需要改一个函数 getArticleHref()，加上 /notes/ 前缀，其他链接（侧边栏、搜索索引、站点图）全部自动跟着更新。加上 _redirects 做 301，旧链接不失效。

视觉设计的关键决定

全局噪点纹理是我觉得最值得的改动。用 SVG feTurbulence 生成一层透明度 3% 的噪点叠在背景上，消除了纯色背景的「塑料感」。代码：

/* 在 body 上用 ::after 叠一层 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.03;
  z-index: 9999;
}

效果微妙但真实。

Aurora Hero 背景：多层径向渐变 + mix-blend-mode: screen + 鼠标跟随。核心是用 CSS 变量驱动渐变中心：

document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--aurora-x', `${x}%`);
  document.documentElement.style.setProperty('--aurora-y', `${y}%`);
});

JS 最少，效果最好。

还没做的事

  • About 页的技能雷达图（SVG 画起来比想象的麻烦）
  • 评论系统（giscus 接 GitHub Discussions）
  • 图片优化（astro:assets 还没全量接入）

但网站已经上线了。「先上线，再完善」永远是比「等完美了再上」更好的策略。

如果你也在用 Astro 搭个人站，欢迎看看这个项目的介绍页。

#个人网站 #Astro #前端