✦ 實戰教學 2026

用 AI 幫你架一個
真正上線的網站

透過 NAS、Claude Code、Cloudflare Tunnel 和自訂網域，零基礎也能在一天內架好自己的網站，而且幾乎零費用。

🤖 Claude Code 🖥️ NAS ☁️ Cloudflare Tunnel 🌐 自訂網域 💰 幾乎免費 📱 Telegram Bot

📋 文章目錄

  1. 這篇文章能幫你做什麼？
  2. 你需要準備什麼？
  3. 費用試算
  4. 整體架構流程
  5. Step 1：在 NAS 安裝 Claude Code
  6. Step 2：用 Telegram Bot 遠端控制 Claude
  7. Step 3：請 Claude 幫你寫網頁
  8. Step 4：申請 Cloudflare 帳號 + 購買網域
  9. Step 5：設定 Cloudflare Tunnel 上線
  10. Step 6：申請 Google AdSense 賺廣告費
  11. 成果展示
  12. 新手常見問題
💡

這篇文章能幫你做什麼？

你有沒有想過，自己架一個網站，但一想到要學 HTML、CSS、JavaScript、伺服器設定……就打退堂鼓了？

這篇文章要告訴你：現在不需要懂這些。只要你有一台 NAS（家用網路儲存裝置），加上 Anthropic 的 AI 工具 Claude Code，就可以讓 AI 幫你從零開始，把網站做出來、架上去、連網域都設定好。

這不是展示 demo，而是真正上線、可以讓全世界存取的網站。本站就是用這個方式架設的。

💡 本文以「2026 FIFA 世界盃即時賽程網站」為例，帶你走過完整流程。你可以換成任何主題：食譜、旅遊日記、股票資訊……AI 都能幫你做。
📦

你需要準備什麼？

🖥️
NAS
Synology、QNAP 等品牌皆可，需能執行 Docker 或 Linux 環境
🤖
Claude Code
Anthropic 提供的 AI 程式碼助手，需訂閱 Claude Pro 或 API
☁️
Cloudflare 帳號
免費申請，用於 Tunnel 和 DNS 管理
🌐
網域名稱
在 Cloudflare Registrar 購買，約 $10 USD / 年
📱
Telegram 帳號
用於建立 Bot，讓你隨時用手機遠端下指令給 AI
🔌
網路連線
NAS 需要能連上網際網路（家用寬頻即可）
📌 NAS 是這套方案的核心：它就是你的伺服器，24 小時開著、耗電極低（約 15–30W）。不需要租用昂貴的雲端主機。
💰

費用試算

項目費用說明
NAS 硬體已有使用現有設備，不需額外購買
Claude Code~$20 USD/月Claude Pro 訂閱，含 Claude Code 存取權
網域名稱~$10 USD/年在 Cloudflare Registrar 購買 .com 網域
Cloudflare Tunnel免費Cloudflare Zero Trust 免費方案
SSL 憑證 (HTTPS)免費Cloudflare 自動提供
Web Server免費Python 內建 http.server
DDoS 防護免費Cloudflare 免費方案已包含
💡 每月實際成本約 $21 USD（台幣約 680 元），比租用一台最便宜的 VPS 還划算，而且 AI 幫你寫程式、架設，完全不需要工程師。
🗺️

整體架構流程

整個系統的運作方式如下：

📱 你的手機
Telegram
→
🤖 Telegram Bot
接收指令
→
🧠 Claude Code
AI 執行任務
→
🖥️ NAS
儲存網頁檔案
🌍 訪客瀏覽器
→
☁️ Cloudflare
HTTPS + 防護
→
🚇 Tunnel
安全穿透
→
🖥️ NAS
回傳網頁

為什麼用 Cloudflare Tunnel？

傳統架站需要在路由器開放 Port 80/443，暴露家用 IP，有安全風險。Cloudflare Tunnel 讓 NAS 主動連出去，不需要開任何 Port，Cloudflare 自動提供 HTTPS，隱藏真實 IP，還有 DDoS 防護。

1

在 NAS 安裝 Claude Code

Claude Code 是一個在終端機（Terminal）中運行的 AI 工具，可以直接讀取、編寫、執行程式碼。你需要先在 NAS 上安裝 Python 環境，再安裝 Claude Code。

安裝 Python 與必要套件

apt install -y python3 python3-pip
pip3 install python-telegram-bot --break-system-packages

安裝 Claude Code CLI

npm install -g @anthropic-ai/claude-code
📌 需要先有 Node.js 環境。在 NAS 上可透過 Docker 容器或套件管理器安裝。Claude Code 需要登入 Anthropic 帳號並訂閱 Claude Pro。
2

用 Telegram Bot 遠端控制 Claude

在 NAS 上架設一個 Telegram Bot，讓你可以隨時用手機傳訊息給 Bot，Bot 再把指令交給 Claude Code 執行。這樣你就能在任何地方遠端操控你的 NAS 上的 AI。

Step 2-1：向 @BotFather 申請 Bot Token

  • 1
    打開 Telegram，搜尋 @BotFather
  • 2
    傳送 /newbot，依指示設定 Bot 名稱
  • 3
    取得 Bot Token（格式：1234567890:AAxxxxxxxxxx）
  • 4
    到 @userinfobot 取得你的 Telegram User ID

Step 2-2：建立 Bot 程式

mkdir -p /workspace/tg-bot
nano /workspace/tg-bot/bot.py

Bot 程式核心邏輯：接收 Telegram 訊息 → 呼叫 claude --print "訊息內容" → 回傳結果

import asyncio
from telegram import Update
from telegram.ext import ApplicationBuilder, MessageHandler, filters, ContextTypes

BOT_TOKEN = "你的Bot Token"
ALLOWED_USER_ID = 你的UserID  # 限制只有你能使用

async def handle_message(update: Update, context: ContextTypes.DEFAULT_TYPE):
    user_id = update.effective_user.id
    if user_id != ALLOWED_USER_ID:
        await update.message.reply_text("❌ 無權限")
        return
    text = update.message.text
    await update.message.reply_text(f"⏳ 執行中：{text}")
    proc = await asyncio.create_subprocess_exec(
        "claude", "--print", text,
        stdout=asyncio.subprocess.PIPE,
        stderr=asyncio.subprocess.PIPE,
        cwd="/workspace"
    )
    stdout, stderr = await asyncio.wait_for(proc.communicate(), timeout=120)
    output = stdout.decode() or stderr.decode() or "（無輸出）"
    if len(output) > 4000:
        output = output[:4000] + "\n...(截斷)"
    await update.message.reply_text(f"✅ 結果：\n{output}")

app = ApplicationBuilder().token(BOT_TOKEN).build()
app.add_handler(MessageHandler(filters.TEXT & ~filters.COMMAND, handle_message))
app.run_polling()

Step 2-3：設定開機自動啟動

# 建立 systemd 服務
cat > /etc/systemd/system/tg-bot.service << EOF
[Unit]
Description=Telegram Bot
After=network.target

[Service]
WorkingDirectory=/workspace/tg-bot
ExecStart=/usr/bin/python3 -u bot.py
Restart=always

[Install]
WantedBy=multi-user.target
EOF

systemctl enable tg-bot
systemctl start tg-bot
⚠️ Bot Token 就像密碼，絕對不要公開分享或上傳到 GitHub。使用 ALLOWED_USER_ID 限制只有自己能操控 Bot。
3

請 Claude 幫你寫網頁

Bot 架好後，直接在 Telegram 用中文下指令，Claude 就會幫你寫出完整的網頁程式碼。

範例指令（直接傳給 Bot）

「架構一個網頁，呈現 2026 FIFA 世界盃每日賽程與戰績，使用 worldcup26.ir API，每隊用中文名稱並放上國旗，台灣時區顯示，加上蝦皮廣告連結」

Claude 會自動：

啟動本地預覽伺服器

cd /workspace/worldcup
python3 -m http.server 8080

瀏覽器開啟 http://localhost:8080 確認網頁正常

4

申請 Cloudflare 帳號 + 購買網域

要讓全世界的人都能存取你的網站，你需要一個網域名稱（如 yoursite.com）。

為什麼推薦 Cloudflare Registrar 購買網域？

  • 1
    成本價：沒有隱藏費用，不像 GoDaddy 第一年便宜、續費暴漲
  • 2
    整合方便：買完直接設定 Tunnel，不需要額外轉 DNS
  • 3
    自動 HTTPS：Cloudflare 幫你免費申請 SSL 憑證
  • 4
    DDoS 防護：免費方案已包含企業等級防護
📌 操作步驟：前往 cloudflare.com → 免費註冊 → 左側選「網域登記員」→ 搜尋你想要的網域 → 購買。.com 網域約 $10 USD / 年（台幣約 320 元）。
5

設定 Cloudflare Tunnel 上線

Cloudflare Tunnel 讓你的 NAS 不需要開放任何 Port，就能讓外界連線進來。這是整套方案最關鍵的技術。

安裝 cloudflared

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
dpkg -i cloudflared-linux-amd64.deb

登入並建立 Tunnel

# 登入 Cloudflare（會產生瀏覽器驗證連結）
cloudflared tunnel login

# 建立名為 mysite 的 Tunnel
cloudflared tunnel create mysite

# 設定 DNS（將網域指向 Tunnel）
cloudflared tunnel route dns mysite yoursite.com
cloudflared tunnel route dns mysite www.yoursite.com

設定 config.yml

# /etc/cloudflared/config.yml
tunnel: <你的Tunnel ID>
credentials-file: /root/.cloudflared/<Tunnel ID>.json

ingress:
  - hostname: yoursite.com
    service: http://localhost:8080
  - hostname: www.yoursite.com
    service: http://localhost:8080
  - service: http_status:404

設定開機自動啟動

systemctl enable cloudflared
systemctl start cloudflared
🎉 完成後，在任何地方用瀏覽器開啟 https://yoursite.com，就能看到你的網站！全程不需要開路由器 Port，不暴露家用 IP。
6

申請 Google AdSense 賺廣告費

網站上線後，可以申請 Google AdSense 在網頁上顯示廣告，讓訪客為你帶來收益。

在網頁 <head> 加入驗證碼

<meta name="google-adsense-account" content="ca-pub-XXXXXXXXXXXXXXXX">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  ?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>

建立 ads.txt 驗證檔

# 建立 /workspace/yoursite/ads.txt
google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0

確認可存取：https://yoursite.com/ads.txt

📌 驗證失敗常見原因：根網域（yoursite.com）也需要有 AdSense 驗證碼可存取。如果你只設定了子網域（www.yoursite.com），需要把根網域也加入 Cloudflare Tunnel 路由。
🏆

成果展示

按照本文步驟，你將擁有：

🌐

一個真正上線的網站

HTTPS 加密 · 全球 CDN 加速 · DDoS 防護 · 開機自動啟動

功能狀態
自訂網域（yoursite.com）✅ 上線
HTTPS 自動憑證✅ 免費
Telegram Bot 遠端控制✅ 運行中
開機自動啟動✅ 已設定
Google AdSense 廣告✅ 已申請
需要工程師❌ 完全不需要
❓

新手常見問題

Q：沒有 NAS 可以用電腦替代嗎？

可以，但電腦需要 24 小時開著。NAS 的優勢是低耗電（15–30W）、靜音、穩定。如果只是測試，用電腦完全沒問題。

Q：Claude 寫的程式碼品質如何？

非常好。Claude Code 可以處理完整的前端網頁（HTML/CSS/JS）、API 串接、時區轉換、響應式設計等。遇到問題可以直接告訴它「這裡有 bug」，它會自動修復。

Q：網站流量大的話 NAS 撐得住嗎？

靜態網頁（HTML/CSS/JS）的效能很好。Cloudflare 有 CDN 快取，大部分請求不會打到你的 NAS。一般個人網站每天數千到數萬次瀏覽都沒問題。

Q：Cloudflare Tunnel 免費嗎？有流量限制嗎？

免費方案沒有流量限制（但有公平使用條款）。對於個人網站和中小型流量完全足夠，也不需要信用卡。

Q：我完全不懂程式，真的可以嗎？

可以。你只需要能看懂中文、會用 Telegram 傳訊息。所有指令 Claude 都會告訴你要複製貼上什麼，遇到錯誤直接把錯誤訊息貼給 Claude，它會幫你解決。

💬 留言板

登入 Google 帳號即可留言

載入留言中...