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)自动切换为单色块滑动门——从一侧滑入覆盖,新页加载后从另一侧滑出。
写在最后
这个博客还会继续生长,就像侘寂所倡导的——接受不完美,拥抱变化,缓慢但坚定地向前。
感谢你的来访,愿你在此停留片刻。
一期一会。