繁體中文

简体中文
English

繁體中文

简体中文
English

主題

靜態網站 ​

Static website settings

靜態網站用於託管 HTML、CSS、JavaScript 等靜態檔案，適合用來部署前端專案的建置產物、文件網站等。

建立靜態網站 ​

  1. 進入 網站 頁面
  2. 點選 純靜態 分頁
  3. 點選 建立網站

配置項 ​

  • 名稱：網站識別碼，必須唯一，僅支援英文字母、數字、連字號與底線，例如 docs
  • 網域：繫結的網域，例如 docs.example.com
  • 連接埠：監聽連接埠，預設為 80
  • 目錄：網站根目錄。若留空，則預設為 網站目錄/網站名稱/public
  • 備註：選填的備註

編輯靜態網站 ​

點選網站清單中的 編輯 按鈕進入編輯頁面。

可以在基本設定中將網站切換為反向代理或 PHP。域名、監聽、檔案等通用欄位會保留；靜態網站專屬 Web 配置會刪除，並生成所選型別的配置。切換前先備份網站。

網域與監聽 ​

設定網站的網域與監聽位址。每個監聽位址都可以個別啟用 HTTPS 與 QUIC（HTTP/3）。

基本設定 ​

設定網站目錄與預設文件。

  • 網站目錄：存放靜態檔案的絕對路徑
  • 執行目錄：執行目錄的絕對路徑（靜態網站通常不需要設定）
  • 預設文件：預設首頁檔案清單，例如 index.html

HTTPS ​

在 HTTPS 分頁中，你可以為網站啟用 TLS 並管理其憑證：

  • 主開關：啟用或停用網站 HTTPS 的主開關
  • 使用現有憑證：選擇已在憑證管理中託管的憑證，自動填入憑證與私鑰
  • HSTS：強制瀏覽器僅透過 HTTPS 存取網站
  • HTTP 重新導向：自動將純 HTTP 請求重新導向至 HTTPS
  • OCSP Stapling：啟用 OCSP Stapling 以加快憑證驗證速度
  • TLS 版本：允許的 TLS 協定版本（TLS 1.0 / 1.1 / 1.2 / 1.3）
  • 憑證 / 私鑰：直接貼上 PEM 憑證與 KEY 私鑰內容

當至少設定了一個網域時，底部還會提供 一鍵簽發憑證 按鈕，用於申請免費憑證。如果網域是萬用網域（例如 *.example.com），系統會提示你選擇一個已在憑證管理中設定的 DNS 服務商進行 DNS 驗證。

一鍵簽發憑證成功後，AcePanel 會自動為網站啟用 HTTPS。請在 HTTPS 標籤頁中檢查產生的憑證與監聽設定。

重新導向 ​

在 重新導向 分頁中，你可以新增重新導向規則。點選 新增重新導向規則 來建立規則：

  • 重新導向類型：URL 重新導向、主機重新導向 或 404 重新導向
  • 狀態碼：301（永久移動）、302（已找到）、307（暫時重新導向）或 308（永久重新導向）
  • 來源：來源路徑（URL 重新導向）或來源主機（主機重新導向）；404 重新導向不需填寫
  • 目標：目標路徑或目標 URL
  • 保留 URI：重新導向時保留原始的請求路徑與查詢參數

可以透過拖曳控制點來重新排序規則。

進階設定 ​

在 進階設定 分頁中，你可以設定存取統計、記錄檔設定、速率限制、真實 IP 與基本驗證。

自訂設定 ​

在自訂設定標籤頁中，可以新增自訂 Web 伺服器設定，實現 URL 重寫等功能。

點選 新增自訂設定 按鈕來新增設定：

  • 名稱：配置名稱，支援字母、數字、下劃線和連字元。
  • 範圍：可以選擇“當前網站”或“全域性”。
  • 內容：使用目前 Web 伺服器語法撰寫的設定內容，例如 Nginx 的 location 區塊

使用場景 ​

前端專案 ​

Vue、React、Angular 等前端框架的構建產物：

bash
# Vue project
npm run build
# Upload dist directory contents to website directory

# React project
npm run build
# Upload build directory contents to website directory

文件站 ​

VitePress、Docusaurus、Hugo 等靜態站點生成器：

bash
# VitePress
npm run docs:build
# Upload .vitepress/dist directory contents to website directory

單頁應用（SPA） ​

純靜態網站預設啟用 SPA 回退，未匹配到檔案的路由會返回 index.html。如果未知路徑必須返回真實 404，請在 自定義配置中刪除或替換生成的回退。對應 Nginx 規則為：

nginx
location / {
    try_files $uri $uri/ /index.html;
}

目錄結構 ​

典型的靜態網站目錄結構：

/opt/ace/sites/website-name/public
├── index.html         # Homepage
├── assets/            # Static resources
│   ├── css/
│   ├── js/
│   └── images/
├── favicon.ico        # Website icon
└── ...

常見問題 ​

404 錯誤 ​

  • 檢查檔案是否存在於網站目錄中
  • 檢查檔名大小寫（Linux 會區分大小寫）
  • 單頁應用程式需要設定重寫規則

資源載入失敗 ​

  • 檢查資源路徑是否正確
  • 檢查是否使用了絕對路徑
  • 檢查 CORS 配置

中文檔名亂碼 ​

  • 確保檔案使用 UTF-8 編碼