Framer 是強大的 No Code 網頁設計夥伴，但如果只使用預設的子網域（framer.website），會讓辛苦製作的成品缺乏專業感。
為了讓網站真正落地，串接自訂網域是第一步！而 Cloudflare 不僅是網域販售商，同時也提供了企業級的安全防護。透過本文的串接教學，你將學會如何利用 Cloudflare 的 SSL 加密、DDoS 攻擊阻擋以及全球 CDN 加速，讓你的 Framer 網站不僅擁有專業門面，更是為了讓你的 Framer 網站在安全性與 SEO 表現上，都能達到專業等級。
第一部分：在 Framer 中設定網域
Framer 由 AWS CloudFront 提供解析服務，網域預設是 framersite.com，如果想要在 Framer 中連接客製化網域：
在 Framer 中進入 Site Settings > Domains
點擊 Connect a domain you own
輸入網域名稱，Framer 會引導你進入驗證流程，確認你是網域持有者
第二部分： Cloudflare DNS 設定
Why Cloudflare?
網域在哪裡買有差嗎？DNS 又是什麼？前者關係到長期荷包，有的服務商第一年很便宜，但是養套殺後續給你漲價；後者則跟網站託管安全性有關。Cloudflare 作為全球第一大 CDN 服務提供商，提供業界首屈一指的資安服務。其中分為免費版和 Pro 版，以及其他如 WordPress 的加值服務。下表展示了 Cloudflare 相較於單純 DNS 提供商的優勢：
功能 | Cloudflare | 標準 DNS 服務 |
|---|---|---|
DNS 解析 | ✓ | ✓ |
CDN 加速 | ✓ | ✗ |
DDoS 防護 | ✓ | ✗ |
Web 應用防火牆 | ✓ | ✗ |
SSL/TLS 管理 | ✓ | ✗ |
速率限制 | ✓ | ✗ |
機器人防護 | ✓ | ✗ |
地理位置封鎖 | ✓ | ✗ |
免費版？Pro 版？嘟幾？
Cloudflare 提供的服務可簡單區分為網域販售 & 網域託管服務。想要擁有任何網域都需要綁年約，國內外許多廠商都有提供網域販售的服務，你在 GoDaddy 買到的網域和在 Cloudflare 買到的網域是一樣的（資費可能略不同）。而網域託管服務是 Cloudflare 的精隨，即使是免費版也提供企業級的 DDoS 防護。
免費版網域託管：適合個人網站、靜態網頁。包含必要 DDoS 資安防護。
Pro：商用網站視情況購買，另有 WordPress 整合等加值服務。
如果想要透過 Cloudflare 保護我們設計的 Framer 網站，該怎麼設定呢？
步驟 1：購買網域
國內外許多廠商都有提供網域販售的服務，包含中華電信、Godaddy … 等，Cloudflare 也有提供站內購買網域服務。
.com 網域約一年 10 USD，.io 近年來很夯要價 45 USD，也買得到一些酷酷的網域如：.xyz .ai，如果想購買 .com.tw 的網域，需洽台灣代理商，CloudFlare 無法直接購得，可以買了網域之後再透過「讓網域上線」移轉至 Cloudflare。
帳戶首頁 (Cloudflare 儀表板) > 讓網域上線 > 輸入現有網域
如果在 GoDaddy 等其他網域商設定過 DNS，要先斷開 GoDaddy 的 DNS 設定，或著在GoDaddy 重新指向 Cloudflare。可以參考這個影片。
步驟 2：核心！設定 DNS
DNS 的設定關係到 Cloudflare 提供的資安防護能否啟動，如果沒打開就是所有的流量都直接打到主機。設定的路徑在 Cloudflare 儀表板 - DNS - 記錄：
基本上這邊設定 DNS 只有前三個比較重要，確保 A 紀錄和 CNAME 的 Proxy 狀態為「橘色」打開，TTL 為自動，其他非紅框的部分則是其他如個人網域信箱的服務。
A 記錄：指向 IPv4 地址，用於根域名 (apex domain)
CNAME 記錄：別名記錄，指向另一個網域名稱，用於子網域
打開橘色雲朵的同時，Framer 中如果原本有開 Auto Connect 也會被自動關閉，這個是正常的結果，不影響 SEO 或前端渲染。Framer 中 Auto Connect 不要打開，不然其 AWS Cloud Front 會和 Cloudflare 衝突
步驟 3：AI Crawl Control
如果希望自己的文章能被搜尋引擎、AI 索引到，要將所有 AI 搜尋 Allow。這裏也可以看自己的網站是否有被 Google, ChatGPT, Meta 等搜尋引擎索引到，時間的尺度有 1 小時、24 小時。附帶一提，GPTBot 和 ChatGPT-User 雖然都是 OpenAI 的機器人，但前者是 GPT 自己主動爬取的，和 AEO 有關；後者是當你的網域出現在 ChatGPT 對話框的回答裡時會跑出來的。
同區在 Robots.txt 也可以看到被搜尋引擎爬取的概況。
如果這邊一開始沒辦法選取開啟 AI Crawl Control，可以先去 網路安全 - 設定 - 機器人流量，將封鎖 AI 機器人範圍 選項改為請勿封鎖（允許網路爬蟲）。
第三部分：SSL/TLS 安全加密
Cloudflare 和 Framer 都提供 SSL/TLS 加密，建議採用以下設定：
在 Cloudflare 中啟用 HTTPS 強制：進入 SSL/TLS > Overview，將加密模式設為 Full 或 Full (strict)，後者 Framer 已提供。
啟用 Always Use HTTPS：在 SSL/TLS > Edge Certificates 中勾選設定
TLS 1.3
第四部分：網路安全、DDoS 防護
Cloudflare自動檢測和緩解 DDoS 攻擊，不需額外配置。其保護涵蓋 OSI 模型的多個層級：
第 3/4 層（網路層）：防禦 SYN 洪泛、UDP 反射攻擊
第 7 層（應用層）：防禦 HTTP / HTTPS DDoS 攻擊
DNS 層：防禦隨機前綴攻擊等複雜 DNS 攻擊
儀錶板 - 網路安全 - 設定
DDoS 攻擊：結構描述驗證 (API 濫用開這個)、網路層 DDoS 攻擊保護、瀏覽器完整性檢查、Cloudflare 受控規則集、HTTP DDoS 攻擊保護。
如果打開機器人對抗模式，搜尋引擎有可能會索引不到，平常不用打開
用戶端濫用：持續的指令碼監視、Email Address Obfuscation
網域設定：取代不安全的 JavaScript 程式庫
第五部分：Zero Trust、WAF 防火牆
Zero Trust 和 WAF 是 Cloudflare 提供的進階防護功能，如果是單純展示靜態作品可以不需要使用，但如果牽涉到複雜項目如金流可以考慮應用。Zero Trust 在免費版有免費的 50 個應用額度，WAF 則是付費版才能解鎖，可防禦SQL注入、XSS、RFI 等攻擊。要啟用WAF：
在 Cloudflare 儀表板進入保護與連線 > 應用程式安全性 > WAF
Cloudflare 儀表板進入保護與連線 > Zero Trust
根據需求啟用其他規則集：
OWASP Modcore Rules：防禦常見攻擊
Bot Management：檢測和阻止惡意機器人
小結：透過 Proxy 取得完整 Cloudflare 防護
免費版 Cloudflare 網域託管提供：自動 SSL 加密、DDoS 緩解到 Zero Trust 等高規格資安防護，若有更複雜的防護需求，如：反制 SQL Injection、地域及 IP 限制、防止 spam 存取或註冊，建議諮詢專業工程師或資安單位。