想拥有自己的页面这个念头,大概两年前就有了,但一直没动手 —— 一是不知道用什么,二是怕做不出来半途而废更丢人。
这次的转折点很无聊:有天晚上写完作业突然"今晚就干这件事",从十一点干到凌晨两点,把第一版跑起来了。之后每天晚上加一点,加着加着就成了现在这样。
下面把过程按时间顺序写一下,给也想搭站的人一个参考(主要是参考我踩的坑)。
1 · 选技术栈
最开始我想用纯 HTML + CSS,简单粗暴。后来看到一个叫 Next.js 的东西,"文件夹就是 URL"这个设定让我觉得很对味,就决定试一下。
找了一圈 boilerplate(模板项目),选了一个看起来最干净的 —— 这是个关键决定,因为一旦开始改,后面换的成本会越来越高。
选它的原因:代码结构清楚、有暗色模式、有动效变量、组件是分层的(atoms / molecules / organisms)。不选的原因:有些组件用了我看不懂的库,我得先学。
2 · 跑起来第一步
npm install
跑了五分钟,我以为卡住了,其实没卡。
npm run dev
启动之后,打开 localhost:3000,看到那个默认页面的时候 —— 真的有一种"诶,它活了"的感觉。
然后我做的第一件事不是加东西,是删东西。把首页那张花里胡哨的着陆页删掉,换成一行大字"Hello World"。看到那行字出现在自己屏幕上的那一刻,我就知道这事能继续。
3 · 踩过的坑
几个当时让我非常头大的问题,如果你也遇到了,希望对你有帮助:
① 构建报错看不懂
第一次跑 npm run build 时弹了一堆英文,完全看不懂。后来发现是某个组件用了一个叫 Slot 的东西,在静态预渲染时会报错。绕过办法:在那个页面上加一句 export const dynamic = "force-dynamic";,让构建器跳过静态生成,改成请求时再渲染。
② Git push 一直失败
不是代码问题,是网络问题。GitHub 在我这边访问时好时坏,有时候 push 直接超时。后来学会了循环重试,配合短一点的 sleep,基本都能成。
③ 暗色模式颜色不对
第一次改 @theme 的时候用的是 @theme 不是 @theme inline。结果浅色正常,一切到暗色就乱了 —— 因为暗色的 :root 覆盖没生效。改成 @theme inline 之后立刻好了。
④ import 写错字母
page.tsx 写成 page.ts 不报错 —— 它只是不再是路由。这种"静默失败"最可怕,后来每次加新页面我会专门检查一遍文件名。
4 · 现在长什么样
截至写这篇的时候,网站长这样:
- 主页是个人博客风,有 hero + 几个内容区 + 右侧文档栏
- 三篇文档,分别讲初三复盘、番组推荐、和这篇搭站笔记
- 页脚有联系方式,改一处全站跟着变
- 浅色 / 暗色跟随系统,动效有 reduced-motion 兜底
接下来想做的事:加一个 RSS 源、把一些老文搬上来、学一下怎么部署到云(不只是一台电脑)。
5 · 给也想搭站的人
我不是专业做前端的,只是喜欢折腾,所以下面的建议仅供参考:
- 不要追求完美开局。 先把"Hello World"跑起来,再一点点加东西。中间觉得丑是正常的,改着改着会顺眼。
- 善用搜索引擎。 报错信息直接复制粘贴,大概率已经有人问过同样的问题。
- commit 要频繁。 改坏了一次
git revert就能回到上一个好的版本,心理压力会小很多。 - 别直接抄大项目。 抄比自己写还累 —— 看不懂的地方比写出来的地方多。找一个最小的、能跑起来的版本起步。
- 做完一件事就 push。 不然你本地积累一大堆未推送的 commit,最后想推的时候会更慌。
#搭站 #Next.js #折腾
— end —