文件
部署指南
實用指南:發佈靜態網站、準備框架建置輸出、連接自訂網域,以及在 DeployPages 更新專案。
快速開始
部署就是把本機網站檔案變成別人能打開的網址。DeployPages 是為靜態輸出設計,因此第一次發佈可以從資料夾開始,不需要伺服器設定。
選項 1:拖放部署
這是靜態專案最快的路。網站已經是 HTML、CSS、JavaScript 或完成的建置資料夾時,可以直接上傳。
適合
- 1準備專案資料夾
可部署資料夾應在根目錄包含 index.html,並包含頁面依賴的樣式、script 或圖片資源。
範例資料夾結構my-site/├── index.html├── styles.css├── script.js└── images/ ├── logo.png └── hero.jpg常見錯誤
如果 index.html 缺失或被放在子資料夾裡,上傳後網站無法正確解析。 - 2打開上傳區
使用 DeployPages 的上傳區。你可以先發佈臨時專案,之後想保留時再登入。
- 3上傳資料夾
把完整資料夾拖進上傳區,或從檔案選擇器選取。框架專案請上傳建置輸出資料夾,不是原始碼目錄。
- 4開啟產生的網址
上傳完成後,DeployPages 會回傳上線網址,可立即用於測試或分享。
選項 2:CLI 流程
當同一個 build 會反覆發佈,部署應該放進 script、CI job 或發佈清單時適用。
專案變得可重複時使用
安裝 CLI
使用你偏好的 package manager 全域安裝 CLI。
npm install -g @deploypages/cli驗證身份
執行 login 指令並完成瀏覽器授權流程。
deploypages login部署目前資料夾
從建置輸出目錄執行 deploy 指令。
deploypages deploy框架建置指南
現代框架上傳前需要建置步驟。目標都一樣:產生瀏覽器可直接打開的靜態檔案。
「build」是什麼意思
React / Vue / Vite
npm run build上傳 dist 資料夾本身,不是專案根目錄。
Next.js static export
npm run build建置前先在 next.config.js 設定 output: 'export'。
純 HTML
不需要建置步驟只要讓 index.html 放在根目錄。
Hugo / Hexo
hugo or hexo generate上傳產生後的 public 資料夾。
Next.js export 範例
/** @type {import('next').NextConfig} */const nextConfig = { output: 'export', images: { unoptimized: true },};
module.exports = nextConfig;Static export 限制
自訂網域
第一次部署後,DeployPages 可以接上你自己的網域,讓專案從系統網址移到品牌正式網址。
什麼算網域?
步驟 1:在 Console 新增網域
進入專案設定,打開網域分頁,加入你想連接的主機名稱。
步驟 2:設定 DNS
DeployPages 會提供所有權驗證和流量路由所需的 DNS 目標。
步驟 3:等待驗證
DNS 傳播後,網域狀態會變健康,HTTPS 設定也能完成。
| 類型 | 主機 | 值 | 用途 |
|---|---|---|---|
| CNAME | www | cname.deploypages.site | 把流量指向平台 |
| TXT | _deploypages-challenge | deploypages-verify=... | 驗證網域所有權 |
選擇主機記錄
- 連接 www.example.com 時使用 www。
- 連接根網域 example.com 時使用 @。
- 連接 blog.example.com 時使用 blog 這類子網域標籤。
更新網站
同一流程,新版本
- 1修改原始檔
在本機修改文案、樣式、媒體或資源。
- 2必要時重新建置
如果專案使用框架,請先產生新的建置輸出目錄。
- 3打開專案 Console
回到 DeployPages 的專案頁。
- 4上傳新版本
用最新資料夾取代先前建置結果。部署歷史會讓新版本可追蹤。
上傳完成後,新建置結果會成為上線版本,先前版本仍可用於還原。