Day 28 - Animate UI 部署在 Cloudflare Pages

建立專案 (Create a New Repo)

▲ 點選 New Repository

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

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

▲ 因為我們已經有建立 Next.JS 專案，因此主要會選擇這部份 (主要依照需求來調整啦也不一定完全與上面一樣)
推送專案到 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 分支
完成推送 🎉 以後要管理專案更方便了

Cloudflare Pages 部署
#

登入後，在首頁左側點選 計算和 AI > Workers 和 Pages > 建立應用程式
點選 Pages，匯入現有 Git 存放庫
接著選取剛剛在 Github 建立的 Repo，這邊可能需要登入 Github 帳號，登入後會跳出 Repo (存放庫) 讓你選擇
名稱可自訂，知道是哪個專案即可。分支選擇剛剛建立的 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 專案 > 設定 > 相容性日期 做調整
回到電腦上，確認目前的 Node.JS 版本，確保建置時版本相同。

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

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

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

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

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

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

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