我的网站重生了

重生

在创建这个网站期间, 我正在做一个全屏幕的主题切换器, 那是突然想到的灵感, 打算赶紧将它实现出来.

对于这个主题切换器, 我的预想是: 此组件具有三元的主题, 亮色, 暗色, 自动.

初始情况下, 让它位于分割视图 (自动主题), 左半侧是亮色主题, 右半侧是暗色主题, 在互动某个主题时, 将此主题拓展到全部宽度, 再次互动, 返回到分割视图.

但光有主题切换器显得太单薄了, 甚至看不出明显的切换效果. 于是我把个人介绍放在了下方, 让它随主题一起变化.

这看起来就像是个人网站, 我顺势把它正式改成了个人网站.

技术选型

新的网站使用 Next.js (实际上旧的网站也是使用的它), 因为它是我接触到的第一个前端框架.

当年搭第一个网站时, 我对前端还非常陌生, Next.js 版本是 12, 还未支持 app 路由, 所有的页面都在 pages 目录下.

接触 Next.js 之前, 我很少写 JavaScript, 对 TypeScript 更是不了解, 算是停留在 HTML 和 CSS 的小白.

虽然也接触过 React, 但对 JavaScript 都不太了解的我, 对 JSX 语法也很困扰, 当时很多教程还停留在 React 类组件, 第一次写函数式组件, 也是在 Next.js 里.

Next.js 文档中很多代码都提供 TypeScript, 也是通过 Next.js 开始 TypeScript 学习道路.

搭建流程

源代码是通过 create-next-app 创建的, 启用 Tailwind CSS, TypeScript 和路径别名, 这是创建主题切换器时所做的.

组件方面, 少部分使用了 Shadcn-ui 和我以前制作的 Godown 库, 大部分都是重新编写的.

文档方面, 我选择了 Fumadocs 提供文档页面, 我也是在计划添加文档时才了解这个库, 它提供了不少有用的封装, 省得我自己去处理 Markdown 文件, 很方便.

部署方面, 此网站目前具有两个部署源, 一个位于 Vercel, 一个位于 GitHub Pages. 后者无法部署后端程序, 所以那边用的是导出输出的静态构建 (SSG).

遇到的问题

在新网站构建过程中, 我碰到了一个挺隐蔽的问题, 这个问题发生在独立输出的部署期间.

我认为几乎没人会使用独立输出: 要么使用导出输出, 部署静态页面, 要么使用默认构建, 运行在一般主机上.

独立构建允许你使用 node .next/standalone/server.js 启动 Web 服务器. 我还没有研究过它和默认构建有什么区别.

于是我开始尝试这种输出配置, 并很快遇到了问题: 本地的 react, react-dom, next, typescript 全都变成空目录了!

这个问题还是经过多次尝试之后才确定的, 我一直以为是自己误清空了包, 或者包管理器的缓存出现了错误. 我必须删除本地缓存并重新下载包.

在连续经历三次这种情况后, 我发现: Next.js 会在清空 .next 目录的时候一并清空本地包, 并且 .next 目录中存在一些符号链接, 这些符号链接就指向被清空的包.

很明显, Next.js 在处理 清空输出目录或者删除文件时出了 Bug.

还好, 我很快找到了错误位置并修复了它, 提交了 pull request 并得以合并到 canary.

作为一个技术菜鸟, 给顶级库做出贡献, 虽然只是非常小的改动, 也让我非常激动.

至此以后, 不会再有哪个倒霉蛋在运行构建时被 next 清空本地包了.

之后的计划

我在运营方面是绝对的新手, 甚至不知道这个网站会不会像之前的一样过不久就被废弃掉, 但我会尽量多得更新内容, 把它慢慢填充起来.

如果你有有关此网站所提到的内容有任何困扰, 你可以通过 Header 里的联系模块找到与我取得联系的链接, 欢迎提问任何问题.