我的个人网站重构之旅

作为一个开发者，个人网站是展示自我技术栈和审美的最佳窗口。最近，我花了一些时间对我的个人网站进行了彻底的重构。在这篇文章中，我将分享为什么我决定重构，我的技术选型思考，以及在过程中遇到的一些挑战和解决方案。

为什么要重构？

我的旧网站是基于 Docsify 构建的。Docsify 是一个非常优秀的文档生成工具，轻量且易用。但随着我对网站定制化需求的增加，我发现 Docsify 存在一些局限性：

• SEO 不友好： 默认情况下，Docsify 是单页应用（SPA），内容通过 JavaScript 动态渲染，这对搜索引擎的抓取不太友好。
• 加载性能： 首次加载需要下载解析 JS 才能显示内容，首屏时间（FCP）不够理想。
• 布局限制： Docsify 的主题定制能力有限，很难实现复杂的个性化布局。

技术选型：回归基础

在考察了 Next.js, Gatsby, Hugo 等现代静态站点生成器（SSG）后，我做出了一个“复古”的决定：使用原生 HTML, CSS 和 JavaScript。

原因很简单：

1. 极致的性能： 没有比纯 HTML 更快的了。没有 hydration，没有复杂的运行时。
2. 完全的控制： 每一行代码都是我写的，我可以精确控制 DOM 结构和样式。
3. 学习与探索： 抛开框架的抽象，重新审视 Web 标准的原生能力（如 CSS Variables, Grid, ES Modules）。

重构亮点

1. 响应式设计与暗色模式

我使用了 CSS Variables 来定义主题色。通过简单的 JS 切换 `html` 标签上的 `data-theme` 属性，即可实现秒开的暗色模式切换，并且没有闪烁问题。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

2. 国际化 (i18n)

为了支持中英双语，我采用了目录结构区分语言的方式（`/` 和 `/en/`）。这种方式对 SEO 最为友好，配合 `hreflang` 标签，可以让搜索引擎准确识别不同语言版本。

3. 无构建步骤

现在的开发流程非常简单。没有 `npm install`，没有 `npm run build`。修改完代码，直接推送到 GitHub，GitHub Pages 就会自动部署。这种“所见即所得”的开发体验让人感到无比轻松。

结语

这次重构让我重新找回了写代码的纯粹乐趣。有时候，少即是多。在这个框架横行的时代，回归原生 Web 开发，不仅是一种技术选择，更是一种对简单、高效的追求。