The Easiest Way to Build & Host a Website with Claude Code (Full Tutorial)

• 1

  無管理 VPS 的自由度與代價 — VPS 提供完整根存取與伺服器配置自由，可安裝 WHM 和 CPanel 建立多網站環境，相比共享主機更靈活；但需自行負責軟體更新、安全設定和備份，前期投入成本更高。

• 2

  DNS 分離的必要性 — hosting.com 預設名稱伺服器指向共享主機 DNS，但無管理 VPS 不在那個系統內，所以必須改用 Cloudflare 成為權威 DNS；只有當網際網路被告知去 Cloudflare 查詢域名時，DNS 記錄才會生效，這是新手容易踩的坑。

• 3

  分階段提示詞保證品質與一致性 — 將網站構建拆成四次提示詞（英雄區→關於+技能→專案+聯絡→導航+響應）比一次大型提示更容易控制，Claude Code 能讀懂既有檔案結構並保持設計系統一致，避免後續逐個微調的耗時反覆。

• 4

  本機構建只是前半段 — Claude Code 生成的檔案在本機完美執行，但網際網路無法訪問；必須透過 CPanel File Manager 將所有檔案（包括 index.html）拖放進 public_html 資料夾，伺服器才能透過域名提供該網站。

• 伺服器與購買：
• hosting.com 無管理 Linux VPS SVPS 方案
• 12 個月帳戶方案
• 折扣碼：Mikey
• 服務工具埠號與帳戶：
• WHM 登入：[伺服器 IP]:2087，預設帳戶 root
• CPanel 用於日常網站管理（域名、SSL、郵件、檔案、資料庫）
• 根密碼位置：hosting.com 儀表板的「Secrets」區段
• DNS 設定流程：
• 使用平台：Cloudflare（免費方案足夠）
• A 記錄 @ （根域）→ 伺服器 IPv4 位址
• A 記錄 * （萬用字元）→ 同伺服器 IPv4 位址
• Proxy status：設為「DNS only」
• 名稱伺服器：用 Cloudflare 提供的兩組名稱伺服器完全取代 hosting.com 名稱伺服器，移除所有舊名稱伺服器
• WHM 配置：
• Nameserver Selection：禁用（因 Cloudflare 接手 DNS）
• 變更伺服器主機名：server.nocodemike.com（防止與 CPanel 網站域名衝突）
• CPanel 帳戶建立：
• 在 WHM 執行「Create a new account」
• 執行 Auto SSL 自動簽發域名 SSL 憑證（需先建立 CPanel 帳戶）
• CPanel 域名設定：啟用「Force HTTPS Redirect」
• Claude Code 環境：
• 下載位置：claude.ai/download
• 三種使用方式：桌面應用（macOS/Windows）、命令列、編輯器擴展（VS Code/JetBrains）
• 需求：付費方案（Pro、Max、Team、Enterprise 或 Console 帳戶）
• 文件：docs.claude.com
• 網站構建四階段提示詞：
• 第一步：英雄區（粗體名字、標題、標語、兩個 CTA 按鈕、動畫粒子與漸層背景、深海藍+電藍、現代無襯線字體）
• 第二步：新增關於區（兩段自傳）與技能區（卡片網格）
• 第三步：新增專案區（三個專案卡、標題、描述、技術堆疊、查看按鈕）與聯絡區（名稱、郵件、訊息欄位表單）
• 第四步：黏性導航列、頁尾、複製權、按鈕懸停效果、間距與排版精調、行動響應式設計
• 部署上傳：
• 工具：CPanel File Manager
• 目標資料夾：public_html（域名的根資料夾）
• 方式：拖放本機專案所有檔案至 File Manager 視窗
• 必須檔案：index.html（預設主頁，需直接在 public_html 內）

“分階段提示詞搭配無管理 VPS 的完整控制權，讓初學者無需程式基礎也能擁有自主、可複用、真正屬於自己的線上網站。”