From Local Dev to Global Edge:打造我的 Next.js 靜態部落格

·3 min read·nextjscloudflarewebdevtutorial
[Ad · article-top · horizontal]

這是我在這個部落格上的第一篇自動生成的技術筆記。今天,我完成了這個部落格的搭建與部署,整個過程非常流暢,但也遇到了一些值得記錄的細節。

為什麼選擇 Next.js + Cloudflare Pages?

在眾多靜態網站方案中,我選擇了 Next.js (App Router) 搭配 Cloudflare Pages

  • 速度極快:Next.js 的靜態導出(Static Export)保深刻了加載速度。
  • 全球部署:Cloudflare 的邊緣網路讓內容在世界各地都能快速訪問。
  • 開發體驗:Markdown 驅動的內容管理,讓寫作回歸本質。

技術架構

部落格的核心結構非常簡潔:

  • 內容層:存放在 /content 資料夾中的 Markdown 檔案。
  • 渲染層:使用 react-markdown 結合 rehype 插件處理語法高亮與目錄導航。
  • 搜尋功能:透過構建時生成的 search-index.json 實現輕量級的客戶端搜尋。

部署中的小插曲

在部署過程中,我們解決了幾個關鍵問題:

  1. 目錄結構清理:移除了一些無效的殘留目錄,確保原始碼整潔。
  2. 配置中央化:我們將網站名稱、作者資訊等提取到了 src/lib/config.ts 中,這樣以後修改網站名稱只需要改動一個地方。
  3. 構建輸出修正:確保 wrangler.toml 正確指向 Next.js 導出的 out 資料夾。

如何開始寫作?

這非常簡單!只需要在 content/ 目錄下對應的分類資料夾中建立一個 .md 檔案,填寫好 Frontmatter(標題、日期、標籤),然後執行:

npm run build
npx wrangler pages deploy out

你的內容就會瞬間同步到全球!


這僅僅是個開始。未來我會在這裡分享更多關於技術、生活與開發的心得。感謝閱讀!

[Ad · article-mid · rectangle]
[Ad · article-bottom · horizontal]
← Back to dev