航站：基于Cloudflare Pages與Serverless的完整實(shí)踐)
如果你正在尋找一個(gè)完全免費(fèi)、無(wú)需服務(wù)器、支持密碼保護(hù)、自帶數(shù)據(jù)統(tǒng)計(jì)的私人導(dǎo)航站解決方案那么 Cloudflare 和 CF-Navs 這個(gè)組合可能就是為你量身定做的。過(guò)去搭建一個(gè)功能完整的導(dǎo)航站意味著你需要租用服務(wù)器、配置數(shù)據(jù)庫(kù)、處理安全防護(hù)甚至還要為流量付費(fèi)。對(duì)于個(gè)人開(kāi)發(fā)者、小團(tuán)隊(duì)或者只是想整理自己常用鏈接的用戶來(lái)說(shuō)這無(wú)疑是一道不低的門(mén)檻。很多人因此放棄了搭建或者只能使用功能簡(jiǎn)陋的靜態(tài)頁(yè)面。CF-Navs 的出現(xiàn)徹底改變了這個(gè)局面。它不是一個(gè)復(fù)雜的 CMS 系統(tǒng)而是一個(gè)專(zhuān)為 Cloudflare Pages 設(shè)計(jì)的、開(kāi)箱即用的靜態(tài)導(dǎo)航站模板。它的核心價(jià)值在于將動(dòng)態(tài)功能如密碼保護(hù)、數(shù)據(jù)統(tǒng)計(jì)通過(guò) Cloudflare 的 Serverless 服務(wù)如 Workers、KV來(lái)實(shí)現(xiàn)而前端則是純靜態(tài)頁(yè)面。這意味著你無(wú)需管理任何后端服務(wù)器就能獲得一個(gè)功能齊全、性能優(yōu)異且完全免費(fèi)的導(dǎo)航站。這篇文章將帶你從零開(kāi)始一步步在 Cloudflare 上部署屬于你自己的 CF-Navs 導(dǎo)航站。我們不僅會(huì)完成部署還會(huì)深入探討其背后的原理分析它如何實(shí)現(xiàn)“零成本”和“動(dòng)態(tài)功能”并分享配置密碼保護(hù)、查看訪問(wèn)統(tǒng)計(jì)以及一鍵備份數(shù)據(jù)的完整實(shí)踐。無(wú)論你是前端新手還是資深運(yùn)維都能通過(guò)本文獲得一個(gè)可立即投入使用的解決方案。1. 理解 CF-Navs它到底解決了什么問(wèn)題在深入動(dòng)手之前我們需要先理解 CF-Navs 的設(shè)計(jì)哲學(xué)。它瞄準(zhǔn)的是一個(gè)非常具體的痛點(diǎn)個(gè)人或小團(tuán)體需要一個(gè)美觀、私密、可追蹤的鏈接收藏中心但又不愿或無(wú)法承擔(dān)傳統(tǒng)動(dòng)態(tài)網(wǎng)站的運(yùn)維成本。傳統(tǒng)的解決方案無(wú)非兩種純靜態(tài)頁(yè)面使用 HTML/CSS/JS 手寫(xiě)或者用 Hugo、Hexo 等靜態(tài)站點(diǎn)生成器。優(yōu)點(diǎn)是部署簡(jiǎn)單、免費(fèi)托管選擇多如 GitHub Pages。缺點(diǎn)是功能單一幾乎無(wú)法實(shí)現(xiàn)密碼保護(hù)、數(shù)據(jù)統(tǒng)計(jì)等動(dòng)態(tài)需求每次增刪鏈接都需要重新構(gòu)建和部署體驗(yàn)不連貫。全棧動(dòng)態(tài)應(yīng)用使用 PHP、Node.js、Python 等搭配數(shù)據(jù)庫(kù)如 MySQL、SQLite。功能強(qiáng)大可以輕松實(shí)現(xiàn)用戶認(rèn)證、數(shù)據(jù)管理。但缺點(diǎn)非常明顯需要服務(wù)器、需要維護(hù)、可能有費(fèi)用并且對(duì)于“導(dǎo)航站”這個(gè)簡(jiǎn)單需求來(lái)說(shuō)架構(gòu)過(guò)于沉重。CF-Navs 巧妙地走了第三條路靜態(tài)站點(diǎn)生成 Serverless 函數(shù) 邊緣存儲(chǔ)。靜態(tài)站點(diǎn)用戶訪問(wèn)的頁(yè)面是預(yù)先生成的 HTML、CSS、JavaScript 文件托管在 Cloudflare Pages 上全球 CDN 加速訪問(wèn)速度極快且完全免費(fèi)。Serverless 函數(shù)當(dāng)需要“動(dòng)態(tài)”交互時(shí)比如驗(yàn)證密碼、提交訪問(wèn)記錄由 Cloudflare Workers一種 Serverless 函數(shù)來(lái)處理。你按請(qǐng)求次數(shù)付費(fèi)而 CF-Navs 的用量極低完全在 Cloudflare 的免費(fèi)額度內(nèi)。邊緣存儲(chǔ)密碼、訪問(wèn)統(tǒng)計(jì)等數(shù)據(jù)存儲(chǔ)在 Cloudflare KV一種全球分布的鍵值存儲(chǔ)中。同樣擁有豐富的免費(fèi)額度。這樣一來(lái)你獲得了一個(gè)功能動(dòng)態(tài)但架構(gòu)靜態(tài)的網(wǎng)站。它既擁有了靜態(tài)網(wǎng)站的部署簡(jiǎn)便、成本低廉和性能優(yōu)勢(shì)又具備了動(dòng)態(tài)網(wǎng)站的交互和數(shù)據(jù)處理能力。這就是 CF-Navs “零成本”部署強(qiáng)大功能的秘密所在。2. 核心概念與準(zhǔn)備工作在開(kāi)始部署前我們需要明確幾個(gè)核心概念和前提條件。2.1 核心組件解析Cloudflare Pages類(lèi)似于 GitHub Pages 或 Vercel是一個(gè)靜態(tài)網(wǎng)站托管平臺(tái)。它可以直接從你的 Git 倉(cāng)庫(kù)GitHub/GitLab拉取代碼并自動(dòng)構(gòu)建、部署。CF-Navs 的前端就部署在這里。Cloudflare Workers一個(gè)在全球 Cloudflare 邊緣節(jié)點(diǎn)運(yùn)行的 Serverless 函數(shù)平臺(tái)。CF-Navs 用它來(lái)處理密碼驗(yàn)證和訪問(wèn)統(tǒng)計(jì)的 API 請(qǐng)求。Cloudflare KV (Workers KV)一個(gè)低延遲、全球復(fù)制的鍵值存儲(chǔ)數(shù)據(jù)庫(kù)。CF-Navs 用它來(lái)存儲(chǔ)加密后的密碼哈希和每個(gè)鏈接的訪問(wèn)次數(shù)。CF-Navs 項(xiàng)目倉(cāng)庫(kù)一個(gè)開(kāi)源的 GitHub 倉(cāng)庫(kù)包含了導(dǎo)航站的所有前端代碼、Worker 腳本以及配置模板。2.2 環(huán)境與賬號(hào)準(zhǔn)備要完成部署你需要準(zhǔn)備好以下內(nèi)容一個(gè) Cloudflare 賬號(hào)這是所有服務(wù)的基礎(chǔ)注冊(cè)完全免費(fèi)。一個(gè) GitHub 賬號(hào)用于 Fork 和托管 CF-Navs 的代碼倉(cāng)庫(kù)。一個(gè)自定義域名可選但推薦你可以使用 Cloudflare Pages 提供的*.pages.dev子域名但為了更好的體驗(yàn)和品牌建議準(zhǔn)備一個(gè)自己的域名并將其 DNS 托管到 Cloudflare這是免費(fèi)服務(wù)。3. 第一步Fork 并配置項(xiàng)目倉(cāng)庫(kù)我們的旅程從 GitHub 開(kāi)始。訪問(wèn) CF-Navs 倉(cāng)庫(kù)打開(kāi)瀏覽器訪問(wèn) CF-Navs 的官方 GitHub 倉(cāng)庫(kù)通常搜索 “CF-Navs” 即可找到或訪問(wèn)類(lèi)似github.com/user/cf-navs的地址。Fork 倉(cāng)庫(kù)在倉(cāng)庫(kù)頁(yè)面右上角點(diǎn)擊Fork按鈕。這會(huì)在你的 GitHub 賬號(hào)下創(chuàng)建一個(gè)完全相同的副本你可以自由修改它而不會(huì)影響原項(xiàng)目?？寺〉奖镜乜蛇x如果你打算深度自定義樣式或添加大量鏈接可以使用git clone命令將你 Fork 后的倉(cāng)庫(kù)克隆到本地電腦進(jìn)行編輯。git clone https://github.com/你的用戶名/cf-navs.git cd cf-navs關(guān)鍵步驟修改導(dǎo)航站數(shù)據(jù)導(dǎo)航站的核心是鏈接數(shù)據(jù)。數(shù)據(jù)文件通常位于項(xiàng)目根目錄或src/data/目錄下是一個(gè) JSON 或 JavaScript 文件例如sites.js或data.json。你需要編輯這個(gè)文件按照其格式添加你的分類(lèi)和鏈接。格式通常如下所示// 文件src/data/sites.js const sites [ { id: dev, name: 開(kāi)發(fā)工具, links: [ { id: github, name: GitHub, url: https://github.com, icon: FaGithub, // 使用圖標(biāo)庫(kù)中的名稱(chēng) description: 全球最大的代碼托管平臺(tái) }, { id: stackoverflow, name: Stack Overflow, url: https://stackoverflow.com, icon: FaStackOverflow, description: 程序員問(wèn)答社區(qū) } // ... 更多鏈接 ] }, { id: design, name: 設(shè)計(jì)資源, links: [ // ... 設(shè)計(jì)類(lèi)鏈接 ] } // ... 更多分類(lèi) ]; export default sites;修改完成后如果你克隆到了本地記得提交并推送到你的 GitHub 倉(cāng)庫(kù)。git add . git commit -m “添加我的導(dǎo)航鏈接” git push origin main4. 第二步在 Cloudflare 上創(chuàng)建 KV 命名空間KV 將用于存儲(chǔ)密碼和統(tǒng)計(jì)信息我們需要先創(chuàng)建它。登錄 Cloudflare 儀表板 。在左側(cè)導(dǎo)航欄找到Workers Pages。切換到KV標(biāo)簽頁(yè)。點(diǎn)擊Create namespace。輸入一個(gè)名稱(chēng)例如MY_NAVS_STORE然后點(diǎn)擊Add。記錄 KV 的 ID創(chuàng)建成功后你會(huì)看到命名空間列表。找到你剛創(chuàng)建的MY_NAVS_STORE其下方有一串唯一的ID格式如xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。復(fù)制并保存好這個(gè) ID下一步會(huì)用到。5. 第三步部署到 Cloudflare Pages 并綁定 Workers這是將靜態(tài)站點(diǎn)和動(dòng)態(tài)邏輯結(jié)合的關(guān)鍵一步。在 Cloudflare 儀表板進(jìn)入Workers Pages點(diǎn)擊Create application-Pages。連接 Git選擇你 Fork 后的 CF-Navs GitHub 倉(cāng)庫(kù)。開(kāi)始設(shè)置項(xiàng)目名稱(chēng)可以自定義如my-navs。這將決定你的免費(fèi)訪問(wèn)域名my-navs.pages.dev。生產(chǎn)分支通常是main或master。構(gòu)建設(shè)置CF-Navs 是靜態(tài)項(xiàng)目通常構(gòu)建命令為npm run build或yarn build輸出目錄為dist或build。請(qǐng)根據(jù)項(xiàng)目根目錄的package.json文件確認(rèn)。如果項(xiàng)目說(shuō)明中已指出請(qǐng)遵循說(shuō)明。Build command:npm run buildBuild output directory:dist環(huán)境變量關(guān)鍵點(diǎn)擊Environment variables我們需要添加一個(gè)變量將 KV 命名空間綁定到 Pages 項(xiàng)目。Variable name:KV_NAMESPACE_ID名稱(chēng)必須準(zhǔn)確項(xiàng)目代碼會(huì)讀取這個(gè)變量Value:粘貼你剛才保存的 KV 命名空間 ID。點(diǎn)擊Add variable。保存并部署滾動(dòng)到底部點(diǎn)擊Save and Deploy。Cloudflare 會(huì)自動(dòng)拉取代碼、安裝依賴、執(zhí)行構(gòu)建命令并將生成的靜態(tài)文件部署到全球網(wǎng)絡(luò)。幾分鐘后你的導(dǎo)航站就可以通過(guò)https://my-navs.pages.dev訪問(wèn)了不過(guò)此時(shí)密碼保護(hù)和數(shù)據(jù)統(tǒng)計(jì)還未生效因?yàn)槲覀冞€沒(méi)有部署處理這些邏輯的 Worker。6. 第四步部署并配置 Worker 腳本CF-Navs 項(xiàng)目里通常包含一個(gè) Worker 腳本文件如_worker.js或functions目錄下的文件。Cloudflare Pages 有一個(gè)特性如果項(xiàng)目根目錄存在_worker.js文件它會(huì)在每個(gè)頁(yè)面請(qǐng)求時(shí)運(yùn)行這個(gè) Worker。確認(rèn) Worker 文件在你 Fork 的倉(cāng)庫(kù)中檢查根目錄下是否有_worker.js或functions/[[path]].js這樣的文件。這就是處理 API 請(qǐng)求如/api/auth/api/stats的腳本。綁定 KV 到 Worker僅僅有 KV 命名空間和 Worker 文件還不夠我們需要在 Pages 項(xiàng)目的設(shè)置中將這個(gè) KV 綁定到 Worker這樣 Worker 代碼才能讀寫(xiě)里面的數(shù)據(jù)。回到你的 Pages 項(xiàng)目Workers Pages-Pages- 點(diǎn)擊你的my-navs項(xiàng)目。進(jìn)入Settings標(biāo)簽頁(yè)。找到Functions部分點(diǎn)擊KV namespace bindings。點(diǎn)擊Add binding。Variable name:NAVS_KV這個(gè)名稱(chēng)必須與_worker.js代碼中使用的變量名完全一致請(qǐng)務(wù)必檢查代碼KV namespace:選擇你之前創(chuàng)建的MY_NAVS_STORE。點(diǎn)擊Save。重新部署由于我們修改了項(xiàng)目設(shè)置添加了 KV 綁定通常需要觸發(fā)一次重新部署才能生效。你可以進(jìn)入Deployments標(biāo)簽頁(yè)找到最新的部署點(diǎn)擊Retry或通過(guò)推送代碼到 Git 倉(cāng)庫(kù)來(lái)觸發(fā)新的部署。7. 第五步設(shè)置密碼保護(hù)部署并綁定成功后動(dòng)態(tài)功能就有了基礎(chǔ)?，F(xiàn)在來(lái)設(shè)置密碼。訪問(wèn)密碼設(shè)置接口CF-Navs 的 Worker 會(huì)提供一個(gè) API 端點(diǎn)來(lái)設(shè)置密碼。通常你需要向你的站點(diǎn)發(fā)送一個(gè)特定的 POST 請(qǐng)求。使用 curl 命令或 API 工具打開(kāi)終端或使用 Postman 等工具。請(qǐng)求 URL:https://my-navs.pages.dev/api/auth/setup(請(qǐng)將域名換成你的)請(qǐng)求方法:POST請(qǐng)求頭 (Headers):Content-Type: application/json請(qǐng)求體 (Body):{ password: 你想要設(shè)置的強(qiáng)密碼 }執(zhí)行請(qǐng)求發(fā)送請(qǐng)求。如果返回成功的狀態(tài)碼如 200并且消息提示密碼已設(shè)置則說(shuō)明密碼已經(jīng)加密存儲(chǔ)到 KV 中。驗(yàn)證密碼保護(hù)現(xiàn)在刷新你的導(dǎo)航站首頁(yè) (https://my-navs.pages.dev)。你應(yīng)該會(huì)被重定向到一個(gè)密碼輸入頁(yè)面。輸入你剛才設(shè)置的密碼即可進(jìn)入導(dǎo)航站。重要安全提醒請(qǐng)務(wù)必設(shè)置一個(gè)強(qiáng)密碼。api/auth/setup這個(gè)端點(diǎn)在生產(chǎn)環(huán)境中應(yīng)該被禁用或保護(hù)起來(lái)否則任何人都可以重置你的密碼。高級(jí)用法是在 Worker 代碼中通過(guò)環(huán)境變量設(shè)置一個(gè)管理令牌只有攜帶正確令牌的請(qǐng)求才能設(shè)置密碼。你可以根據(jù)項(xiàng)目文檔進(jìn)行配置。8. 第六步查看與管理數(shù)據(jù)統(tǒng)計(jì)密碼保護(hù)生效后數(shù)據(jù)統(tǒng)計(jì)功能也會(huì)自動(dòng)開(kāi)始工作。每當(dāng)有用戶在輸入正確密碼后點(diǎn)擊導(dǎo)航站上的任何一個(gè)鏈接Worker 都會(huì)在 KV 中為該鏈接的訪問(wèn)次數(shù)加一。查看統(tǒng)計(jì)信息CF-Navs 通常會(huì)提供一個(gè)管理面板或 API 來(lái)查看數(shù)據(jù)。常見(jiàn)入口是訪問(wèn)https://my-navs.pages.dev/admin或調(diào)用GET /api/stats接口。訪問(wèn)管理界面在瀏覽器中輸入你的導(dǎo)航站地址加上/admin路徑。你可能需要再次輸入密碼進(jìn)行管理員驗(yàn)證。查看數(shù)據(jù)在管理界面你應(yīng)該能看到每個(gè)鏈接的分類(lèi)、名稱(chēng)以及對(duì)應(yīng)的點(diǎn)擊次數(shù)。這些數(shù)據(jù)直觀地反映了你最常用的工具是什么。9. 第七步實(shí)現(xiàn)一鍵備份與恢復(fù)數(shù)據(jù)存儲(chǔ)在 Cloudflare KV 中雖然可靠但主動(dòng)備份是好習(xí)慣。CF-Navs 的 Worker 通常也會(huì)設(shè)計(jì)備份/恢復(fù)接口。備份數(shù)據(jù)向 Worker 發(fā)送請(qǐng)求導(dǎo)出所有數(shù)據(jù)包括站點(diǎn)配置和統(tǒng)計(jì)信息。請(qǐng)求 URL:GET https://my-navs.pages.dev/api/backup驗(yàn)證你可能需要在請(qǐng)求頭中攜帶密碼或令牌具體方式參考項(xiàng)目文檔。成功后會(huì)返回一個(gè)包含所有數(shù)據(jù)的 JSON 文件。你可以將這個(gè) JSON 文件保存到本地?；謴?fù)數(shù)據(jù)如果需要遷移或恢復(fù)可以將備份的 JSON 文件發(fā)送給 Worker。請(qǐng)求 URL:POST https://my-navs.pages.dev/api/restore請(qǐng)求頭:Content-Type: application/json請(qǐng)求體:將整個(gè)備份的 JSON 內(nèi)容放在請(qǐng)求體中。同樣可能需要管理員權(quán)限。自動(dòng)化備份建議你可以編寫(xiě)一個(gè)簡(jiǎn)單的腳本使用 Python、Node.js 或 GitHub Actions定期調(diào)用備份接口并將數(shù)據(jù)文件保存到你的 GitHub 倉(cāng)庫(kù)、本地硬盤(pán)或其他云存儲(chǔ)中實(shí)現(xiàn)自動(dòng)化備份。10. 第八步綁定自定義域名可選但推薦使用*.pages.dev域名可以工作但擁有自己的域名更專(zhuān)業(yè)。在 Cloudflare 儀表板中進(jìn)入你的 Pages 項(xiàng)目 (my-navs)。進(jìn)入Custom domains標(biāo)簽頁(yè)。點(diǎn)擊Add a custom domain。輸入你已托管在 Cloudflare 的完整域名例如nav.yourdomain.com。按照提示完成 DNS 記錄的驗(yàn)證和配置。Cloudflare 會(huì)自動(dòng)為你創(chuàng)建必要的 CNAME 記錄。等待 DNS 生效通常幾分鐘到幾小時(shí)。生效后你的導(dǎo)航站就可以通過(guò)https://nav.yourdomain.com訪問(wèn)了。11. 常見(jiàn)問(wèn)題與排查思路在部署和使用過(guò)程中你可能會(huì)遇到一些問(wèn)題。下表列出了常見(jiàn)問(wèn)題及其解決方法問(wèn)題現(xiàn)象可能原因排查方式解決方案訪問(wèn).pages.dev域名顯示空白頁(yè)或錯(cuò)誤1. 構(gòu)建失敗2. 輸出目錄配置錯(cuò)誤1. 進(jìn)入 Pages 項(xiàng)目的Deployments標(biāo)簽查看最新部署的日志。2. 檢查package.json中的build腳本和 Pages 設(shè)置中的輸出目錄是否匹配。1. 根據(jù)構(gòu)建日志修復(fù)錯(cuò)誤通常是依賴問(wèn)題。2. 在 Pages 項(xiàng)目設(shè)置的Builds deployments中修正構(gòu)建命令和輸出目錄。密碼保護(hù)不生效直接進(jìn)入網(wǎng)站1. Worker 未成功部署或綁定。2._worker.js文件不存在或路徑錯(cuò)誤。3. KV 綁定變量名不匹配。1. 檢查 Pages 項(xiàng)目的Deployments確認(rèn)_worker.js是否被包含在部署中。2. 檢查 Pages 項(xiàng)目Settings-Functions中 KV 綁定的變量名是否與_worker.js代碼中使用的變量名完全一致區(qū)分大小寫(xiě)。1. 確保_worker.js位于項(xiàng)目根目錄并已提交到 Git。2. 修改 KV 綁定名稱(chēng)或 Worker 代碼中的變量名使兩者一致。設(shè)置密碼的 API (/api/auth/setup) 返回 404 或 4051. Worker 路由未正確配置。2. 該端點(diǎn)已被禁用。1. 檢查_(kāi)worker.js文件確認(rèn)是否有處理/api/auth/setup路徑的路由邏輯。2. 查看項(xiàng)目文檔確認(rèn)設(shè)置密碼的正確方式。1. 確保你的代碼是最新版本并且 Worker 腳本正確部署。2. 按照項(xiàng)目文檔的指引操作可能需要先通過(guò)其他方式初始化。數(shù)據(jù)統(tǒng)計(jì)不增長(zhǎng)1. 點(diǎn)擊事件未正確觸發(fā)或上報(bào)。2. KV 寫(xiě)入失敗權(quán)限、額度。1. 打開(kāi)瀏覽器開(kāi)發(fā)者工具的Network標(biāo)簽點(diǎn)擊一個(gè)鏈接查看是否有向/api/record或類(lèi)似接口發(fā)送請(qǐng)求。2. 檢查 Worker 的日志在Workers Pages- 你的 Worker -Logs。1. 檢查前端代碼是否正常加載和執(zhí)行。2. 確認(rèn) KV 綁定正確且未超出免費(fèi)額度基本不可能超出。自定義域名 SSL 證書(shū)錯(cuò)誤或無(wú)法訪問(wèn)1. DNS 未生效或配置錯(cuò)誤。2. Cloudflare 代理未開(kāi)啟橙色云朵。1. 在 Cloudflare 儀表板的DNS設(shè)置中檢查該域名的 CNAME 記錄是否正確指向 Pages 的地址。2. 確認(rèn)該 DNS 記錄的代理狀態(tài)是“已代理”橙色云朵。1. 等待 DNS 傳播或檢查 CNAME 記錄值。2. 確保 Cloudflare 的代理功能開(kāi)啟SSL/TLS 加密模式設(shè)置為“完全”或“嚴(yán)格”。12. 最佳實(shí)踐與高級(jí)配置建議為了讓你的 CF-Navs 導(dǎo)航站更安全、穩(wěn)定和個(gè)性化可以考慮以下實(shí)踐強(qiáng)化安全禁用公開(kāi)的 Setup API在生產(chǎn)環(huán)境修改_worker.js讓/api/auth/setup端點(diǎn)只接受來(lái)自你信任的 IP 地址的請(qǐng)求或者要求一個(gè)額外的、通過(guò)環(huán)境變量設(shè)置的管理密鑰。使用強(qiáng)密碼密碼是唯一防線務(wù)必使用密碼管理器生成并保存強(qiáng)密碼。定期輪換密碼定期通過(guò) API 更新密碼。優(yōu)化性能與體驗(yàn)自定義主題CF-Navs 通常使用 Tailwind CSS 等框架你可以通過(guò)修改src/styles目錄下的文件來(lái)改變顏色、字體、布局等。配置合適的緩存在 Cloudflare Pages 的設(shè)置中可以針對(duì)靜態(tài)資源配置緩存規(guī)則進(jìn)一步提升加載速度。啟用 Brotli 壓縮Cloudflare 默認(rèn)啟用確保你的構(gòu)建工具如 Vite也配置了合適的壓縮。數(shù)據(jù)管理定期備份如前所述建立自動(dòng)化備份流程將 KV 數(shù)據(jù)備份到其他位置。清理舊數(shù)據(jù)如果統(tǒng)計(jì)數(shù)據(jù)過(guò)多可以考慮在 Worker 中編寫(xiě)邏輯定期清理過(guò)于陳舊的訪問(wèn)記錄。擴(kuò)展功能搜索功能如果鏈接很多可以考慮在前端集成一個(gè)輕量級(jí)客戶端搜索庫(kù)如fuse.js。圖標(biāo)庫(kù)項(xiàng)目通常使用 React Icons你可以訪問(wèn)其官網(wǎng)查找并替換更多合適的圖標(biāo)。多用戶支持高級(jí)修改 Worker 邏輯支持多個(gè)密碼或簡(jiǎn)單的用戶系統(tǒng)但這會(huì)顯著增加復(fù)雜度。通過(guò)以上步驟你已經(jīng)成功部署了一個(gè)功能完整、完全免費(fèi)且由你完全掌控的私人導(dǎo)航站。這個(gè)方案的精妙之處在于它利用 Cloudflare 的免費(fèi)生態(tài)將 Serverless 的威力賦予了靜態(tài)網(wǎng)站完美匹配了個(gè)人導(dǎo)航站“輕動(dòng)態(tài)、重展示”的需求。 零成本搭建私有導(dǎo)航站：基于Cloudflare Pages與Serverless的完整實(shí)踐
如果你正在尋找一個(gè)完全免費(fèi)、無(wú)需服務(wù)器、支持密碼保護(hù)、自帶數(shù)據(jù)統(tǒng)計(jì)的私人導(dǎo)航站解決方案那么 Cloudflare 和 CF-Navs 這個(gè)組合可能就是為你量身定做的。過(guò)去搭建一個(gè)功能完整的導(dǎo)航站意味著你需要租用服務(wù)器、配置數(shù)據(jù)庫(kù)、處理安全防護(hù)甚至還要為流量付費(fèi)。對(duì)于個(gè)人開(kāi)發(fā)者、小團(tuán)隊(duì)或者只是想整理自己常用鏈接的用戶來(lái)說(shuō)這無(wú)疑是一道不低的門(mén)檻。很多人因此放棄了搭建或者只能使用功能簡(jiǎn)陋的靜態(tài)頁(yè)面。CF-Navs 的出現(xiàn)徹底改變了這個(gè)局面。它不是一個(gè)復(fù)雜的 CMS 系統(tǒng)而是一個(gè)專(zhuān)為 Cloudflare Pages 設(shè)計(jì)的、開(kāi)箱即用的靜態(tài)導(dǎo)航站模板。它的核心價(jià)值在于將動(dòng)態(tài)功能如密碼保護(hù)、數(shù)據(jù)統(tǒng)計(jì)通過(guò) Cloudflare 的 Serverless 服務(wù)如 Workers、KV來(lái)實(shí)現(xiàn)而前端則是純靜態(tài)頁(yè)面。這意味著你無(wú)需管理任何后端服務(wù)器就能獲得一個(gè)功能齊全、性能優(yōu)異且完全免費(fèi)的導(dǎo)航站。這篇文章將帶你從零開(kāi)始一步步在 Cloudflare 上部署屬于你自己的 CF-Navs 導(dǎo)航站。我們不僅會(huì)完成部署還會(huì)深入探討其背后的原理分析它如何實(shí)現(xiàn)“零成本”和“動(dòng)態(tài)功能”并分享配置密碼保護(hù)、查看訪問(wèn)統(tǒng)計(jì)以及一鍵備份數(shù)據(jù)的完整實(shí)踐。無(wú)論你是前端新手還是資深運(yùn)維都能通過(guò)本文獲得一個(gè)可立即投入使用的解決方案。1. 理解 CF-Navs它到底解決了什么問(wèn)題在深入動(dòng)手之前我們需要先理解 CF-Navs 的設(shè)計(jì)哲學(xué)。它瞄準(zhǔn)的是一個(gè)非常具體的痛點(diǎn)個(gè)人或小團(tuán)體需要一個(gè)美觀、私密、可追蹤的鏈接收藏中心但又不愿或無(wú)法承擔(dān)傳統(tǒng)動(dòng)態(tài)網(wǎng)站的運(yùn)維成本。傳統(tǒng)的解決方案無(wú)非兩種純靜態(tài)頁(yè)面使用 HTML/CSS/JS 手寫(xiě)或者用 Hugo、Hexo 等靜態(tài)站點(diǎn)生成器。優(yōu)點(diǎn)是部署簡(jiǎn)單、免費(fèi)托管選擇多如 GitHub Pages。缺點(diǎn)是功能單一幾乎無(wú)法實(shí)現(xiàn)密碼保護(hù)、數(shù)據(jù)統(tǒng)計(jì)等動(dòng)態(tài)需求每次增刪鏈接都需要重新構(gòu)建和部署體驗(yàn)不連貫。全棧動(dòng)態(tài)應(yīng)用使用 PHP、Node.js、Python 等搭配數(shù)據(jù)庫(kù)如 MySQL、SQLite。功能強(qiáng)大可以輕松實(shí)現(xiàn)用戶認(rèn)證、數(shù)據(jù)管理。但缺點(diǎn)非常明顯需要服務(wù)器、需要維護(hù)、可能有費(fèi)用并且對(duì)于“導(dǎo)航站”這個(gè)簡(jiǎn)單需求來(lái)說(shuō)架構(gòu)過(guò)于沉重。CF-Navs 巧妙地走了第三條路靜態(tài)站點(diǎn)生成 Serverless 函數(shù) 邊緣存儲(chǔ)。靜態(tài)站點(diǎn)用戶訪問(wèn)的頁(yè)面是預(yù)先生成的 HTML、CSS、JavaScript 文件托管在 Cloudflare Pages 上全球 CDN 加速訪問(wèn)速度極快且完全免費(fèi)。Serverless 函數(shù)當(dāng)需要“動(dòng)態(tài)”交互時(shí)比如驗(yàn)證密碼、提交訪問(wèn)記錄由 Cloudflare Workers一種 Serverless 函數(shù)來(lái)處理。你按請(qǐng)求次數(shù)付費(fèi)而 CF-Navs 的用量極低完全在 Cloudflare 的免費(fèi)額度內(nèi)。邊緣存儲(chǔ)密碼、訪問(wèn)統(tǒng)計(jì)等數(shù)據(jù)存儲(chǔ)在 Cloudflare KV一種全球分布的鍵值存儲(chǔ)中。同樣擁有豐富的免費(fèi)額度。這樣一來(lái)你獲得了一個(gè)功能動(dòng)態(tài)但架構(gòu)靜態(tài)的網(wǎng)站。它既擁有了靜態(tài)網(wǎng)站的部署簡(jiǎn)便、成本低廉和性能優(yōu)勢(shì)又具備了動(dòng)態(tài)網(wǎng)站的交互和數(shù)據(jù)處理能力。這就是 CF-Navs “零成本”部署強(qiáng)大功能的秘密所在。2. 核心概念與準(zhǔn)備工作在開(kāi)始部署前我們需要明確幾個(gè)核心概念和前提條件。2.1 核心組件解析Cloudflare Pages類(lèi)似于 GitHub Pages 或 Vercel是一個(gè)靜態(tài)網(wǎng)站托管平臺(tái)。它可以直接從你的 Git 倉(cāng)庫(kù)GitHub/GitLab拉取代碼并自動(dòng)構(gòu)建、部署。CF-Navs 的前端就部署在這里。Cloudflare Workers一個(gè)在全球 Cloudflare 邊緣節(jié)點(diǎn)運(yùn)行的 Serverless 函數(shù)平臺(tái)。CF-Navs 用它來(lái)處理密碼驗(yàn)證和訪問(wèn)統(tǒng)計(jì)的 API 請(qǐng)求。Cloudflare KV (Workers KV)一個(gè)低延遲、全球復(fù)制的鍵值存儲(chǔ)數(shù)據(jù)庫(kù)。CF-Navs 用它來(lái)存儲(chǔ)加密后的密碼哈希和每個(gè)鏈接的訪問(wèn)次數(shù)。CF-Navs 項(xiàng)目倉(cāng)庫(kù)一個(gè)開(kāi)源的 GitHub 倉(cāng)庫(kù)包含了導(dǎo)航站的所有前端代碼、Worker 腳本以及配置模板。2.2 環(huán)境與賬號(hào)準(zhǔn)備要完成部署你需要準(zhǔn)備好以下內(nèi)容一個(gè) Cloudflare 賬號(hào)這是所有服務(wù)的基礎(chǔ)注冊(cè)完全免費(fèi)。一個(gè) GitHub 賬號(hào)用于 Fork 和托管 CF-Navs 的代碼倉(cāng)庫(kù)。一個(gè)自定義域名可選但推薦你可以使用 Cloudflare Pages 提供的*.pages.dev子域名但為了更好的體驗(yàn)和品牌建議準(zhǔn)備一個(gè)自己的域名并將其 DNS 托管到 Cloudflare這是免費(fèi)服務(wù)。3. 第一步Fork 并配置項(xiàng)目倉(cāng)庫(kù)我們的旅程從 GitHub 開(kāi)始。訪問(wèn) CF-Navs 倉(cāng)庫(kù)打開(kāi)瀏覽器訪問(wèn) CF-Navs 的官方 GitHub 倉(cāng)庫(kù)通常搜索 “CF-Navs” 即可找到或訪問(wèn)類(lèi)似github.com/user/cf-navs的地址。Fork 倉(cāng)庫(kù)在倉(cāng)庫(kù)頁(yè)面右上角點(diǎn)擊Fork按鈕。這會(huì)在你的 GitHub 賬號(hào)下創(chuàng)建一個(gè)完全相同的副本你可以自由修改它而不會(huì)影響原項(xiàng)目?？寺〉奖镜乜蛇x如果你打算深度自定義樣式或添加大量鏈接可以使用git clone命令將你 Fork 后的倉(cāng)庫(kù)克隆到本地電腦進(jìn)行編輯。git clone https://github.com/你的用戶名/cf-navs.git cd cf-navs關(guān)鍵步驟修改導(dǎo)航站數(shù)據(jù)導(dǎo)航站的核心是鏈接數(shù)據(jù)。數(shù)據(jù)文件通常位于項(xiàng)目根目錄或src/data/目錄下是一個(gè) JSON 或 JavaScript 文件例如sites.js或data.json。你需要編輯這個(gè)文件按照其格式添加你的分類(lèi)和鏈接。格式通常如下所示// 文件src/data/sites.js const sites [ { id: dev, name: 開(kāi)發(fā)工具, links: [ { id: github, name: GitHub, url: https://github.com, icon: FaGithub, // 使用圖標(biāo)庫(kù)中的名稱(chēng) description: 全球最大的代碼托管平臺(tái) }, { id: stackoverflow, name: Stack Overflow, url: https://stackoverflow.com, icon: FaStackOverflow, description: 程序員問(wèn)答社區(qū) } // ... 更多鏈接 ] }, { id: design, name: 設(shè)計(jì)資源, links: [ // ... 設(shè)計(jì)類(lèi)鏈接 ] } // ... 更多分類(lèi) ]; export default sites;修改完成后如果你克隆到了本地記得提交并推送到你的 GitHub 倉(cāng)庫(kù)。git add . git commit -m “添加我的導(dǎo)航鏈接” git push origin main4. 第二步在 Cloudflare 上創(chuàng)建 KV 命名空間KV 將用于存儲(chǔ)密碼和統(tǒng)計(jì)信息我們需要先創(chuàng)建它。登錄 Cloudflare 儀表板 。在左側(cè)導(dǎo)航欄找到Workers Pages。切換到KV標(biāo)簽頁(yè)。點(diǎn)擊Create namespace。輸入一個(gè)名稱(chēng)例如MY_NAVS_STORE然后點(diǎn)擊Add。記錄 KV 的 ID創(chuàng)建成功后你會(huì)看到命名空間列表。找到你剛創(chuàng)建的MY_NAVS_STORE其下方有一串唯一的ID格式如xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。復(fù)制并保存好這個(gè) ID下一步會(huì)用到。5. 第三步部署到 Cloudflare Pages 并綁定 Workers這是將靜態(tài)站點(diǎn)和動(dòng)態(tài)邏輯結(jié)合的關(guān)鍵一步。在 Cloudflare 儀表板進(jìn)入Workers Pages點(diǎn)擊Create application-Pages。連接 Git選擇你 Fork 后的 CF-Navs GitHub 倉(cāng)庫(kù)。開(kāi)始設(shè)置項(xiàng)目名稱(chēng)可以自定義如my-navs。這將決定你的免費(fèi)訪問(wèn)域名my-navs.pages.dev。生產(chǎn)分支通常是main或master。構(gòu)建設(shè)置CF-Navs 是靜態(tài)項(xiàng)目通常構(gòu)建命令為npm run build或yarn build輸出目錄為dist或build。請(qǐng)根據(jù)項(xiàng)目根目錄的package.json文件確認(rèn)。如果項(xiàng)目說(shuō)明中已指出請(qǐng)遵循說(shuō)明。Build command:npm run buildBuild output directory:dist環(huán)境變量關(guān)鍵點(diǎn)擊Environment variables我們需要添加一個(gè)變量將 KV 命名空間綁定到 Pages 項(xiàng)目。Variable name:KV_NAMESPACE_ID名稱(chēng)必須準(zhǔn)確項(xiàng)目代碼會(huì)讀取這個(gè)變量Value:粘貼你剛才保存的 KV 命名空間 ID。點(diǎn)擊Add variable。保存并部署滾動(dòng)到底部點(diǎn)擊Save and Deploy。Cloudflare 會(huì)自動(dòng)拉取代碼、安裝依賴、執(zhí)行構(gòu)建命令并將生成的靜態(tài)文件部署到全球網(wǎng)絡(luò)。幾分鐘后你的導(dǎo)航站就可以通過(guò)https://my-navs.pages.dev訪問(wèn)了不過(guò)此時(shí)密碼保護(hù)和數(shù)據(jù)統(tǒng)計(jì)還未生效因?yàn)槲覀冞€沒(méi)有部署處理這些邏輯的 Worker。6. 第四步部署并配置 Worker 腳本CF-Navs 項(xiàng)目里通常包含一個(gè) Worker 腳本文件如_worker.js或functions目錄下的文件。Cloudflare Pages 有一個(gè)特性如果項(xiàng)目根目錄存在_worker.js文件它會(huì)在每個(gè)頁(yè)面請(qǐng)求時(shí)運(yùn)行這個(gè) Worker。確認(rèn) Worker 文件在你 Fork 的倉(cāng)庫(kù)中檢查根目錄下是否有_worker.js或functions/[[path]].js這樣的文件。這就是處理 API 請(qǐng)求如/api/auth/api/stats的腳本。綁定 KV 到 Worker僅僅有 KV 命名空間和 Worker 文件還不夠我們需要在 Pages 項(xiàng)目的設(shè)置中將這個(gè) KV 綁定到 Worker這樣 Worker 代碼才能讀寫(xiě)里面的數(shù)據(jù)。回到你的 Pages 項(xiàng)目Workers Pages-Pages- 點(diǎn)擊你的my-navs項(xiàng)目。進(jìn)入Settings標(biāo)簽頁(yè)。找到Functions部分點(diǎn)擊KV namespace bindings。點(diǎn)擊Add binding。Variable name:NAVS_KV這個(gè)名稱(chēng)必須與_worker.js代碼中使用的變量名完全一致請(qǐng)務(wù)必檢查代碼KV namespace:選擇你之前創(chuàng)建的MY_NAVS_STORE。點(diǎn)擊Save。重新部署由于我們修改了項(xiàng)目設(shè)置添加了 KV 綁定通常需要觸發(fā)一次重新部署才能生效。你可以進(jìn)入Deployments標(biāo)簽頁(yè)找到最新的部署點(diǎn)擊Retry或通過(guò)推送代碼到 Git 倉(cāng)庫(kù)來(lái)觸發(fā)新的部署。7. 第五步設(shè)置密碼保護(hù)部署并綁定成功后動(dòng)態(tài)功能就有了基礎(chǔ)?，F(xiàn)在來(lái)設(shè)置密碼。訪問(wèn)密碼設(shè)置接口CF-Navs 的 Worker 會(huì)提供一個(gè) API 端點(diǎn)來(lái)設(shè)置密碼。通常你需要向你的站點(diǎn)發(fā)送一個(gè)特定的 POST 請(qǐng)求。使用 curl 命令或 API 工具打開(kāi)終端或使用 Postman 等工具。請(qǐng)求 URL:https://my-navs.pages.dev/api/auth/setup(請(qǐng)將域名換成你的)請(qǐng)求方法:POST請(qǐng)求頭 (Headers):Content-Type: application/json請(qǐng)求體 (Body):{ password: 你想要設(shè)置的強(qiáng)密碼 }執(zhí)行請(qǐng)求發(fā)送請(qǐng)求。如果返回成功的狀態(tài)碼如 200并且消息提示密碼已設(shè)置則說(shuō)明密碼已經(jīng)加密存儲(chǔ)到 KV 中。驗(yàn)證密碼保護(hù)現(xiàn)在刷新你的導(dǎo)航站首頁(yè) (https://my-navs.pages.dev)。你應(yīng)該會(huì)被重定向到一個(gè)密碼輸入頁(yè)面。輸入你剛才設(shè)置的密碼即可進(jìn)入導(dǎo)航站。重要安全提醒請(qǐng)務(wù)必設(shè)置一個(gè)強(qiáng)密碼。api/auth/setup這個(gè)端點(diǎn)在生產(chǎn)環(huán)境中應(yīng)該被禁用或保護(hù)起來(lái)否則任何人都可以重置你的密碼。高級(jí)用法是在 Worker 代碼中通過(guò)環(huán)境變量設(shè)置一個(gè)管理令牌只有攜帶正確令牌的請(qǐng)求才能設(shè)置密碼。你可以根據(jù)項(xiàng)目文檔進(jìn)行配置。8. 第六步查看與管理數(shù)據(jù)統(tǒng)計(jì)密碼保護(hù)生效后數(shù)據(jù)統(tǒng)計(jì)功能也會(huì)自動(dòng)開(kāi)始工作。每當(dāng)有用戶在輸入正確密碼后點(diǎn)擊導(dǎo)航站上的任何一個(gè)鏈接Worker 都會(huì)在 KV 中為該鏈接的訪問(wèn)次數(shù)加一。查看統(tǒng)計(jì)信息CF-Navs 通常會(huì)提供一個(gè)管理面板或 API 來(lái)查看數(shù)據(jù)。常見(jiàn)入口是訪問(wèn)https://my-navs.pages.dev/admin或調(diào)用GET /api/stats接口。訪問(wèn)管理界面在瀏覽器中輸入你的導(dǎo)航站地址加上/admin路徑。你可能需要再次輸入密碼進(jìn)行管理員驗(yàn)證。查看數(shù)據(jù)在管理界面你應(yīng)該能看到每個(gè)鏈接的分類(lèi)、名稱(chēng)以及對(duì)應(yīng)的點(diǎn)擊次數(shù)。這些數(shù)據(jù)直觀地反映了你最常用的工具是什么。9. 第七步實(shí)現(xiàn)一鍵備份與恢復(fù)數(shù)據(jù)存儲(chǔ)在 Cloudflare KV 中雖然可靠但主動(dòng)備份是好習(xí)慣。CF-Navs 的 Worker 通常也會(huì)設(shè)計(jì)備份/恢復(fù)接口。備份數(shù)據(jù)向 Worker 發(fā)送請(qǐng)求導(dǎo)出所有數(shù)據(jù)包括站點(diǎn)配置和統(tǒng)計(jì)信息。請(qǐng)求 URL:GET https://my-navs.pages.dev/api/backup驗(yàn)證你可能需要在請(qǐng)求頭中攜帶密碼或令牌具體方式參考項(xiàng)目文檔。成功后會(huì)返回一個(gè)包含所有數(shù)據(jù)的 JSON 文件。你可以將這個(gè) JSON 文件保存到本地?；謴?fù)數(shù)據(jù)如果需要遷移或恢復(fù)可以將備份的 JSON 文件發(fā)送給 Worker。請(qǐng)求 URL:POST https://my-navs.pages.dev/api/restore請(qǐng)求頭:Content-Type: application/json請(qǐng)求體:將整個(gè)備份的 JSON 內(nèi)容放在請(qǐng)求體中。同樣可能需要管理員權(quán)限。自動(dòng)化備份建議你可以編寫(xiě)一個(gè)簡(jiǎn)單的腳本使用 Python、Node.js 或 GitHub Actions定期調(diào)用備份接口并將數(shù)據(jù)文件保存到你的 GitHub 倉(cāng)庫(kù)、本地硬盤(pán)或其他云存儲(chǔ)中實(shí)現(xiàn)自動(dòng)化備份。10. 第八步綁定自定義域名可選但推薦使用*.pages.dev域名可以工作但擁有自己的域名更專(zhuān)業(yè)。在 Cloudflare 儀表板中進(jìn)入你的 Pages 項(xiàng)目 (my-navs)。進(jìn)入Custom domains標(biāo)簽頁(yè)。點(diǎn)擊Add a custom domain。輸入你已托管在 Cloudflare 的完整域名例如nav.yourdomain.com。按照提示完成 DNS 記錄的驗(yàn)證和配置。Cloudflare 會(huì)自動(dòng)為你創(chuàng)建必要的 CNAME 記錄。等待 DNS 生效通常幾分鐘到幾小時(shí)。生效后你的導(dǎo)航站就可以通過(guò)https://nav.yourdomain.com訪問(wèn)了。11. 常見(jiàn)問(wèn)題與排查思路在部署和使用過(guò)程中你可能會(huì)遇到一些問(wèn)題。下表列出了常見(jiàn)問(wèn)題及其解決方法問(wèn)題現(xiàn)象可能原因排查方式解決方案訪問(wèn).pages.dev域名顯示空白頁(yè)或錯(cuò)誤1. 構(gòu)建失敗2. 輸出目錄配置錯(cuò)誤1. 進(jìn)入 Pages 項(xiàng)目的Deployments標(biāo)簽查看最新部署的日志。2. 檢查package.json中的build腳本和 Pages 設(shè)置中的輸出目錄是否匹配。1. 根據(jù)構(gòu)建日志修復(fù)錯(cuò)誤通常是依賴問(wèn)題。2. 在 Pages 項(xiàng)目設(shè)置的Builds deployments中修正構(gòu)建命令和輸出目錄。密碼保護(hù)不生效直接進(jìn)入網(wǎng)站1. Worker 未成功部署或綁定。2._worker.js文件不存在或路徑錯(cuò)誤。3. KV 綁定變量名不匹配。1. 檢查 Pages 項(xiàng)目的Deployments確認(rèn)_worker.js是否被包含在部署中。2. 檢查 Pages 項(xiàng)目Settings-Functions中 KV 綁定的變量名是否與_worker.js代碼中使用的變量名完全一致區(qū)分大小寫(xiě)。1. 確保_worker.js位于項(xiàng)目根目錄并已提交到 Git。2. 修改 KV 綁定名稱(chēng)或 Worker 代碼中的變量名使兩者一致。設(shè)置密碼的 API (/api/auth/setup) 返回 404 或 4051. Worker 路由未正確配置。2. 該端點(diǎn)已被禁用。1. 檢查_(kāi)worker.js文件確認(rèn)是否有處理/api/auth/setup路徑的路由邏輯。2. 查看項(xiàng)目文檔確認(rèn)設(shè)置密碼的正確方式。1. 確保你的代碼是最新版本并且 Worker 腳本正確部署。2. 按照項(xiàng)目文檔的指引操作可能需要先通過(guò)其他方式初始化。數(shù)據(jù)統(tǒng)計(jì)不增長(zhǎng)1. 點(diǎn)擊事件未正確觸發(fā)或上報(bào)。2. KV 寫(xiě)入失敗權(quán)限、額度。1. 打開(kāi)瀏覽器開(kāi)發(fā)者工具的Network標(biāo)簽點(diǎn)擊一個(gè)鏈接查看是否有向/api/record或類(lèi)似接口發(fā)送請(qǐng)求。2. 檢查 Worker 的日志在Workers Pages- 你的 Worker -Logs。1. 檢查前端代碼是否正常加載和執(zhí)行。2. 確認(rèn) KV 綁定正確且未超出免費(fèi)額度基本不可能超出。自定義域名 SSL 證書(shū)錯(cuò)誤或無(wú)法訪問(wèn)1. DNS 未生效或配置錯(cuò)誤。2. Cloudflare 代理未開(kāi)啟橙色云朵。1. 在 Cloudflare 儀表板的DNS設(shè)置中檢查該域名的 CNAME 記錄是否正確指向 Pages 的地址。2. 確認(rèn)該 DNS 記錄的代理狀態(tài)是“已代理”橙色云朵。1. 等待 DNS 傳播或檢查 CNAME 記錄值。2. 確保 Cloudflare 的代理功能開(kāi)啟SSL/TLS 加密模式設(shè)置為“完全”或“嚴(yán)格”。12. 最佳實(shí)踐與高級(jí)配置建議為了讓你的 CF-Navs 導(dǎo)航站更安全、穩(wěn)定和個(gè)性化可以考慮以下實(shí)踐強(qiáng)化安全禁用公開(kāi)的 Setup API在生產(chǎn)環(huán)境修改_worker.js讓/api/auth/setup端點(diǎn)只接受來(lái)自你信任的 IP 地址的請(qǐng)求或者要求一個(gè)額外的、通過(guò)環(huán)境變量設(shè)置的管理密鑰。使用強(qiáng)密碼密碼是唯一防線務(wù)必使用密碼管理器生成并保存強(qiáng)密碼。定期輪換密碼定期通過(guò) API 更新密碼。優(yōu)化性能與體驗(yàn)自定義主題CF-Navs 通常使用 Tailwind CSS 等框架你可以通過(guò)修改src/styles目錄下的文件來(lái)改變顏色、字體、布局等。配置合適的緩存在 Cloudflare Pages 的設(shè)置中可以針對(duì)靜態(tài)資源配置緩存規(guī)則進(jìn)一步提升加載速度。啟用 Brotli 壓縮Cloudflare 默認(rèn)啟用確保你的構(gòu)建工具如 Vite也配置了合適的壓縮。數(shù)據(jù)管理定期備份如前所述建立自動(dòng)化備份流程將 KV 數(shù)據(jù)備份到其他位置。清理舊數(shù)據(jù)如果統(tǒng)計(jì)數(shù)據(jù)過(guò)多可以考慮在 Worker 中編寫(xiě)邏輯定期清理過(guò)于陳舊的訪問(wèn)記錄。擴(kuò)展功能搜索功能如果鏈接很多可以考慮在前端集成一個(gè)輕量級(jí)客戶端搜索庫(kù)如fuse.js。圖標(biāo)庫(kù)項(xiàng)目通常使用 React Icons你可以訪問(wèn)其官網(wǎng)查找并替換更多合適的圖標(biāo)。多用戶支持高級(jí)修改 Worker 邏輯支持多個(gè)密碼或簡(jiǎn)單的用戶系統(tǒng)但這會(huì)顯著增加復(fù)雜度。通過(guò)以上步驟你已經(jīng)成功部署了一個(gè)功能完整、完全免費(fèi)且由你完全掌控的私人導(dǎo)航站。這個(gè)方案的精妙之處在于它利用 Cloudflare 的免費(fèi)生態(tài)將 Serverless 的威力賦予了靜態(tài)網(wǎng)站完美匹配了個(gè)人導(dǎo)航站“輕動(dòng)態(tài)、重展示”的需求。