English

简体中文
繁體中文

English

简体中文
繁體中文

Appearance

Static Website ​

Static websites are used to host HTML, CSS, JavaScript, and other static files, suitable for deploying frontend project build outputs, documentation sites, etc.

Create Static Website ​

  1. Go to the Website page
  2. Click the Static tab
  3. Click Create Website

Configuration Items ​

  • Name: Website identifier, e.g., docs
  • Domain: Bound domain, e.g., docs.example.com
  • Port: Listening port, default 80
  • Website Directory: Path where static files are stored
  • Remarks: Optional remarks

Edit Static Website ​

Click the Edit button in the website list to enter the edit page.

Domain and Listen ​

Configure the website's domain and listening port.

Domain and Listen Configuration

Advanced Settings ​

Configure advanced options such as website logs and default documents.

Advanced Settings

  • Website Directory: Absolute path where static files are stored
  • Default Document: Default homepage file, e.g., index.html

Custom Configuration (Rewrite) ​

In the Custom Configuration tab, you can add Nginx configuration for URL rewriting and other functions.

Custom Configuration

Click the Add Custom Configuration button to add configuration:

Add Custom Configuration

  • Name: Configuration name, supports letters, numbers, underscores, and dashes
  • Scope: Configuration scope, can choose "This Website" or "Global"
  • Content: Nginx configuration content, such as location blocks

Use Cases ​

Frontend Projects ​

Build outputs from Vue, React, Angular, and other frontend frameworks:

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

Documentation Sites ​

Static site generators like VitePress, Docusaurus, Hugo:

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

Single Page Application (SPA) ​

Single page applications need to configure rewrite rules to point all routes to index.html. Add in Custom Configuration:

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

Directory Structure ​

Typical static website directory structure:

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

FAQ ​

404 Error ​

  • Check if the file exists in the website directory
  • Check filename case sensitivity (Linux is case-sensitive)
  • Single page applications need to configure rewrite rules

Resource Loading Failed ​

  • Check if the resource path is correct
  • Check if absolute paths are used
  • Check CORS configuration

Chinese Filename Garbled ​

  • Ensure files use UTF-8 encoding