Claude Code 開發實戰 — 用 AI 輔助寫部落格系統

前言

這個部落格你正在看的每一頁，大部分的程式碼都是我和 Claude Code 一起寫的。沒錯，我用 AI 來寫一個關於 AI 的技術部落格，聽起來很 meta 對吧？

Claude Code 是 Anthropic 推出的 CLI 工具，讓你可以在終端機裡直接跟 Claude 對話，它能讀你的程式碼、改你的檔案、跑指令。跟一般的 ChatGPT 網頁介面不同，它真正「住在」你的開發環境裡。這篇文章我想分享用 Claude Code 開發這個部落格系統的完整過程，以及我對 AI pair programming 的一些心得。

Claude Code 是什麼？

基本介紹

Claude Code 是一個在終端機運行的 AI 開發助手。它的核心能力包括：

讀取整個專案的檔案結構：它會自動理解你的 codebase
直接修改檔案：不需要複製貼上，它可以直接編輯
執行終端指令：可以跑 git、npm、docker 等命令
多檔案同時操作：一次修改多個相關檔案
記憶專案上下文：透過 CLAUDE.md 檔案記住專案的重要資訊

安裝與設定

# 安裝 Claude Code npm install -g @anthropic-ai/claude-code # 進入專案目錄 cd /path/to/your/project # 啟動 Claude Code claude

# 第一次使用會要求登入 Anthropic 帳號 # 登入後就可以開始對話了

CLAUDE.md — 專案記憶

這是 Claude Code 最實用的功能之一。你可以在專案根目錄放一個 CLAUDE.md 檔案，記錄專案的重要資訊：

# CLAUDE.md 範例

Project Overview
A WordPress blog with custom theme, styled after iquilezles.org.

Stack

Docker (WordPress + MySQL)
Custom theme: techblog
PHP 8.2, MySQL 8.0


Key Conventions

Dark theme: bg #1e1e1e, card #383838
Accent color: #ff4040
Use Prism.js for code highlighting
Use MathJax for math rendering


How to Start
docker compose up -d

Claude Code 每次啟動都會讀這個檔案，所以它永遠知道你的專案是什麼、用什麼技術、有什麼慣例。

本站的開發過程

Phase 1：基礎架構

一開始我只跟 Claude Code 說了一句：

「我想建一個 WordPress 部落格，用 Docker 部署，風格參考 iquilezles.org — 深色、極簡、技術風格。」

它幫我生成了：

# docker-compose.yml services: db: image: mysql:8.0 restart: always environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress volumes: - db_data:/var/lib/mysql healthcheck: test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] timeout: 20s retries: 10 wordpress: image: wordpress:php8.2-apache depends_on: db: condition: service_healthy ports: - "8080:80" environment: WORDPRESS_DB_HOST: db WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: - ./wp-content:/var/www/html/wp-content restart: always

volumes: db_data:

然後是自動化安裝腳本：

#!/bin/bash
# setup.sh — 一鍵安裝腳本

set -e

echo "=== 啟動 Docker 容器 ==="
docker compose up -d

echo "=== 等待 WordPress 就緒 ==="
until docker compose exec wordpress wp core is-installed 2>/dev/null; do
    sleep 3
done

echo "=== 安裝 WordPress ==="
docker compose exec wordpress wp core install \
    --url="https://shnovaj.com" \
    --title="Tech Blog" \
    --admin_user=admin \
    --admin_password=admin123 \
    --admin_email=admin@example.com \
    --skip-email

echo "=== 啟用自訂主題 ==="
docker compose exec wordpress wp theme activate techblog

echo "=== 設定永久連結 ==="
docker compose exec wordpress wp rewrite structure '/%postname%/'

echo "=== 完成！ ==="
echo "前台: https://shnovaj.com"
echo "後台: https://shnovaj.com/wp-admin (admin / admin123)"

Phase 2：自訂主題

這是最花時間的部分。我把設計需求講清楚，Claude Code 幫我生成了整個 theme 的檔案結構：

wp-content/themes/techblog/
├── style.css           # 主題樣式 + 暗色主題
├── functions.php       # 主題功能、enqueue scripts
├── header.php          # 共用頭部
├── footer.php          # 共用底部
├── front-page.php      # 首頁（文章卡片網格）
├── single.php          # 單篇文章頁面
├── archive.php         # 分類/標籤 archive
├── search.php          # 搜尋結果頁
├── 404.php             # 404 頁面
├── page.php            # 一般頁面
└── index.php           # 預設模板

其中最複雜的是首頁的卡片網格。我跟 Claude Code 來回調整了好幾次：

<!-- front-page.php 的核心迴圈 -->
<div class="articles-grid">
    <?php
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 12,
        'paged'          => $paged,
        'orderby'        => 'date',
        'order'          => 'DESC',
    );
    $query = new WP_Query($args);

if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
    ?>
        <article class="article-card">
            <a href="<?php the_permalink(); ?>">
                <div class="card-content">
                    <h2 class="card-title"><?php the_title(); ?></h2>
                    <div class="card-meta">
                        <span class="card-date"><?php echo get_the_date('Y/m/d'); ?></span>
                        <span class="card-category">
                            <?php echo get_the_category_list(', '); ?>
                        </span>
                    </div>
                    <p class="card-excerpt">
                        <?php echo wp_trim_words(get_the_excerpt(), 30); ?>
                    </p>
                </div>
            </a>
        </article>
    <?php
        endwhile;
        wp_reset_postdata();
    endif;
    ?>
</div>

Phase 3：Prism.js 和 MathJax

文章中需要程式碼高亮和數學公式渲染，Claude Code 幫我在 functions.php 中加入：

function techblog_enqueue_scripts() {
    // Prism.js — 程式碼語法高亮
    wp_enqueue_style(
        'prism-css',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css'
    );
    wp_enqueue_script(
        'prism-js',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
        array(),
        null,
        true
    );

// 常用語言支援
    $languages = ['python', 'javascript', 'bash', 'php', 'glsl', 'yaml', 'json'];
    foreach ($languages as $lang) {
        wp_enqueue_script(
            "prism-{$lang}",
            "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-{$lang}.min.js",
            array('prism-js'),
            null,
            true
        );
    }

// MathJax 3 — 數學公式渲染
    wp_enqueue_script(
        'mathjax',
        'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'techblog_enqueue_scripts');

AI Pair Programming 心得

什麼情況下 Claude Code 特別好用？

Boilerplate 生成：Docker 設定、WordPress theme 骨架、API endpoint 這些重複性高的東西，AI 快很多。

跨檔案重構：「把所有 CSS 中的 #333 換成 CSS variable」這種跨檔案的修改，Claude Code 可以一次處理。

除錯：把錯誤訊息貼給它，它通常能直接定位問題。特別是 WordPress 這種有大量 hook 和 filter 的系統，它的知識庫很有幫助。

探索不熟的技術：我對 WordPress theme 開發不太熟，Claude Code 幫我省了大量查文件的時間。

什麼情況下還是得自己來？

設計決策：AI 可以生成各種方案，但「哪個好看」、「哪個符合我的品味」這種判斷還是得自己做。

效能優化的最後一哩路：AI 能做 80% 的優化，但剩下 20% 需要對系統有深入理解。

複雜的業務邏輯：當邏輯涉及多個系統的交互，AI 容易漏掉 edge case。

效率提升的量化感受

以這個部落格專案為例：

Docker 環境設定：以前可能花 2-3 小時，現在 20 分鐘搞定
主題開發：以前可能需要一週，現在 2 天（包括反覆調整）
文章內容管理腳本：以前半天，現在 30 分鐘

整體來說，我覺得開發效率提升了大約 3-5 倍，但前提是你要會下好的指令。

小結

Claude Code 改變了我的開發方式。它不是取代工程師，而是讓工程師可以把更多時間花在「想」而不是「打字」上。對於像我這樣的後端工程師，偶爾需要寫前端、搞 DevOps、處理不熟悉的框架，有一個什麼都略懂的 AI 助手真的太方便了。

如果你想開始使用 Claude Code，建議：

從小專案開始：不要一上來就在生產環境用
寫好 CLAUDE.md：這是投資報酬率最高的事
學會 review AI 的輸出：不要盲目接受，理解每一行程式碼
善用多輪對話：AI 的第一次輸出通常不完美，但透過對話可以快速迭代

前言