mirror of
https://github.com/acepanel/acepanel.github.io.git
synced 2026-02-04 15:37:14 +08:00
120 lines
3.0 KiB
Markdown
120 lines
3.0 KiB
Markdown
# 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.
|
|
|
|
|
|
|
|
### Advanced Settings
|
|
|
|
Configure advanced options such as website logs and default documents.
|
|
|
|
|
|
|
|
- **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.
|
|
|
|
|
|
|
|
Click the **Add Custom Configuration** button to add 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
|