以假亂真！Cloudflare Error Page Generator：自訂專屬的網頁錯誤頁面

知名的「Cloudflare」是全世界使用率最高的網頁加速、安全防護和全球內容傳遞網路（CDN）服務，有架過網站的朋友一定不陌生吧？這項服務出錯的機率非常低，出現錯誤頁面絕大多數是因為使用者的伺服器異常，它會顯示像上圖的錯誤訊息，明確標示出發生異常的位置。

早期 Cloudflare 幾乎是所有網站的必備服務，第一可以讓網站在全世界的各個地區都有加速效果，第二是可降低伺服器負載和流量。

從全球故障中誕生的創意：錯誤頁面產生器

上個月 Cloudflare 出現技術故障，有可能是創立至今最嚴重的故障，連帶導致 ChatGPT、X 在內等全球無數網站都無法正常載入，這個問題持續長達六小時之久。

於是 Cloudflare 錯誤頁面就被大家牢牢記住了，有國外開發者突發奇想把它拿來作為一個可自訂的錯誤頁面產生器，模仿知名的 Cloudflare 錯誤頁面，使用者也可以將它加入自己的網站作為錯誤頁面用，是不是有一種以假亂真的感覺呢？

什麼是 Cloudflare Error Page Generator？

本文要介紹的「Cloudflare Error Page Generator」是網頁錯誤頁面產生器，特色是可生成近似 Cloudflare 錯誤頁面外觀，透過編輯器針對頁面裡的各項細節進行修改和調整，例如錯誤頁面標題、錯誤代碼、各個部分的狀態和錯誤資訊（主要有使用者瀏覽器、Cloudflare 和原始網頁伺服器）、發生了什麼錯誤、我該怎麼做等，最終下載並作為網站的錯誤頁面使用。

以前怎麼沒想到還能這樣子做呢？國外開發者真是太天才啦！

網站資訊

使用教學

操作步驟

開啟專案頁面與開發環境準備

首先，開啟 Cloudflare Error Page Generator 開源項目 GitHub 頁面，如果是開發者想知道怎麼開始，在這裡可以找到 Python、Node.js / NPM 等快速入門說明。

選擇錯誤頁面類型與預覽

我推薦使用自訂錯誤頁面編輯器，在瀏覽器裡直接設定、調整錯誤頁面外觀。

第一步是從左上角選擇錯誤頁面類型，包括預設的內部伺服器錯誤、災難性故障、伺服器正常運作等，選取後會自動帶入各個項目。

自訂欄位資訊與中文支援

接著從編輯器進行各個欄位設定，例如錯誤頁面標題、錯誤代碼、狀態（瀏覽器、Cloudflare 或伺服器），每個欄位幾乎都能調整，而且還能使用中文，設定時會同步更新右側的錯誤頁面預覽。

預覽與匯出成果

最後從左下角點選在新分頁預覽、匯出 JSON 格式或是建立可分享的鏈結。

除了在錯誤頁面顯示使用者的真實 IP 位址、Cloudflare Ray ID 和資料中心位置比較困難以外，其他都很簡單（在專案頁面也有提供如何做到的方法，有興趣的話可以自行研究一下），最終將頁面匯出保存後就能做為錯誤頁面使用。