mirror of
https://github.com/acepanel/acepanel.github.io.git
synced 2026-02-04 11:27:14 +08:00
120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
# 纯静态网站
|
||
|
||
纯静态网站用于托管 HTML、CSS、JavaScript 等静态文件，适合部署前端项目构建产物、文档站点等。
|
||
|
||
## 创建静态网站
|
||
|
||
1. 进入 **网站** 页面
|
||
2. 点击 **纯静态** 标签
|
||
3. 点击 **创建网站**
|
||
|
||
### 配置项
|
||
|
||
- **名称**：网站标识，如 `docs`
|
||
- **域名**：绑定的域名，如 `docs.example.com`
|
||
- **端口**：监听端口，默认 80
|
||
- **网站目录**：静态文件存放路径
|
||
- **备注**：可选备注
|
||
|
||
## 编辑静态网站
|
||
|
||
点击网站列表中的 **编辑** 按钮进入编辑页面。
|
||
|
||
### 域名和监听
|
||
|
||
配置网站的域名和监听端口。
|
||
|
||
|
||
|
||
### 高级设置
|
||
|
||
配置网站日志、默认文档等高级选项。
|
||
|
||
|
||
|
||
- **网站目录**：静态文件存放的绝对路径
|
||
- **默认文档**：默认首页文件，如 `index.html`
|
||
|
||
### 自定义配置（伪静态）
|
||
|
||
在 **自定义配置** 标签中可以添加 Nginx 配置，用于 URL 重写等功能。
|
||
|
||
|
||
|
||
点击 **添加自定义配置** 按钮可以添加配置：
|
||
|
||
|
||
|
||
- **名称**：配置名称，支持字母、数字、下划线、破折号
|
||
- **范围**：配置生效范围，可选择「此网站」或「全局」
|
||
- **内容**：Nginx 配置内容，如 `location` 块
|
||
|
||
## 适用场景
|
||
|
||
### 前端项目
|
||
|
||
Vue、React、Angular 等前端框架的构建产物：
|
||
|
||
```bash
|
||
# Vue 项目
|
||
npm run build
|
||
# 将 dist 目录内容上传到网站目录
|
||
|
||
# React 项目
|
||
npm run build
|
||
# 将 build 目录内容上传到网站目录
|
||
```
|
||
|
||
### 文档站点
|
||
|
||
VitePress、Docusaurus、Hugo 等静态站点生成器：
|
||
|
||
```bash
|
||
# VitePress
|
||
npm run docs:build
|
||
# 将 .vitepress/dist 目录内容上传到网站目录
|
||
```
|
||
|
||
### 单页应用（SPA）
|
||
|
||
单页应用需要配置伪静态规则，将所有路由指向 index.html。 在 **自定义配置** 中添加：
|
||
|
||
```nginx
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
典型的静态网站目录结构：
|
||
|
||
```
|
||
/opt/ace/sites/网站名称/public
|
||
├── index.html # 首页
|
||
├── assets/ # 静态资源
|
||
│ ├── css/
|
||
│ ├── js/
|
||
│ └── images/
|
||
├── favicon.ico # 网站图标
|
||
└── ...
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### 404 错误
|
||
|
||
- 检查文件是否存在于网站目录
|
||
- 检查文件名大小写（Linux 区分大小写）
|
||
- 单页应用需要配置伪静态规则
|
||
|
||
### 资源加载失败
|
||
|
||
- 检查资源路径是否正确
|
||
- 检查是否使用了绝对路径
|
||
- 检查 CORS 配置
|
||
|
||
### 中文文件名乱码
|
||
|
||
- 确保文件使用 UTF-8 编码
|