从 Gmeek 到我的个人博客：一次不断推翻自己的建站记录
最开始，我只是想拥有一个能写东西的个人博客。
后来，我开始改颜色、改布局、加动画、加页面、加交互。
再后来，我发现自己已经不是在“改博客”，而是在重新做一个网站。
一、起点：我只是想快速拥有一个博客
最开始，我使用 Gmeek 搭建个人博客。
我选择它的原因很简单：足够轻量。
Gmeek 把 GitHub Issues 当成文章管理后台，我不需要数据库，也不需要单独部署 CMS。
写一篇文章，本质上就是新建一个 Issue。
修改文章，就是修改 Issue。
GitHub Actions 会自动完成后续构建。
对于当时的我来说，这已经很好用了。
但问题也很快出现。
我不满意默认的外观。
不是 Gmeek 不好，而是它更像一个“可以直接使用的博客框架”，而我想要的是一个真正属于自己的个人网站。
于是，我开始折腾。
Part Ⅰ · 博客演化史
二、第一次改造：从研究别人的 Gmeek 开始
一开始，我其实并不知道应该怎么改。
所以我开始在 Gmeek 社区、GitHub Issues 和其他个人博客里寻找创意。
我看过很多别人对 Gmeek 的改造，包括：
- Apple 风格界面
- 卡片式文章列表
- 毛玻璃效果
- 深色 / 浅色主题
- 动态渐变背景
- 标签颜色
- 卡片悬浮动画
我也参考了飞鱼等个人博客的布局和功能设计。
这个阶段，我主要做的事情其实是：
看别人是怎么改的，然后想办法把我喜欢的部分组合到自己的博客里。
那时候的修改还比较克制。
三、JSON 阶段：什么东西都往 config.json 里塞
最初我的修改几乎全部集中在：
config.json比如：
- 站点名称
- 副标题
- 头像
- 页面
- 主题
- 自定义 CSS
- 自定义 JavaScript
- 第三方资源
- 导航入口
Gmeek 本身提供了不少可以注入样式和脚本的位置，所以一开始这种方式非常方便。
问题是：
功能越多，JSON 就越难维护。
一段 CSS 塞进去。
一段 JavaScript 塞进去。
再加一个库。
再加一个动画。
再加一个功能。
慢慢地，配置文件已经不再只是“配置文件”。
它开始承担页面逻辑。
这也是第一次让我意识到：
配置和程序逻辑不是一回事。
四、第一次重要重构：config.json → CSS + JS
于是，我开始把真正的样式和功能拆出去。
后来整个博客逐渐形成了：
config.json
enhance.css
enhance.js
static/
docs/
backup/这样的结构。
后面还加入了：
manifest.webmanifest
sw.js以及单独的静态资源目录。
这应该算是我建站过程中第一次真正意义上的“架构变化”。
以前是：
Gmeek
↓
config.json
↓
改一点样式后来变成：
Gmeek
│
├── 内容系统
│
├── config.json
│
├── enhance.css
│
├── enhance.js
│
└── static从这一刻开始，我已经不仅是在使用 Gmeek。
我是在 Gmeek 上面再构建一个自己的前端系统。
五、功能开始膨胀
然后事情开始逐渐失控。
我开始觉得：
既然 CSS 和 JS 都拆出来了，那是不是可以再多做一点？
于是，一个功能接着一个功能出现。
我曾经做过的东西包括：
现在回头看，非常有意思。
当时几乎每隔一段时间，我都会想：
“这里还能不能再加点什么？”
六、文章列表也被我反复推翻
首页文章列表应该是我修改次数最多的地方之一。
Gmeek 原本的文章列表比较简单。
我先尝试：
普通列表后来改：
矩形卡片后来又觉得普通矩形太无聊。
于是继续尝试：
网格
多列
卡片
年份分组
骨架屏
不同尺寸
悬浮动画我还尝试过更加明显的视觉透视，让中间卡片保持矩形，两侧卡片采用平行四边形或者倾斜布局，让整体看起来更像一个有纵深感的展览空间。
到最后甚至做了：
Grid / List两种显示方式切换。
有时候改完觉得很好。
第二天又觉得不对。
继续推翻。
七、我开始研究“网站的感觉”
到了后面，我关注的已经不只是：
这个按钮好不好看？
而是：
整个网站应该给人什么感觉？
这个时候我开始大量参考其他网站。
其中一个比较明显的方向就是：
GTA 6 官网一类的高视觉冲击页面。
我很喜欢那种：
强配色
大面积背景
强动画
沉浸式视觉所以我的博客开始往：
Cyberpunk
方向发展。
八、赛博朋克阶段
这个时期应该是博客视觉最复杂的时候。
我加入了：
- 赛博背景
- 粒子
- 星空
- 动态颜色
- 城市
- 光效
- 鼠标互动
- 音效
- 多主题
后来粒子系统甚至分成了两种：
Classic
Cyber City其中 Cyber City 不是简单的背景图片。
我曾经尝试做：
多层城市建筑
3D 天际线
粒子引力
动态光效我开始把网站当成一个视觉实验场。
不是单纯换颜色，而是尝试让整个网站拥有自己的世界观。
九、博客开始变得太“满”
当你只有三个功能的时候：
导航非常简单。当你有十几个功能的时候：
导航开始成为问题。我当时有：
Home
About
Book
Favorites
Gallery
Archive
Chronicle
Stock
Link
Music
Search
Theme
Settings
...全部摆出来显然不现实。
于是我开始不断修改导航。
十、导航演化：顶部 → 折叠 → 抽屉
最开始：
顶部导航后来：
顶部 + 快捷按钮后来：
折叠菜单再后来：
Drawer 抽屉但是抽屉里面又开始塞很多东西。
到后面我甚至开始考虑：
某些入口其实没有必要重复出现。
比如 Chronicle、Book、Favorites 这些页面，如果在其他位置已经有入口，就没必要再次全部放进导航。
这其实是我后来才慢慢意识到的一件事：
导航不是入口越多越好。
十一、从“博客”变成“个人数字空间”
另外一个变化是：
最开始网站只有文章。
后来出现了越来越多独立页面。
包括：
about
gallery
book
favorites
archive
stock
link
chronicle这时候，它已经不太像传统意义上的博客了。
它开始更像：
Personal Digital Space
一个属于自己的数字空间。
十二、Archive 与 Chronicle
其中我很喜欢两个页面。
Archive
Archive 是文章归档。
它负责解决：
我以前到底写过什么？
所以后来我给它加入了：
- 时间轴
- 年份
- 日期
- Calendar
- 分类
Chronicle
Chronicle 则不太一样。
它不是传统博客文章。
我想让它记录：
今年去了哪里
看了什么
读了什么
发生了什么最后我甚至为它建立了独立的数据结构。
它更像是我的个人编年史。
这其实代表我的博客开始从：
写文章逐渐变成：
记录生活十三、文章阅读体验也被我重做了一遍
我后来发现，首页再漂亮，如果文章阅读体验很差，博客依然不好用。
所以我又开始改文章页面。
包括：
- 文章目录
- TOC 滚动监听
- 阅读进度环
- 返回顶部
- 图片灯箱
- macOS 风格代码块
- 代码行号
- 上一篇 / 下一篇
- 系列文章导航
- 页面滚动记忆
- 页内搜索
- 阅读偏好
- 字体和透明度调整
- 深浅模式适配
这时候，我已经开始从“首页设计”转向“完整阅读体验”。
十四、移动端也开始成为问题
一开始我几乎只看电脑。
后来才发现：
电脑上看起来不错的导航和布局，到了手机上可能完全不能用。
所以后来又加入：
- 手机端汉堡菜单
- 响应式布局
- 不同屏幕宽度断点
- 移动端导航
- 卡片重排
- 触摸交互
- 文章宽度适配
- 工具栏位置调整
这也让我意识到：
一个网页不是只设计一次，而是要在不同设备上重新考虑一次。
十五、功能越多，我越不满意
这是一个有点讽刺的地方。
最开始：
我觉得 Gmeek 太简单。
所以不断加东西。
后来：
我觉得自己的博客太复杂。
于是又不断删东西。
赛博城市。
粒子。
动画。
主题。
设置面板。
导航。
文章样式。
鼠标效果。
背景。
音乐。
越来越多。
直到有一天我发现：
我打开自己的博客，需要先理解自己的博客。
这显然有问题。
十六、于是我做了 Minimal
我不想完全删除 Cyber。
因为它代表了我很长一段时间的折腾。
但是我也确实越来越喜欢：
简单
安静
克制
留白
内容优先所以最后我没有强迫自己做选择。
而是做了两套系统：
Cyber
Minimal也就是说：
Minimal 已经不是一套皮肤。
而是一套独立的视觉系统。
Cyber 可以继续保留视觉冲击。
Minimal 则负责安静阅读。
最后我干脆让两个系统共存。
十七、设置页开始变成一个“系统控制中心”
随着功能越来越多，我又遇到了一个问题：
这些功能总要有地方控制。
于是设置页也越来越复杂。
包括：
- 深浅模式
- 主题切换
- Cyber / Minimal
- 粒子开关
- 音效
- 背景
- 动画
- 阅读设置
- 页面透明度
- 文章样式
- 鼠标效果
- 音乐
- 特效
设置页面逐渐从一个简单的主题按钮，变成了网站的控制中心。
但这也进一步加重了复杂度。
十八、一次意外：GitHub 出现问题
因为长期频繁修改：
Issue
Config
CSS
JS
Actions站点会不断触发 GitHub Actions。
后来 GitHub 账号或者 Actions 出现了限制。
对于当时的我来说，结果很简单：
原来的工作流被打断了。
我只能开始考虑迁移。
十九、迁移
我当然不想就这样停下来。
所以我开始迁移。
新的 GitHub。
新的仓库。
新的 Pages。
重新部署。
重新同步文章。
重新调整 Actions。
再把旧博客的数据一点一点搬过去。
本来以为迁移结束就是终点。
结果它反而变成了另一次重构的开始。
二十、我遇到了 ungetsu.net
后来我看到了：
ungetsu.net它的页面让我重新开始思考：
一个个人博客一定要有这么多“UI 组件”吗？
我开始研究它的：
- 页面结构
- 留白
- 导航
- 信息层级
- 字体
- 阅读区域
- 页面节奏
- 内容组织
然后尝试重新实现。
我分析它的页面结构、视觉语言、信息架构和交互逻辑，再一点一点改造成适合自己内容体系的版本。
这个过程和以前不太一样。
以前我更多是在：
加功能。
这一次我开始思考：
哪些东西可以不要。
二十一、一个非常重要的决定：保留 Gmeek
虽然前端发生了很大变化，但是我最后并没有放弃 Gmeek。
因为我发现：
Gmeek 最有价值的部分，其实不是默认界面。
而是：
GitHub Issue
↓
内容管理
↓
Action
↓
静态页面这一套内容生产流程。
所以最后我的思路变成：
Gmeek = 内容层
自己的 CSS / JS / UI = 表现层
文章依然可以通过 Issue 更新。
但是用户看到的前端，可以完全是另一套东西。
二十二、从“改主题”到“重做前端”
如果回头看整个过程，其实有一个非常明显的变化。
最开始我做的是：
修改主题后来变成：
修改 Gmeek再后来变成：
在 Gmeek 上搭建自己的增强系统最后则逐渐接近：
让 Gmeek 只负责内容
自己负责整个前端这也是整个博客演化里最重要的一条线。
二十三、我逐渐开始保留“备份”和“版本”
因为推翻次数太多，我后来开始保留：
backup/以及不同阶段的说明文档。
这些文件现在看起来有点乱。
但它们实际上已经变成了博客发展的考古记录。
里面记录着：
- 曾经存在的功能
- 曾经使用过的布局
- 被删除的粒子系统
- 以前的主题
- 不同版本的 CSS
- 不同版本的 JS
- 不同阶段的设计思路
很多我现在已经忘掉的东西，反而还能从这些文件里重新找到。
二十四、个人博客永远不会真正“完成”
以前我总觉得：
把这个功能做好，博客应该就完成了。
后来发现并不会。
你会继续看到新的设计。
继续发现新的问题。
继续改变自己的审美。
甚至你自己也会改变。
所以现在我不再认为它是一个“完成品”。
它更像：
一个长期实验。
Part Ⅱ · 现在这个博客怎么工作
二十五、整体结构
如果只看现在的结构，大概可以分成四层：
Gmeek
│
├── 内容层
│ └── GitHub Issues
│
├── 配置层
│ └── config.json
│
├── 表现层
│ ├── enhance.css
│ └── enhance.js
│
└── 资源层
└── static二十六、内容系统
普通文章使用：
GitHub Issue创建 Issue：
标题 = 文章标题
正文 = Markdown
Label = 分类之后交给 GitHub Actions 构建。
这也是我一直没有放弃 Gmeek 的原因。
因为对于个人博客来说：
用 GitHub Issues 写文章真的很方便。
二十七、config.json
config.json 现在主要负责：
网站基本信息
域名
单页
图标
主题
外链
Gmeek 设置
脚本加载
CSS 加载比如：
about
gallery
book
favorites
archive
stock
link
chronicle这些页面入口都可以从配置层进行管理。
相比最开始把所有逻辑都写进 JSON，现在它更接近真正的“配置文件”。
二十八、enhance.css
enhance.css 主要负责：
Typography
Layout
Navbar
Cards
Article
Code
Table
Theme
Responsive
Animation简单理解：
所有“看起来是什么样”的东西，大部分都在这里。
包括：
- 字体
- 页面宽度
- 文章排版
- 卡片
- 导航
- 抽屉
- 深浅模式
- Cyber
- Minimal
- 响应式
- 动画
- 表格
- 代码块
二十九、enhance.js
enhance.js 主要负责交互。
例如：
主题
菜单
搜索
文章目录
滚动进度
图片灯箱
页面切换
Archive
Chronicle
Favorites
鼠标效果
音乐
文章记忆
移动端导航
页面初始化它现在已经不只是一个简单的增强脚本。
它更像整个博客前端系统的核心控制层。
三十、static
static 负责存放静态资源。
比如：
背景图
首页图
卡片图
图标
照片
音乐
其他资源相比把图片散落在各种外链中，我后来越来越倾向于自己统一管理。
这样以后修改、迁移和备份都会方便很多。
三十一、Archive
Archive 主要用于整理文章。
它解决的是：
文章太多以后怎么找我希望它更像一个真正的档案页，而不是单纯的一列标题。
所以后面加入过：
- 时间线
- 年份
- 月份
- 日期
- 日历
- 分类
- 搜索
Archive 负责整理过去。
三十二、Chronicle
Chronicle 负责记录生活。
它和普通文章不同。
它更强调：
时间
事件
经历
书影音
地点
人生记录它更像一个个人时间数据库。
Archive 是：
我写过什么。
Chronicle 是：
我经历过什么。
三十三、Book
Book 页面最开始只是想做一个书单。
后来我希望它更接近一个真正的个人书架。
不仅可以展示书，还可以把书和我的文章、笔记、读后感连接起来。
它不只是：
书名列表而应该慢慢变成：
个人阅读记录三十四、Gallery
Gallery 负责照片和视觉内容。
我不希望所有东西都必须写成长文章。
有些东西其实只需要：
一张照片
一个时间
一个地点
一句话就够了。
所以 Gallery 也是我想长期保留的页面。
三十五、Favorites
Favorites 用来保存：
喜欢的网站
文章
工具
作品
资料
链接它更像一个私人收藏夹。
相比浏览器收藏夹，我更希望这些东西能成为自己网站的一部分。
三十六、Stock
Stock 是我后来加入的一个独立页面。
因为我本身也会关注投资、市场和个人财务。
所以我想把这部分内容从普通博客文章里独立出来。
未来它可以承载：
投资记录
市场观察
资产记录
复盘
数据三十七、Link
Link 用来整理：
友情链接
个人项目
其他网站
外部页面
自己的子站随着网站越来越多，Link 其实也承担了一个“入口中心”的作用。
三十八、Cyber 与 Minimal
现在我最希望保留下来的，是这两个系统。
Cyber
Cyber 更偏：
视觉
动画
氛围
实验
交互Minimal
Minimal 更偏：
内容
阅读
留白
安静
效率它们不是互相替代。
而是满足两个完全不同的使用状态。
有时候我想：
看一个很有氛围的网站。
有时候我只想：
安静地读文章。
所以我选择都保留。
三十九、我最后留下的一个原则
折腾这么久以后，我现在反而越来越重视一件事情：
内容应该比界面重要。
动画很好。
粒子很好。
3D 很好。
赛博朋克很好。
Minimal 也很好。
但如果有一天：
用户只记得网站很酷，却完全不知道我写了什么。
那博客其实失败了。
所以现在我希望我的网站最终能做到：
远看有风格
近看有细节
使用时不打扰
阅读时只剩内容四十、整个博客的演化
如果把整个过程压缩成一条线，大概就是：
使用 Gmeek
↓
不满意默认外观
↓
研究其他 Gmeek 博客
↓
修改 JSON
↓
加入 CSS
↓
加入 JS
↓
重做文章卡片
↓
加入主题
↓
加入动画
↓
加入粒子
↓
加入赛博城市
↓
重做导航
↓
顶部导航
↓
折叠导航
↓
抽屉
↓
加入大量单页
↓
重做文章阅读
↓
加入 Archive
↓
加入 Chronicle
↓
功能越来越多
↓
设置越来越复杂
↓
感觉网站太杂
↓
制作 Minimal
↓
Cyber / Minimal 双系统
↓
GitHub 出现限制
↓
迁移仓库
↓
重新部署
↓
研究 ungetsu.net
↓
重新思考布局
↓
减少不必要的功能
↓
保留 Gmeek 内容系统
↓
重新构建前端写在最后
最开始，我只是 Fork 了一个 Gmeek。
后来：
改 JSON
↓
改 CSS
↓
改 JS
↓
改布局
↓
改导航
↓
改文章
↓
做粒子
↓
做城市
↓
做主题
↓
做页面
↓
觉得太复杂
↓
做 Minimal
↓
迁移 GitHub
↓
重新研究别的网站
↓
重新设计绕了一大圈以后，我反而又回到了最开始那个问题：
一个博客究竟需要什么？
我现在的答案是：
一个让我愿意一直写下去的地方。
技术只是手段。
设计也是手段。
真正重要的，大概还是那些我想留下来的东西。