GITHUB · 来自 GitHub 的文章

从零开始搭建个人博客:一个关于侘寂与代码的故事

分类 · 技术 来源 GitHub

从零开始搭建个人博客:一个关于侘寂与代码的故事

缘起

一直想有一个属于自己的空间,不依赖第三方平台,可以自由书写、折腾设计。这个念头在心里盘旋了很久,终于在某个周末付诸行动。

技术选型

选择技术栈时,我遵循了几个原则:

  • 轻量:不要重框架,维护成本越低越好
  • 可控:全部自己掌控,从服务器到代码
  • 侘寂:设计上追求克制与留白

最终选了这套组合:

层面 技术
服务端 Node.js + Express
数据库 SQLite (better-sqlite3)
模板引擎 EJS
样式 Tailwind CSS v4
部署 云服务器 + systemd
图片 自行上传托管

设计:侘寂风(Wabi-Sabi)

侘寂(Wabi-Sabi)是日本传统美学中最深层的哲学概念,崇尚不完美之美、自然衰老之雅和极致留白之禅。

整套设计围绕几个核心 token:

  • 纸张色背景:#f7f3ec / #f2ede4
  • 墨色文字:#3a3a3a
  • 苔绿点缀:#8a9a7b
  • 衬线字体:Noto Serif SC
  • 极细边框:order-[#d4cdc5]/30
  • 极慢过渡:duration-1000,仅透明度变化
  • 无阴影、无装饰:元素像石头一样静静待着

那些有意思的功能

页面转场

点击导航链接时,两块纸色幕布从两侧缓缓合拢,新页面加载后从中间向两侧展开——像翻开一本书。

探照灯

首页 Hero 的鼠标跟随暖光圆形探照灯,让打招呼的大字区域多了几分温度。

双幕布响应式

桌面端是两块幕布合拢/展开,移动端(<768px)自动切换为单色块滑动门——从一侧滑入覆盖,新页加载后从另一侧滑出。

写在最后

这个博客还会继续生长,就像侘寂所倡导的——接受不完美,拥抱变化,缓慢但坚定地向前。

感谢你的来访,愿你在此停留片刻。

一期一会。