↓ 快轉到主要內容
首頁

使用 Claude Code 建立遊戲開發部落格

·303 字·2 分鐘
作者
Mao

專案目標
#

建立一個多主題的技術部落格，包含：

  • 🎮 遊戲開發（Unity C#）
  • 🤖 AI 研究（工具使用、提示詞工程）
  • 📝 技術筆記（程式開發心得）

技術選型
#

靜態網站框架：Hugo Extended
#

  • 編譯速度快
  • Markdown 原生支援
  • 與 Git 工作流天然整合

主題：Blowfish
#

  • 原生暗色系設計
  • 支援卡片式 Layout
  • 完整的客製化機制
  • 繁體中文支援

實作過程
#

Phase 1: 環境建置
#

1
2
3
4
5
6
7
8

# 驗證 Hugo 安裝
hugo version
# hugo v0.159.1+extended

# 建立專案
hugo new site game-devlog
cd game-devlog
git init

Phase 2: 加入 Blowfish 主題
#

1
2

# 使用 Git Submodule
git submodule add -b main https://github.com/nunocoracao/blowfish themes/blowfish

Phase 3: 配置多分類架構
#

config/_default/params.toml:

1
2
3
4
5
6
7
8
9

[homepage]
  layout = "page"           # 簡潔頁面版型
  showRecent = true         # 顯示最新文章
  showRecentItems = 6

[list]
  showCards = true          # 卡片網格模式
  cardView = true
  showSummary = true

主要分類設定:

1

mainSections = ["games", "ai", "posts"]

Phase 4: 內容結構
#

1
2
3
4
5
6

content/
├── games/          # 遊戲開發
│   └── test-project/
├── ai/             # AI 研究
│   └── build-blog-with-claude.md  ← 本文
└── posts/          # 技術筆記

Phase 5: 自訂樣式
#

建立 assets/css/custom.css，實現：

  • 極簡暗色風格（#0a0e12 背景）
  • 高對比配色（#00ff88 主色）
  • Monokai 代碼高亮
  • C# 語法優化

關鍵學習
#

1. 封面圖管理
#

Blowfish 支援兩種方式：

集中管理（推薦）:

1

feature: "/images/ai/cover.jpg"

文章同目錄:

1

feature: "cover.jpg"

建議規格：1200x630px（2:1 比例）

2. Front Matter 完整寫法
#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "文章標題"
date: 2026-04-01
tags: ["Tag1", "Tag2"]
draft: false
showToc: true
showReadingTime: true
description: "文章描述"
feature: "/images/category/cover.jpg"
featureAlt: "封面圖說明"
---

3. 分類擴充方式
#

模組化設計，新增分類只需：

  1. 建立 content/new-category/
  2. 建立 _index.md
  3. 更新 mainSections
  4. 加入選單項

Claude Code 協作心得
#

優勢
#

  1. Plan Mode 規劃

    • 先探索專案結構
    • 設計實作方案
    • 確認需求後執行

  2. Todo 追蹤

    • 自動建立任務清單
    • 即時更新進度
    • 確保不遺漏步驟

  3. 平行處理

    • 配置檔案批次更新
    • 多分類同時建立
    • 提升效率

實用技巧
#

明確表達需求:

“需要可擴充的分類架構，未來會新增內容”

指定風格偏好:

“極簡風格 70%，視覺元素 30%”

確認實作細節:

“卡片網格 + 封面圖，更新頻率不高”

下一步計畫
#

  • 準備各分類的臨時封面圖
  • 撰寫第一篇遊戲開發日誌
  • 建立技術筆記範例
  • 設定 GitHub Actions 自動部署
  • 啟用 GitHub Pages

參考資源
#

總結：使用 Claude Code 建立 Hugo 部落格的體驗非常流暢。Plan Mode 讓我能先確認方向，避免走錯路；Todo 追蹤確保每個步驟都完成；程式碼自動生成大幅節省時間。

推薦給想快速建立技術部落格的開發者！