文件

部署指南

實用指南:發佈靜態網站、準備框架建置輸出、連接自訂網域,以及在 DeployPages 更新專案。

快速開始

部署就是把本機網站檔案變成別人能打開的網址。DeployPages 是為靜態輸出設計,因此第一次發佈可以從資料夾開始,不需要伺服器設定。

選項 1:拖放部署

這是靜態專案最快的路。網站已經是 HTML、CSS、JavaScript 或完成的建置資料夾時,可以直接上傳。

適合

登陸頁、個人網站、履歷、prototype、靜態文件,以及其他瀏覽器原生前端輸出。
  • 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 流程才有價值。

安裝 CLI

使用你偏好的 package manager 全域安裝 CLI。

npm install -g @deploypages/cli

驗證身份

執行 login 指令並完成瀏覽器授權流程。

deploypages login

部署目前資料夾

從建置輸出目錄執行 deploy 指令。

deploypages deploy

框架建置指南

現代框架上傳前需要建置步驟。目標都一樣:產生瀏覽器可直接打開的靜態檔案。

「build」是什麼意思

Build 會把框架原始檔轉成可部署的 HTML、CSS、JavaScript 和資源。

React / Vue / Vite

Command:npm run build
Output:dist/

上傳 dist 資料夾本身,不是專案根目錄。

Next.js static export

Command:npm run build
Output:out/

建置前先在 next.config.js 設定 output: 'export'。

純 HTML

Command:不需要建置步驟
Output:你現有的資料夾

只要讓 index.html 放在根目錄。

Hugo / Hexo

Command:hugo or hexo generate
Output:public/

上傳產生後的 public 資料夾。

Next.js export 範例

next.config.js
/** @type {import('next').NextConfig} */const nextConfig = {  output: 'export',  images: { unoptimized: true },};
module.exports = nextConfig;

Static export 限制

API routes、server-side props、middleware 等伺服器渲染功能不會出現在 static export build 中。

自訂網域

第一次部署後,DeployPages 可以接上你自己的網域,讓專案從系統網址移到品牌正式網址。

什麼算網域?

任何你能透過註冊商管理、並可編輯 DNS 記錄的網域都可以使用。

步驟 1:在 Console 新增網域

進入專案設定,打開網域分頁,加入你想連接的主機名稱。

步驟 2:設定 DNS

DeployPages 會提供所有權驗證和流量路由所需的 DNS 目標。

步驟 3:等待驗證

DNS 傳播後,網域狀態會變健康,HTTPS 設定也能完成。

類型主機用途
CNAMEwwwcname.deploypages.site把流量指向平台
TXT_deploypages-challengedeploypages-verify=...驗證網域所有權

選擇主機記錄

  • 連接 www.example.com 時使用 www。
  • 連接根網域 example.com 時使用 @。
  • 連接 blog.example.com 時使用 blog 這類子網域標籤。

更新網站

同一流程,新版本

更新專案和第一次部署邏輯相同:建置最新輸出、上傳,讓平台替換上線版本。
  • 1
    修改原始檔

    在本機修改文案、樣式、媒體或資源。

  • 2
    必要時重新建置

    如果專案使用框架,請先產生新的建置輸出目錄。

  • 3
    打開專案 Console

    回到 DeployPages 的專案頁。

  • 4
    上傳新版本

    用最新資料夾取代先前建置結果。部署歷史會讓新版本可追蹤。

上傳完成後,新建置結果會成為上線版本,先前版本仍可用於還原。

常見問題

非開發者可以使用 DeployPages 嗎?
可以。如果網站已經匯出為靜態檔案,拖放部署就夠了。
為什麼部署後看到 404?
最常見原因是 index.html 缺失或放錯位置。請確認可部署進入點位於上傳資料夾根目錄。
React 或 Vue 路由重新整理壞掉怎麼辦?
DeployPages 支援常見靜態前端的 SPA 回退行為,但 build 仍需要正確匯出。
可以上傳影片或大型資源嗎?
可以,但非常大的媒體先最佳化,或放在適合的專用傳遞通道,效能會更好。
可以為網站加密碼嗎?
可以,在包含密碼保護的方案中適用。它適合預覽、內部文件或階段性上線。