从零搭建个人博客 - Hugo + OpenCode 实战

2 小时 25 分钟，100% AI 生成代码，我只负责执行

前言 链接到标题

作为一名 Java 工程师，我一直想要一个属于自己的技术博客。但 WordPress 太重，Hexo 配置复杂，直到我发现了 Hugo —— 用 Go 编写的静态网站生成器。

更重要的是，这次我全程使用 OpenCode（AI 编程助手）辅助开发，整个过程比想象中快得多。

核心数据：

• ⏱ 总耗时：2 小时 25 分钟
• 🤖 AI 生成代码：100%（约 800 行）
• 👤 手动编写：0 行
• ⌨️ 手动执行：约 20 条命令（全部由 AI 提供）

技术选型 链接到标题

为什么选择 Hugo？ 链接到标题

核心优势：

• 单二进制文件，无需依赖
• 构建速度极快（1000ms）
• 静态文件，安全性高

为什么选择 OpenCode？ 链接到标题

• 理解能力强：准确理解模糊需求
• 代码质量高：生成的代码基本无需修改
• 上下文记忆：记住之前的对话内容
• 多工具支持：直接执行命令、编辑文件

环境准备 链接到标题

1. 安装 Hugo 链接到标题

# 使用 winget 安装
winget install hugo

# 验证安装
hugo version

2. 创建项目 链接到标题

# 创建博客目录
mkdir myblog
cd myblog

# 初始化 Hugo 项目
hugo new site .

AI 辅助实录 链接到标题

第一步：项目初始化 链接到标题

我的提问：

“帮我搭建一个 Hugo 博客”

OpenCode 的回复：

好的！我会帮你创建一个 Hugo 博客项目。

1. 首先安装 Hugo（如果还没安装）
2. 创建项目目录
3. 选择并安装主题
4. 配置基础设置

你想使用什么主题？我推荐 hugo-coder，简洁现代，适合开发者。

我的操作：复制粘贴 AI 给出的命令

结果：3 分钟完成项目初始化

第二步：主题选择 链接到标题

我的提问：

“有没有适合程序员的 Hugo 主题？”

OpenCode 的回复：

推荐几个：

1. hugo-coder - 简洁、支持终端风格
2. hugo-geekdoc - 适合文档
3. hugo-another - 现代化设计

对于个人博客，我推荐 hugo-coder，原因：

• 配置简单
• 支持自定义终端首页
• 性能优秀

我的选择：hugo-coder

# 克隆主题到 themes 目录
git clone https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

第三步：个性化配置 链接到标题

我的提问：

“hugo.toml 应该配置什么？”

OpenCode 的回复：

需要配置：

1. 基础信息：baseURL、title、theme
2. 个人信息：author、info 数组
3. 菜单：main 菜单配置
4. 社交链接：[[params.social]]

我可以帮你生成完整的配置文件，需要吗？

结果：AI 直接生成了完整的 hugo.toml，我只需复制粘贴

baseURL = "https://example.com/"
title = "Ivan's Terrible"
theme = "hugo-coder"
languageCode = "zh-cn"

[params]
  author = "Ivan"
  description = "Personal Blog"
  info = [
    "Software Engineer",
    "Beijing / Athlone / Wollongong",
    "Java / DDD / GO",
    "Vibing and Coding"
  ]

第四步：终端风格首页 链接到标题

我的提问：

“把首页改成 PowerShell 风格，不要默认的头像”

OpenCode 的回复：

理解了！我会：

1. 修改 layouts/partials/home.html - 替换为 PowerShell 提示符
2. 更新 assets/css/home.css - 调整颜色为 PowerShell 蓝色主题
3. 隐藏默认头像

PowerShell 风格特点：

• 深蓝色背景 (#012456)
• 青色提示符 (PS C:\Users\Ivan>)
• 无圆角矩形窗口

执行过程：

• AI 读取现有文件
• AI 生成新代码
• AI 直接写入文件
• 我无需手动复制粘贴

结果：3 分钟完成，手动的话至少 30 分钟

第五步：社交图标替换 链接到标题

我的提问：

“我不希望提供任何联系，替换为 Java，Fedora 和 OpenCode 的图标”

OpenCode 的回复：

明白了！我会：

1. 创建 SVG 图标文件
2. 修改 hugo.toml 中的社交链接
3. 更新 social.html 以支持图片图标

需要我生成这些 SVG 吗？

执行过程：

• AI 生成 java.svg、fedora.svg、opencode.svg
• AI 修改 hugo.toml 配置
• AI 更新 layouts/partials/home/social.html

结果：5 分钟完成，手动需要 1 小时（找图标 + 调整尺寸）

第六步：部署规划 链接到标题

我的提问：

“如何发布到我的服务器？”

OpenCode 的回复：

需要：

1. 构建静态文件：hugo 命令
2. 服务器要求：Nginx + 域名 + HTTPS
3. 部署方式：scp 或 rsync

你的服务器是什么系统？我可以给你具体的安装步骤。

后续对话：

• AI 推荐 Nginx 而非 Apache
• AI 提供 Rocky Linux 安装命令
• AI 生成 Nginx 配置文件
• AI 指导 HTTPS 证书申请

结果：整个部署流程 30 分钟，AI 提供了完整的步骤规划

部署上线 链接到标题

服务器准备 链接到标题

我使用的是 Rocky Linux 8，安装 Nginx：

# 安装 Nginx
sudo dnf install nginx

# 启动服务
sudo systemctl start nginx
sudo systemctl enable nginx

配置 Nginx 链接到标题

server {
    listen 80;
    server_name mmtech.top;
    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

HTTPS 证书 链接到标题

使用 Let’s Encrypt 免费证书：

# 安装 Certbot
sudo dnf install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d mmtech.top

部署脚本 链接到标题

为了方便更新，我创建了一个部署脚本 deploy.bat：

@echo off
cd /d D:\blog\myblog
hugo
scp -P 2015 -r public\* root@111.228.11.247:/usr/share/nginx/html/
pause

每次发布新文章，双击这个脚本即可自动构建并上传。

踩坑记录 链接到标题

1. Git 克隆超时 链接到标题

问题：克隆主题时报错

fatal: unable to access 'https://github.com/luizdepra/hugo-coder.git':
The timeout was reached

原因：国内网络访问 GitHub 不稳定

解决：下载 ZIP 压缩包

# 手动下载 https://github.com/luizdepra/hugo-coder/archive/refs/heads/main.zip
# 解压到 themes/hugo-coder

2. Go 环境缺失（Sass 编译失败） 链接到标题

问题：使用主题模板时，AI 帮我替换配置，但构建时报错：

ERROR: failed to transform resource: TOCSS: failed to transform "scss/main.scss"

原因：主题使用 Sass，需要 Go 环境才能编译

AI 建议：

需要安装 Go 1.20+ 才能使用 Hugo 的 Sass 功能

我的决定：

“不打算安装 Go，有其他方案吗？”

AI 回滚方案：

明白了！我可以：

1. 移除 Sass 依赖，改用纯 CSS
2. 或者使用预编译的 CSS 文件

我推荐方案 1，直接创建 assets/css/home.css

最终解决：

# 在 hugo.toml 中禁用 Sass
[params]
  customCSS = ["css/home.css"]

3. HTTPS 验证失败（AI 辅助调试） 链接到标题

问题：运行 Certbot 时报错

Certbot failed to authenticate some domains (authenticator: nginx).
The Certificate Authority reported these problems:
  Domain: mmtech.top
  Type:   connection
  Detail: Timeout during connect (likely firewall problem)

我的操作：将完整错误信息发送给 AI

AI 分析：

问题是 80 端口未开放，Let’s Encrypt 无法验证域名所有权。

需要两步：

1. 服务器防火墙开放 80 端口
2. 云服务器安全组也开放 80 端口

AI 给出的修复指令：

firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp
firewall-cmd --reload

执行结果：

# 在服务器上执行后，重新运行 certbot
sudo certbot --nginx -d mmtech.top
# ✅ 成功！

耗时：5 分钟（AI 快速定位问题）

AI 辅助价值总结 链接到标题

时间节省对比 链接到标题

代码质量 链接到标题

• AI 生成代码：约 800 行（100%）
• 手动编写：0 行（0%）
• 手动执行：约 20 条命令（全部由 AI 提供）
• 需要修改的 AI 代码：不到 5%

我的实际工作 链接到标题

• ✅ 描述需求（“帮我搭建博客”）
• ✅ 确认 AI 的方案
• ✅ 执行 AI 给出的命令
• ✅ 决策（如"不安装 Go"）

核心：我更像是一个产品经理，而不是开发者

总结 链接到标题

这次经历让我深刻体会到：

1. Hugo 确实很快 - 从创建到上线不到 3 小时
2. AI 不仅仅是增强，更像是代写 - 我只需要描述需求，它负责实现。我的角色从"写代码"变成了"提需求"和"做决策"
3. 静态博客值得推荐 - 安全、快速、易维护
4. AI 让技术门槛降低 - 不懂 Sass？AI 帮你。不懂 Nginx？AI 教你。不懂 HTTPS？AI 搞定。

后续计划 链接到标题

• 每周发布一篇技术文章
• 增加 RSS 订阅功能
• 添加站内搜索
• 接入 Google Analytics

博客地址：https://mmtech.top

感谢阅读！ 如果你也想搭建个人博客，欢迎留言交流。