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