用 Claude Code 打造你的個人部落格：從零開始的完全指南

第 1 章：前言：你也可以擁有自己的部落格

你有沒有曾經想過，要有一個屬於自己的網站？

不是那種隨便申請一個免費帳號、版面被廣告塞滿的部落格，而是一個真正屬於你的地方，有自己的網址、有自己的設計風格，打開來第一眼就知道這是你的個人品牌。

過去，要做到這件事，你大概需要：請一個工程師（花錢）、自己學寫程式（花時間）、或是忍受 WordPress 各種令人頭大的設定（花神）。

但現在不一樣了。

我最近用 Claude Code（一個 AI 程式助理）從零打造了自己的個人部落格，全程幾乎沒有手動寫過一行程式碼。整套架構的成本非常低：建站工具、部署平台都可以免費使用，唯一需要花費的是 Claude Code 的訂閱費用，以及一個網域。

先說 Claude Code。我目前訂閱的是每個月 100 美金的方案，這個方案提供的使用額度是一般 Claude Pro（每月 20 美金）的五倍，對於密集開發來說才夠用。如果你只是偶爾拿來寫寫東西、改改設定，或許可以從低一階的方案開始試試，視使用量再決定要不要升級。

再說網域。我自己的網址一年花費不到 1,000 塊台幣，平均下來一個月不到 80 元，算是非常便宜的個人品牌投資。

所以整體算下來，這套做法的主要成本是 Claude Code 的月費，其餘的架構（部署、流量、CDN）全部免費。和請工程師或購買付費建站服務相比，依然划算許多。

我們用到的工具包括：Claude Code（AI 工程師）、Astro（網站框架）、Notion（內容管理）、GitHub（程式碼儲存）、Cloudflare Pages（免費部署）。

聽起來有點多？別擔心，每個工具我都會解釋它在做什麼，你只需要照著做就好。

我們開始吧。

第 2 章：從 Claude Code 開始

整個建站流程的核心只有一個工具：Claude Code。

包括後面會用到的 Node.js、Git 這些技術性工具，只要 Claude Code 裝好了，它可以直接幫你搞定，你不需要另外去研究要怎麼安裝。所以我們第一步就是先把 Claude Code 準備好。

安裝 Claude Code 的兩種方式

目前有兩種方式可以使用 Claude Code，適合不同類型的使用者。

方式一：下載 Claude 桌面應用程式

前往 Anthropic 官網下載 Claude 桌面版，目前提供 Windows 和 macOS 兩種版本。

安裝完成後，打開程式，你會看到三個主要功能：

Chat：和網頁版 Claude 差不多，就是一個聊天介面，可以用來對話、查資料或做深度研究。
Claude Cowork：主要設計給非工程師使用，操作上和 Claude Code 幾乎一樣，透過自然語言就能完成任務。
Claude Code：專門用來寫程式的功能，也是我們這次建站的主角。

方式二：下載 VS Code 並安裝擴充套件

VS Code 是一款免費的程式碼編輯器，前往 code.visualstudio.com 下載安裝。

安裝完成後，點開左側的「Extensions（延伸模組）」面板，在搜尋欄輸入「Claude Code for VS Code」。搜尋結果出來之後，注意發行者必須是 Anthropic，並且有藍色認證勾勾，確認無誤後點擊安裝，再登入帳號即可使用。

兩種方式有什麼差別？

Claude 桌面應用程式讓你完全不需要接觸程式碼，全程用中文下指令，AI 在背景幫你處理所有技術細節，你只需要看結果。

VS Code 的使用體驗則比較偏向工程師的直覺，你可以清楚看到整個網站的檔案架構，包括每個資料夾的位置、每份文件的內容。如果你想深入了解整個專案的運作方式，這個方式會讓你有更完整的掌控感。

對於完全的新手，我建議從 Claude 桌面應用程式 開始，上手更快。等你對整個流程有了基本概念之後，再視需要切換到 VS Code 也不遲。

選擇適合你的訂閱方案

不管選哪種方式，都需要登入 Anthropic 帳號並訂閱方案，才能開始使用 Claude Code。

如果你只是想問 AI 問題、做一般的查詢或聊天，Claude Pro（每月 20 美金） 已經夠用。

但如果你想讓 Claude 幫助你工作、建立工作流，那就要認真考慮升級了：

Claude Max 5x（每月 100 美金）：建立工作流的最低門檻，額度是 Pro 方案的五倍，密集使用才不會頻繁遇到用量限制。
Claude Max 20x（每月 200 美金）：如果你打算把大量工作全部交給 AI 處理，這個方案比較能撐住高強度的需求。

我自己目前訂閱的是 100 美金的方案。甚至我知道有些人需求量非常大，同時訂閱了兩三個 Claude Max 方案並行使用。

簡單說，用途決定方案，不需要一開始就衝最高，但也別因為省錢而讓額度成為你工作的瓶頸。

還需要註冊這三個帳號

除了 Claude Code 之外，後面的流程還會用到以下三個服務，全部免費註冊：

GitHub（程式碼儲存庫）：用來備份和管理你的網站程式碼。前往 github.com 註冊。
Cloudflare（部署平台）：免費托管你的網站，讓全世界都能連上你的部落格。前往 cloudflare.com 註冊。
Notion（內容管理後台）：用來管理部落格文章，寫文章的體驗就像記筆記一樣直覺。前往 notion.so 註冊。

這四個帳號（Anthropic、GitHub、Cloudflare、Notion）準備好之後，我們就可以正式開始了。

第 3 章：讓 Claude Code 更強大的秘密武器：Skill

在正式開始建站之前，我想先介紹一個讓 Claude Code 脫胎換骨的功能，叫做 Skill（技能）。

這個功能是 Anthropic 在 2025 年 10 月推出的，到現在大半年，已經成為 Claude Code 最重要的擴充方式，社群也圍繞著它發展出一個龐大的生態系。

什麼是 Skill？

你可以把 Claude Code 想像成你僱用的一位能幹助理，他什麼都會一點，但碰到比較專業的事情，表現不見得每次都達到你要的水準，而且你還得反覆微調，因為你有你自己的需求和偏好。

這時候，你可以給他一張「專家指南」，寫清楚「碰到這類問題時，照這本指南處理」。

這張指南，就是 Skill。

Skill 長什麼樣子？

一個 Skill 就是一個資料夾，裡面最重要的檔案叫 SKILL.md。打開來看大概長這樣：

---
name: obsidian-markdown
description: 處理 Obsidian 筆記的格式，碰到 .md 檔案、wikilinks、
callouts 相關的編輯請求時使用
---

# 使用說明
當使用者要編輯 Obsidian 筆記時，照以下規則處理：
1. 連結用 [[雙中括號]]，不要用一般的 Markdown 連結
2. 標註區塊用 > [!note] 這種格式
...

用 --- 包起來的那幾行，是這個 Skill 的簡介卡，寫著「我是誰、什麼時候該用我」。下面才是 Claude 真正照著做的詳細說明。

你不需要會寫 Skill，現階段只要會用，然後根據自己的需求調整就夠了。

怎麼安裝 Skill？

做法非常簡單，只有兩步：

第一步，找到你要安裝的 Skill 的 GitHub 網址。

第二步，把網址貼給 Claude Code，說「幫我裝這個 skill」。

例如：「幫我裝 https://github.com/kepano/obsidian-skills 這個 skill」

Claude Code 會自己把檔案抓下來、放到正確位置、重新載入，全部自動完成。你不需要手動處理任何檔案。

我推薦的三個 Skill

1. superpowers（16 萬顆星）

GitHub 網址：https://github.com/obra/superpowers

作者：Jesse Vincent

目前社群最熱門的 Skill 包，你可以把它當作一組讓 Claude 做事更嚴謹的規矩。裝了之後，Claude 碰到 bug 不會亂猜原因，會系統性地追根究底；說「修好了」之前一定要拿出證據；寫程式前會先規劃，不符合的舊程式碼也會一併整理乾淨。

就算你不寫程式，裝這組對你也有幫助，因為 Claude 做任何任務都會更謹慎、更願意驗證自己的工作。

2. anthropics/skills（12 萬顆星）

GitHub 網址：https://github.com/anthropics/skills

作者：Anthropic 官方

Anthropic 自己維護的官方 Skill 集合，裡面有幾個特別實用的：

文件處理組：Word、PowerPoint、Excel、PDF 的處理專家。「幫我把這個逐字稿整理成投影片」、「把這張 Excel 表格做視覺化」這類需求都能直接交給它。
skill-creator：幫你自己寫 Skill 的 Skill。你只要口述需求，它會幫你產生、測試、優化。
frontend-design：如果你有做自己的網站，這個會要求 Claude 先規劃設計風格再寫程式碼，避免做出一看就是 AI 隨手產出的醜樣。

非工程師最常用到的是文件處理組，我自己也在考慮用它來處理電子報排版和社群課程投影片。

3. gstack（7.7 萬顆星）

GitHub 網址：https://github.com/garrytan/gstack

作者：Garry Tan（Y Combinator 執行長）

YC 的 Garry Tan 本人公開的個人工作流程，23 個工具模擬完整的團隊角色，包括 CEO 審查策略方向、設計師審查視覺體驗、工程主管審查技術方案、QA 負責找 bug、發佈工程師協助上線。

等於一個人有一整個團隊在旁邊 review，特別適合一人公司或個人品牌的經營者。

安裝前的安全提醒

網路上什麼人都有，安裝 Skill 之前請注意幾件事：

確認發行者與評價

查清楚這個 Skill 是誰發行的，也看一下 GitHub 上的星數。星數代表社群的推薦數量，星數太低的要謹慎，但星數高也不代表絕對沒問題，還是要自己判斷。

安裝時稍微瀏覽一下內容

在安裝之前，瀏覽一下這個 Skill 到底要做什麼事、有沒有可能傳輸某些資料。如果覺得自己看原始碼很麻煩，可以把 GitHub 網址丟給網頁版的 Claude，請它幫你先審查一遍，但自己也一定要親自瀏覽，不要完全依賴 AI 的判斷、也不要偷懶。

Skill 準備好之後，我們就有了一個更稱職的 AI 夥伴，可以開始正式建站了。

第 4 章：用 Claude Code 建立你的 Astro 部落格

準備工作做完了，現在來做真正有趣的部分，讓 Claude Code 幫我們把部落格從零建起來。

Astro 是什麼？

Astro 是一個專門用來建立靜態網站的框架。你可以把它想成是一套蓋房子的規格標準，它決定了網站的結構、頁面怎麼組織、程式碼怎麼運作。

對我們來說最重要的一點是：Astro 建出來的網站可以直接部署到 Cloudflare Pages 上，完全免費，而且跑起來非常快。

你不需要理解 Astro 的技術細節，這些事情 Claude Code 都幫你處理。你只需要知道它的名字，能跟 Claude Code 溝通就夠了。

第一步：建立專案資料夾

先在你的電腦上選一個地方，建立一個新的空白資料夾，這就是你的網站專案會存放的地方。資料夾名稱可以取你喜歡的名字，例如 my-blog。

然後用 VS Code 打開這個資料夾（選單 File > Open Folder），或是從 Claude 桌面應用程式切換到這個目錄。

第二步：把需求告訴 Claude Code

打開 Claude Code，把你的需求說清楚。以下是我自己當時下的指令，你可以直接參考：

「幫我用 Astro 建立一個個人部落格專案，需要有首頁、文章列表頁、以及可以顯示單篇文章的頁面。樣式用 Tailwind CSS，整體風格簡潔、現代。」

Claude Code 接到指令之後，會開始自動執行一連串的工作：安裝 Node.js 和其他必要工具（如果還沒安裝）、建立 Astro 專案結構、設定 Tailwind CSS、建立首頁、文章列表頁、單篇文章頁的基本模板。整個過程大約幾分鐘，期間你可以看到畫面持續更新，顯示它正在做什麼。

第三步：在本機預覽你的網站

專案建立完成後，Claude Code 會告訴你如何啟動本機預覽。你只要跟它說：

「幫我啟動開發伺服器，讓我預覽網站。」

它會執行啟動指令，完成後畫面上會出現一個網址，通常是 http://localhost:4321。把這個網址貼到瀏覽器打開，你就能看到你的網站了。

此時的網站只是個框架，內容都是示範用的假資料，這很正常。重要的是確認頁面能正常顯示、連結能正常跳轉。

第四步：根據自己的需求調整

看到網站之後，你可能會想改一些東西，例如網站名稱、顏色、版面結構。這些都可以直接告訴 Claude Code：

「把網站名稱改成『我的讀書筆記』。」「首頁的標題區域太空了，幫我加一段自我介紹。」「文章列表頁每排顯示三篇文章，用卡片式的排列方式。」

這個來回調整的過程沒有標準答案，就是看你想要什麼樣的效果，一直調到滿意為止。

到這一步，你已經有了一個可以在本機跑起來的部落格網站。下一章，我們來把 Notion 接上去，讓你可以像寫筆記一樣管理文章內容。

第 5 章：串接 Notion，讓寫文章變得像記筆記一樣簡單

網站框架有了，接下來要解決一個關鍵問題：文章要放在哪裡，又要怎麼管理？

傳統的做法是把文章寫成程式碼檔案，直接存放在專案資料夾裡。這對工程師來說沒什麼問題，但對一般人來說，光是打開正確的檔案就已經讓人頭大了，更別說每次寫完文章還要手動操作部署流程。

我選擇的方案是 Notion，原因很簡單：寫文章的感覺就像在寫筆記，不需要碰任何程式碼。

第一步：在 Notion 建立文章資料庫

登入 Notion 之後，新增一個頁面，選擇「Database > Table」建立一個表格型資料庫。

這個資料庫就是你的文章管理後台，每一行代表一篇文章。我建議至少設定以下幾個欄位：

Title（標題）：文章標題，Notion 預設就有
Status（狀態）：用來標記草稿、已發布、未公開等狀態
Date（日期）：文章發布日期
Slug（網址代稱）：這篇文章在網站上的網址，例如 my-first-post
Description（摘要）：文章列表頁顯示的一段短介紹

第二步：取得 Notion API 金鑰

前往 notion.so/my-integrations，點擊「New integration」建立一個新的整合，名稱可以填你的網站名稱。建立完成後，你會拿到一組 Internal Integration Token，把它複製起來保存好。

接著回到你的 Notion 資料庫頁面，點右上角的「…」選單，找到「Connections」，把你剛建立的整合加進去，讓 Notion 允許外部程式讀取這個資料庫。

最後，複製資料庫 ID。資料庫 ID 藏在網址裡面：

https://www.notion.so/你的帳號/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?v=...

中間那一串英數字就是資料庫 ID。

第三步：把金鑰安全地存起來

API Token 和資料庫 ID 是敏感資訊，千萬不能直接寫進程式碼裡，因為程式碼之後會上傳到 GitHub，等於把金鑰公開給全世界看到。

正確的做法是使用「環境變數」，把這些資訊存放在兩個地方：

本機開發用：建立 .env 檔案

告訴 Claude Code：

「幫我在專案根目錄建立一個 .env 檔案，加入以下兩個環境變數：NOTION_TOKEN 和 NOTION_DATABASE_ID，並確認 .env 已經加入 .gitignore，不會被上傳到 GitHub。」

然後把你的 Token 和 ID 填進去：

NOTION_TOKEN=你的_token
NOTION_DATABASE_ID=你的_database_id

部署用：在 Cloudflare Pages 設定環境變數

這個部分等網站部署到 Cloudflare Pages 之後再設定（第 7 章會說明），在 Cloudflare Pages 的專案設定裡，找到「Environment Variables」，把同樣的兩個變數填進去。這樣網站上線之後，才能正確讀取 Notion 的資料。

第四步：讓 Claude Code 幫你串接

環境變數設定好之後，告訴 Claude Code：

「幫我把 Notion 資料庫串接到這個 Astro 專案，使用環境變數 NOTION_TOKEN 和 NOTION_DATABASE_ID。我希望 Notion 裡的每一筆資料都對應網站上的一篇文章，包含標題、日期、摘要和文章內文。」

Claude Code 會幫你安裝必要的套件、建立資料讀取的程式邏輯、以及把 Notion 的資料對應到網站的頁面模板上。完成之後，重新啟動開發伺服器，你應該就能在網站上看到 Notion 資料庫裡的文章了。

之後怎麼寫文章？

串接完成之後，你的工作流程就變成這樣：

打開 Notion，在資料庫裡新增一行
填寫標題、日期、Slug、摘要
點進去這一行，開始寫文章內文（就像平常在 Notion 記筆記一樣）
把狀態改成「已發布」
網站重新部署後，這篇文章就會自動出現在你的部落格上

整個過程完全不需要碰程式碼，對我來說這是整套流程裡最滿意的一個環節。

第 6 章：把程式碼上傳到 GitHub

網站在本機跑起來了，也串接了 Notion，但目前這些程式碼只存在你自己的電腦上。如果電腦壞了、或是你想在另一台電腦繼續工作，一切就都不見了。

這一章要做的事情很簡單：把程式碼上傳到 GitHub 保存起來。除了備份之外，這一步還有另一個重要目的：下一章的 Cloudflare Pages 部署，就是靠讀取 GitHub 上的程式碼來自動完成的。

GitHub 是什麼？

你可以把 GitHub 想成是程式碼版的 Google Drive，專門用來存放和管理程式碼。每次你對網站做了修改，就把最新的版本上傳上去，GitHub 會幫你保留所有的歷史紀錄，任何時候都可以回到過去某個版本。

第一步：在 GitHub 建立 Repository

Repository（簡稱 Repo）就是你這個專案在 GitHub 上的專屬資料夾。

登入 GitHub 之後，點右上角的「+」按鈕，選擇「New repository」。

填寫 Repository name（例如 my-blog），Visibility 建議選 Private（私人）。雖然公開或私人 Cloudflare Pages 都支援，但對新手來說私人比較安全，萬一專案裡不小心留了 API Key 或 Access Token，選公開就等於把這些資料公開給全世界了，自己還不一定知道。

點擊「Create repository」，GitHub 會給你一個網址，格式像 https://github.com/你的帳號/my-blog，把它複製起來。

第二步：讓 Claude Code 幫你上傳

告訴 Claude Code：

「幫我把這個專案上傳到 GitHub，Repo 網址是 https://github.com/你的帳號/my-blog」

Claude Code 會處理好所有 Git 設定、打包程式碼、上傳到 GitHub。完成後前往那個網址確認，應該能看到你的專案檔案都出現在上面了。

之後如何更新程式碼：Commit 和 Push

每次對網站做了調整，告訴 Claude Code「Commit and Push」即可。

Commit（提交），是把你這一次所有的修改打包成一個版本，並附上一段說明，例如「新增關於我的頁面」。你可以把它想成是替這次的修改拍一張快照，存進本機的版本紀錄裡。

Push（推送），是把剛才打包好的版本，從你的電腦上傳到 GitHub。完成之後，GitHub 上的程式碼就和你本機的一致了。

先 Commit 再 Push，這是固定的順序。

改壞了怎麼辦？回到上一個版本

因為每次 Commit 都是一個快照，所以可以隨時告訴 Claude Code：

「我發現最近的修改有問題，幫我回到上一個版本。」

或者：

「幫我看一下最近幾次的 Commit 紀錄，我想回到三個版本之前的狀態。」

Claude Code 會列出版本歷史讓你選擇，然後幫你還原。這也是為什麼要勤於 Commit，快照拍得越密，出問題時能還原的精確度就越高。

想測試新功能？先開一條 Branch

有時候你想新增一個功能，但不確定方向對不對，也不想萬一搞壞了影響到現在正常運作的版本。這種情況，標準做法是先開一條 Branch（分支）。

Branch 就像是從現有版本分叉出去，複製一份一模一樣的程式碼，讓你在上面放心實驗，完全不影響原本的主線版本。告訴 Claude Code：

「我想新增深色模式功能，幫我開一條新的 Branch 來開發。」

在這條 Branch 上反覆測試、多次 Commit，功能做到滿意後，告訴 Claude Code：

「這個功能測試 OK 了，幫我把這條 Branch Merge 回主線。」

Merge（合併） 就是把分支上的所有修改整合回主線版本，合併之後，新功能就正式成為網站的一部分了。

第 7 章：用 Cloudflare Pages 免費部署上線

程式碼上傳到 GitHub 之後，接下來是整個流程最令人興奮的一步：把網站部署到網路上，讓任何人都可以用瀏覽器連進來。

這一章要用的服務叫 Cloudflare Pages，完全免費，而且設定完成之後，只要你往 GitHub Push 新的程式碼，網站就會自動更新，不需要每次手動操作。

Cloudflare Pages 是什麼？

Cloudflare 是全球最大的網路基礎建設公司之一，他們提供的 Cloudflare Pages 服務，專門用來托管靜態網站。免費方案每個月可以部署 500 次、流量無限、全球 CDN 加速，甚至還支援自訂網域。

第一步：連結 GitHub

登入 Cloudflare 之後，進入左側選單的「Workers & Pages」，點擊「Create」，選擇「Pages」頁籤，再點「Connect to Git」。授權 Cloudflare 存取你的 GitHub 帳號，選擇你的 Repo，點擊「Begin setup」。

第二步：設定建置參數

Framework preset 選「Astro」，Build command 填 npm run build，Build output directory 填 dist，其他保持預設。

第三步：加入環境變數

在同一頁找到「Environment variables」，加入 NOTION_TOKEN 和 NOTION_DATABASE_ID，填入你的 Notion API Token 和資料庫 ID。

第四步：部署

點擊「Save and Deploy」，等一到三分鐘，Cloudflare 會給你一個網址，格式像 https://my-blog.pages.dev，貼到瀏覽器，你的部落格就正式上線了。

在 Notion 發文後，如何讓網站自動更新？

我們用 Astro 建的是「靜態網站」，頁面在部署那一刻就產生好了，之後不會自動更新。所以就算在 Notion 把文章狀態改成「已發布」，網站也需要重新部署一次才能顯示新文章。

推薦用 Google Apps Script 來自動化這件事，免費、不需要架伺服器、有 Google 帳號就能用。

做法分兩步：

一、取得 Cloudflare Deploy Hook

前往 Cloudflare Pages 專案設定，找到「Settings > Builds & deployments > Deploy hooks」，新增一個 Deploy Hook，取得專屬網址備用。

二、建立 Google Apps Script

前往 script.google.com，新增專案，告訴 Claude Code：

「幫我寫一個 Google Apps Script，每隔 15 分鐘檢查一次我的 Notion 資料庫，如果偵測到有新的文章狀態變成 Done，就呼叫這個 Cloudflare Deploy Hook 網址觸發重新部署：[你的 Deploy Hook 網址]」

Claude Code 會產生完整的程式碼，貼進 Google Apps Script 並設定每 15 分鐘自動執行一次即可。這個方案完全在 Google 免費額度內，一天最多呼叫約 192 次 API，遠低於免費上限的 20,000 次。

之後的工作流程就是：在 Notion 寫完文章、把狀態改成 Done，最多等 15 分鐘，文章就會自動出現在網站上。

第 8 章：綁定你自己的網域

網站上線了，但目前的網址長這樣：https://my-blog.pages.dev。這個網址能用，但看起來不夠專業，也不好記。

這一章要做的事情是把這個網址換成你自己的網域，例如 yourname.com，讓你的部落格有一個真正屬於自己的門牌號碼。

第一步：購買網域

購買網域的平台很多，我這裡推薦兩個選擇：

Cloudflare Registrar（推薦給新手）

直接在 Cloudflare 裡買網域，好處是所有東西都在同一個平台管理，DNS 設定幾乎全自動，不需要手動調整。Cloudflare 賣域名是以成本價計算，不加價，.com 一年大約 10 美金出頭。前往 Cloudflare 控制台，左側選單點「Domain Registration > Register Domains」，搜尋你想要的名稱，確認有空著就可以直接購買。

Gandi.net（我個人的選擇）

老牌的網域商，介面乾淨、設定透明、不會用各種附加服務轟炸你。.com 一年大約 10 到 15 美金，.tw 的話一年不到 1,000 台幣。前往 gandi.net 搜尋並購買即可。

第二步：在 Cloudflare Pages 加入自訂網域

買好網域之後，前往你的 Cloudflare Pages 專案，點擊「Custom domains」頁籤，點「Set up a custom domain」，輸入你的網域名稱，例如 yourname.com。

如果網域是在 Cloudflare 買的，它會自動完成 DNS 設定，不需要額外操作。

如果是在 Gandi.net 或其他平台 買的，Cloudflare 這時候會告訴你需要加入一筆 DNS 記錄，通常是一筆 CNAME 記錄，把你的網域指向 Cloudflare Pages 的網址。把這筆記錄的內容複製起來，然後登入 Gandi.net，進入你的網域管理頁面，找到「DNS Records」，新增這筆記錄即可。

如果不確定怎麼操作，直接把 Cloudflare 的設定畫面截圖，丟給 Claude Code 說「我的網域在 Gandi.net，幫我說明要怎麼設定」，它會給你逐步說明。

什麼是 DNS？

你可以把網域想成是一個門牌地址，DNS 則是負責把這個地址翻譯成實際伺服器位置的系統，就像是把「台北市信義區某路 100 號」換算成 GPS 座標。設定 DNS 的意思，就是告訴這個系統：「有人來找 yourname.com 的時候，請把他們導向我在 Cloudflare Pages 上的網站。」

等待生效

DNS 設定完成之後，通常需要幾分鐘到幾小時不等才會全面生效，這是正常現象。等生效之後，在瀏覽器輸入你的網域，就能直接打開你的部落格了。

第 9 章：讓網站更漂亮：用 Claude Code 客製化設計

網站上線了，功能也跑通了。但如果你打開自己的網站，覺得「這樣子看起來太陽春了」，這一章就是為你準備的。

用 Claude Code 改設計，不需要懂 CSS，不需要懂任何前端技術，你只需要能描述「你想要什麼感覺」。

先裝一個設計 Skill：UI UX Pro Max

在開始改設計之前，我建議先裝一個 Skill，叫做 UI UX Pro Max。

這個 Skill 內建了 161 條行業設計推理規則、67 種 UI 風格（玻璃態、極簡主義、粘土風格等）、161 組針對不同產業優化的配色方案，以及 57 種 Google Fonts 字體配對建議。

裝了之後，Claude Code 在幫你設計頁面時，會自動根據你的網站類型和需求，推薦最適合的設計系統，包含配色、字型、版面模式，還有一份「避免清單」，告訴你什麼樣的設計會讓網站看起來像是 AI 隨手做的廉價貨。

安裝方式和第 3 章一樣，告訴 Claude Code：

「幫我裝 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 這個 skill」

用說的就能改設計

Skill 裝好之後，你可以像跟設計師說話一樣告訴 Claude Code 你想要什麼：

改顏色：

「幫我把整個網站的主色調改成深藍色搭配米白色背景，連結顏色用橙色。」

改字型：

「標題字型換成比較有設計感的，內文字型要圓潤好讀，記得引入 Google Fonts。」

改版面：

「首頁的文章卡片改成三欄排列，每張卡片要有封面圖、標題、發布日期和一段摘要。」

整體風格：

「我想要整個網站看起來像一個高端的個人品牌頁面，風格參考 Apple 的設計語言，大量留白、排版乾淨、字型大而有力。」

給一個參考，效果更好

如果你有看到喜歡的網站設計，可以把網址一起丟給 Claude Code：

「我很喜歡這個網站的設計風格：[網址]，幫我把我的部落格改成類似的感覺，不要完全複製，但整體氛圍要相近。」

或者描述你喜歡那個網站的哪些地方：

「我喜歡那個網站的大標題很有氣勢、卡片之間有足夠的呼吸空間、整體色調克制只用黑白灰三色。」

設計一次改一個區塊

建議每次聚焦在一個區塊，例如先把 Header 改好，確認滿意後再處理文章列表頁，再來處理單篇文章的閱讀版面。萬一改壞了，只需要還原那一個區塊，不會牽連整個網站。

行動版也別忘了

改完桌機版的設計之後，記得告訴 Claude Code：

「幫我確認這個設計在手機上的顯示沒有問題，如果有版面跑掉或字太小的地方，幫我一起修正。」

第 10 章：用 AI 生圖，打造有靈魂的網站視覺

一個網站的視覺質感，往往決定了訪客對你的第一印象。這一章要說的不只是怎麼生一張漂亮的圖，而是如何建立一套有系統的圖片風格，讓你的網站從頭到尾都有一致的面貌。

你的網站至少需要這兩種圖片

Favicon（網站小圖示）

你有沒有注意過，打開瀏覽器的分頁時，每個網站旁邊都有一個小小的圖示？那個就是 Favicon。

這張圖雖然只有 32x32 像素那麼小，但它是網站專業感的基本門檻，沒有的話，你的分頁就只會顯示一個空白方塊，瞬間讓整個網站掉一個檔次。

Favicon 適合用 SVG 格式（因為它需要在極小尺寸下依然清晰），通常是你的 Logo 或品牌符號的簡化版。

主視覺（Hero Image）

網站首頁最上方的大圖，通常叫做 Hero Image，是訪客打開你的網站後第一眼看到的東西。這張圖定義了你整個網站的調性，建議花時間好好設計。

選哪個工具來生圖？

目前最主流的兩個選擇：

ChatGPT，搭配最新的 GPT-Image-2 模型。免費版就可以使用這個模型，只是額度比較少；如果需要更多用量，可以升級到 Plus 方案（每月 20 美金）。
Gemini，搭配 Google 最新的 Nano Banana 2 模型。同樣有免費額度可以使用，拿來試水溫完全夠用。

兩個工具各有強項，建議都試試，看哪個產出的風格比較接近你想要的。

風格先行：圖片要和網站「說同一種語言」

在開始生圖之前，有一個關鍵步驟很多人會跳過：先讓圖片風格和網站設計對齊。

做法是在 Claude Code 把網頁設計完之後，問它：

「根據我們現在的網站設計風格，如果我要加入插圖，適合什麼樣的插圖風格？建議的主色調和視覺語言是什麼？」

Claude Code 會根據現有的設計，給你一份具體的插圖風格建議，包含色調、線條感、整體氛圍。帶著這份描述去生圖，出來的結果才不會和網站格格不入。

此外，在網頁設計的階段就要提前討論圖片的「佔位區」，告訴 Claude Code 要預留多大的空間、什麼比例，之後填入圖片時才不需要再大幅調整版面。

建立「母圖」，確保風格一致性

這是我自己摸索出來、覺得最重要的一個做法。

以我的網站為例，我的視覺主角是一隻穿著白襯衫的擬人化卡通烏鴉，背景是各種辦公室場景。

我當社畜當了很久，一直想透過 AI 工具建立一人公司、跳出這種生活。所以我用烏鴉來當主角。烏鴉這個形象很有意思，外表看起來有點憨憨的，但烏鴉其實是自然界裡數一數二聰明的生物，我希望自己也是這樣，外表不起眼，但靠著智慧搭配 AI 工具，一樣能解決面前的困難。

整個職場其實就是各種動物的集合，緊張兮兮的兔子、老神在在的猴子、欺善怕惡的狼，每個角色都有，所以我設計的視覺世界裡不只有烏鴉，也會有其他擬人化的動物角色陸續出現。

確立視覺主角之後，我的生圖流程是這樣：

第一步：先設計幾款角色，然後定稿

一開始嘗試幾個不同的方向，包含不同的繪畫風格、不同的角色外觀，反覆生成、比較，直到找到一個「就是這個」的感覺，這張圖就是你的母圖。

第二步：母圖從此以後不能改動

母圖一旦定稿，就成為你所有圖片的基準。之後不管生成什麼場景，永遠把這張母圖附上，告訴 AI：「請保持這個角色的外觀、風格、線條感，幫我生成一張在某某場景的版本。」

第三步：所有圖片都從母圖延伸出來

這樣一來，你的每一張插圖雖然場景不同，但角色長相、繪圖風格、色調都保持一致，整個網站看起來就像同一個系列的作品，而不是從各地東拼西湊來的。

去背怎麼處理？

如果你的設計需要去背圖片，做法分兩步：

第一步，生圖時指定有色的純色背景

不建議用純白色背景，因為如果角色身上有白色元素（例如眼白、衣服），去背時可能會連這些地方一起誤刪。建議改用淡藍色、淡灰色、淡綠色這類「有一點顏色但不搶眼」的純色背景，和角色形成足夠的對比，去背時邊緣才會乾淨。

第二步，讓 Claude Code 去背

把圖片檔案放進專案資料夾，告訴 Claude Code：

「幫我把這張圖片去背，輸出成透明背景的 PNG 檔。」

Claude Code 會使用圖片處理工具自動完成，比 AI 生圖時自己試圖去背的效果更可靠。

第 11 章：結語

如果你跟著這篇文章一路做到這裡，恭喜你，你現在擁有了：

一個有自己網址的個人品牌網站
一個可以像記筆記一樣管理文章的 Notion 後台
一套自動部署的流程，發文後無需手動操作
一個有設計感、視覺風格一致的部落格

這件事情在幾年前，可能要花幾十萬請人做，或者花幾個月自學才能搞定。現在靠著 Claude Code，就算你沒有技術背景，一樣可以做出來。

這只是起點

網站上線只是第一步，接下來更重要的事情是持續產出內容。一個更新頻繁、有真實觀點的部落格，比一個設計精美但沒有文章的網站更有價值。

你不需要每篇都寫很長，也不需要等到覺得「準備好了」才開始。你現在學到的東西，你踩過的坑，你覺得有用的工具，這些都是值得寫下來的題材。

還可以繼續做的事

如果你想繼續深化這套系統，幾個方向可以考慮：

加上 SEO 設定：告訴 Claude Code 幫你加入 meta tag、sitemap、結構化資料，讓你的文章更容易被 Google 搜尋到。

串接電子報：把部落格的訂閱功能接上 Beehiiv 或 ConvertKit，讓讀者可以用 Email 追蹤你的更新。

加入數據分析：接上 Google Analytics 或 Cloudflare Analytics，了解哪些文章最多人看、流量從哪裡來。

這些功能都可以繼續用 Claude Code 一步一步加上去，做法和這篇文章教的一樣：把需求說清楚，讓它幫你完成。

最後說一句

AI 工具這件事，我覺得最重要的不是你用了什麼工具，而是你有沒有真的動手做。

很多人看完教學就結束了，沒有真正跑過一遍流程。如果你已經把網站跑起來了，你就已經贏過大多數人了。

繼續做下去。