跳至主要内容

如何將 Docusaurus 網站部署到 Cloudflare Pages？

1. 檢查空網址​

Docusaurus 會檢查網站中的「空網址」或「不存在的頁面連結」，為了網站品質，它預設會阻止編譯。如果你希望只收到警告而不中斷編譯，可在 docusaurus.config.js 中加入：

docusaurus.config.js
const config = {
  // ...
  onBrokenLinks: 'warn',           // 空網址只警告
  onBrokenMarkdownLinks: 'warn',   // Markdown 空連結只警告
  // ...
};

建議在正式發佈前還是要把警告修復，這對 SEO 更有利。

2. 上傳到 GitHub​

  1. 如果沒有 GitHub 帳號，先註冊一個
  2. 在 GitHub 上建立新的倉庫
  3. 在你的網站目錄（例如 /my-website）下執行：
git init
git add .
git commit -m "Initial Docusaurus commit"
git branch -M main
git remote add origin https://github.com/你的帳號/倉庫名稱.git
git push -u origin main

3. 部署到 Cloudflare Pages​

  1. 如果沒有 Cloudflare 帳號，先註冊一個
  2. 點擊右上角 +Add > Pages
  3. 選擇 Only select repositories，挑選剛上傳的 GitHub 倉庫，點擊 開始設定
  4. 組建設定：
    • Framework：Docusaurus
    • 組建命令：npm run build（會自動填入）
    • 組建輸出目錄：build（會自動填入）
    • 點擊 環境變數 (進階)，設定 NODE_VERSION = 20
  5. 點擊 儲存並部署
  6. 部署完成後會生成一個網址，例如 strolltimes.pages.dev（strolltimes 是專案名稱）

4. 綁定自訂網域​

網域購買很多地方都可以，買 .tw 推薦遠振資訊，買 .com 推薦 Cloudflare，其他頂級域名我就沒研究了，還請自行比價。

  1. 購買一個網域（例如 xxxxx.com）
  2. 將該網域的名稱伺服器 (Name Servers) 指向 Cloudflare
  3. 進入 Workers & Pages > 選擇你的專案 > 點擊 Custom domains
  4. 輸入你的網域名稱，點擊 Active Domain
  5. 等待驗證完成，狀態變成綠燈 Active，即可用自訂網域瀏覽網站

5. 自動化部署流程​

每次修改網站後，執行：

git add .
git commit -m "更新說明"
git push origin main