前言

前面辛苦打造的 Animate UI 網站，終於要登場啦 🎉！
經過無數次的調整、測試、再調整（還順便懷疑了一下人生 😅），現在總算到了最令人興奮的一步 —— 部屬 (Deployment)！

這次要帶大家一步步將專案上傳到 GitHub，並且透過 Cloudflare Pages 一鍵部署到雲端，讓全世界都能看到你精心設計的動畫網站 ✨。

我會從專案的 GitHub 版本控制開始，帶你一路走到 Cloudflare Pages 的自動部署設定。
部署完之後，只要再 push 一次程式碼，網站就會自動更新，不僅超方便，外人看起來也非常專業，真正實現「開發完馬上上線」的夢想 🚀

這次的目標是將這幾天用 Cursor 產生的 中文文字猜謎產生器 部屬到 Cloudflare Pages 上

前置作業

首先，你需要幾樣東西：

1. Github 帳號，至 Github.com > Sign Up
2. Cloudflare 帳號，至 Cloudflare.com > 註冊
3. 安裝 Git

Github 上傳專案

1. 建立專案 (Create a New Repo)
   

   ▲ 點選 New Repository

   

   ▲ Repository Name 可自取。Visibility、Add license、Readme 等可依需求調整

   

   ▲ 專案建立成功後會跳出這個畫面，先別急著關掉，裡面有許多可以複製來用的指令

   

   ▲ 因為我們已經有建立 Next.JS 專案，因此主要會選擇這部份 (主要依照需求來調整啦 也不一定完全與上面一樣)

2. 推送專案到 Github

   

   這邊就依照我的需要來進行 git，詳細的 Git 教學可以上網查詢，有非常多介紹的很清楚明了的文章以及影片

   1. git init : 重新初始化已存在的 Repo，原先有的是 Next.JS 的 git
   2. git add . : 把目前資料夾下 所有修改過的檔案 加入到暫存區 (staging area)
   3. git commit -m "first commit" : 把暫存區裡的變更正式提交到 Git 儲存庫，形成一個新的版本（commit）
   4. git branch -M main : 建立或重新命名目前的分支為 main。
      -M 代表強制更名（不論該分支是否已存在）
   5. git remote add origin git@github.com:ADSFAaron/ word-puzzle-chinese.git : 將遠端儲存庫（remote repository）加入到本地專案中，並命名為 origin
   6. git status : (可選要不要做，非必須) 顯示目前 Git 專案的狀態
   7. git push -u origin main : 將本地 main 分支的提交「推送」到遠端 origin 的 main 分支

   

3. 完成推送 🎉 以後要管理專案更方便了

Cloudflare Pages 部署

1. 登入後，在首頁左側點選 計算和 AI > Workers 和 Pages > 建立應用程式
   

2. 點選 Pages，匯入現有 Git 存放庫
   

3. 接著選取剛剛在 Github 建立的 Repo，這邊可能需要登入 Github 帳號，登入後會跳出 Repo (存放庫) 讓你選擇
   

4. 名稱可自訂，知道是哪個專案即可。分支選擇剛剛建立的 main。

   

   組建設定當中 Framework 選擇 Next.JS
   

   這邊有個重要的步驟，要建立 wrangler.jsonc，這是 Cloudflare 設定檔案，放在專案根目錄下。

   {
       "name": "<專案名稱>",
       "compatibility_date": "2025-10-11",
       "compatibility_flags": [
           "nodejs_compat"
       ],
       "pages_build_output_dir": ".vercel/output/static"
   }
   

   

   ▲ 設定檔案內容

   

   ▲ 沒有使用 wrangler.jsonc 會出現錯誤

   

   ▲ Compatibility date 可設定為當天日期，日後若有新功能，會依照這個日期來決定是否相容。可從 Cloudflare 專案 > 設定 > 相容性日期 做調整

5. 回到電腦上，確認目前的 Node.JS 版本，確保建置時版本相同。

   在 Terminal 下 node -v 即可看到目前版本
   

   並且回到 組建設定 下方有 環境變數，將變數名稱設為 NODE_VERSION 剛剛 Terminal 輸出的 Node.JS 版本號

   

   按下 儲存並部署 就會開始跑執行動作。同時也可以看 log 是否有設置成功

   

   正當你以為準備收工下班了，突然跳出來錯誤 🙄

   

   還好只是 eslint 錯誤 🫠 照著輸出的指示先暫時停用 eslint 就可以解決囉

   

   ▲ 修改完 eslint 重新 commit 程式碼到 Github 就會連動 CICD 到 Cloudflare 囉

   

   

   ▲ 太好拉也有自己的網址可以給其他人用

小結

這次我們成功讓 Animate UI 網站部署在 Cloudflare Pages 上，並且實現自動化的部署流程。只要更新程式碼並推送到 GitHub，Cloudflare 就會自動幫我們重新建置並發布最新版本的網站，讓我們可以專注在開發上，而不需要擔心部署的繁瑣步驟 ✨

你的 Animate UI 網站，現在正式成為全球都能瀏覽的閃亮作品！

Reference

• Cloudflare - Static site
• Cloudflare - Node.js compatibility
• Cloudflare - Wrangler configuration
• git add、git commit - 提交版本