# 用 Codex 建站：一次 AI 协作搭建 Hugo 博客的全程记录


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

<!--more-->
# 博客

## 一、项目初始化

一切从一句"帮我用 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 引入：

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

后续更新主题只需：
```bash
cd themes/LoveIt && git pull origin master
```

## 六、建站流程总结

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

| 阶段 | 内容 |
|------|------|
| 初始化 | Hugo 项目创建、主题克隆、基础配置 |
| 功能配置 | 搜索、暗色模式、多语言、TOC |
| UI 定制 | 时间轴、标签云、分类侧边栏、页脚 |
| Bug 修复 | 暗色切换、卡片对齐、图标加载 |
| 内容 | 示例文章、封面海报 |
| 版本管理 | Git Submodule、GitHub 推送 |

## 写在最后

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

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

---

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