今年夏天，我用了一个不太常规的方式搭建了这个博客——通过 Codex（GPT-5）全程对话协作，从初始化到配置、UI 打磨、再到 Git 版本管理，每一步都是人与 AI 共同完成的。

博客

一、项目初始化

一切从一句"帮我用 Hugo 搭个博客"开始。

选定技术栈

• Hugo — Go 语言编写的静态站点生成器，构建速度极快
• LoveIt — Hugo 生态中最优雅的主题之一，支持暗色模式、搜索、多语言
• Codex — 作为"结对编程搭档"，一路配置、调试、重构

目录结构

遵循 Hugo 标准目录约定，没有额外魔改。主题通过 Git Submodule 管理，保证了可独立更新。

二、配置与自定义

中英双语

配置了中文（默认）和英文两套界面，文章支持中英双语版本，菜单、页脚、搜索等组件全部跟随语言切换。

搜索功能

使用 Fuse.js 作为搜索引擎——纯前端、无外部依赖、无需额外服务。

暗色模式

默认 auto 模式跟随系统偏好。不过发现了一个 bug：从暗色切亮色只需 1 次点击，但从亮色切暗色需要 2 次。排查发现是主题的切换逻辑缺陷——auto → light → dark 的循环中，auto 和 light 在亮色系统上视觉一致，第一次点击"无效"。

修复方式：在项目 assets/js/theme.js 中覆盖主题的切换方法，当从 auto 出发时，直接跳到当前外观的反面。

三、UI 打磨

这一阶段花了最多精力，也是 Codex 最擅长的——快速迭代、即时反馈。

时间轴（文章列表）

LoveIt 没有原生的时间轴页面，自行实现了 layouts/_default/archives.html，按年份分组展示所有文章。

分类与标签

引入了两处改进：

• 分类侧边栏：分类页面右侧动态列出全部分类，方便快速导航
• 标签云：将单调的标签链接改为药丸形标签，按文章数量缩放大小，悬停变色上浮

页脚与 ICP 备案

隐藏了"Hugo & LoveIt"字样，添加 ICP 备案信息链接。

头像

上传了一张个人图片作为首页头像，点击头像跳转到文章列表页。

四、Bug 修复

暗色切换

如上所述，通过覆盖 theme.js 修复。

分类卡片不对齐

分类页面的卡片高度因文章数量不同而不一致。通过 CSS 统一最小高度 + 弹性布局修复。

图标加载问题

为 Gitee 社交链接配置图标时，发现 Simple Icons 的 CDN 前缀只在生产环境加载，开发模式下构建失败。最终使用 Font Awesome 的 fa-brands fa-gitee 解决。

五、版本管理

项目使用 Git 管理，主题作为 Submodule 引入：

git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

后续更新主题只需：

cd themes/LoveIt && git pull origin master

六、建站流程总结

整站从零到一，经过以下阶段：

写在最后

这次建站经历让我对 AI 辅助开发有了更深的理解。Codex 不是替代开发者的工具，而是一个可以持续对话、共同思考的搭档。它擅长把模糊的需求转化为可执行的方案，也擅长在迭代中快速调整——这正是建站这类"边想边做"的任务最需要的。

技术博客只是一个开始，这个协作模式可以延伸到更广阔的领域。

封面海报由 Codex 基于 Algorithmic Poster Philosophy 技能生成