new-site/DEPLOY_GUIDE.md

# 🚀 网站部署完整指南 - solarark.net/g2026/g4/

## 📋 部署前检查清单

### ✅ 代码准备状态
- [x] HTML 已添加 `<base href="/g2026/g4/">`
- [x] SEO meta 标签已配置
- [x] .htaccess 服务器配置已创建
- [x] 所有资源使用相对路径
- [x] 代码已推送到 Gitea 仓库

### 📦 当前文件清单
```
✅ index.html (15.8KB)
✅ css/style.css
✅ js/main.js
✅ .htaccess
✅ images/ (文件夹)
✅ README.md
✅ DEPLOYMENT.md
✅ CHECKLIST.md
```

---

## 🎯 部署方案选择

根据你的服务器访问方式，选择以下任一方案：

### 方案一：SSH + Git 部署（推荐 ⭐⭐⭐⭐⭐）

**适用场景**：有服务器 SSH 访问权限

**优点**：
- ✅ 自动化程度高
- ✅ 后续更新方便
- ✅ 版本控制完整

**步骤**：

#### 1. 连接到服务器
```bash
ssh username@solarark.net
# 输入密码
```

#### 2. 进入部署目录
```bash
cd /var/www/html/g2026/g4
# 或者实际的项目根目录
```

#### 3. 克隆仓库
```bash
# 如果目录为空
git clone https://gitea.solarark.net/yangyuqing/new-site.git .

# 如果需要输入凭据
Username: yangyuqing
Password: [你的Gitea密码]
```

#### 4. 设置权限
```bash
# Apache
sudo chown -R www-data:www-data /var/www/html/g2026/g4
sudo chmod -R 755 /var/www/html/g2026/g4

# Nginx
sudo chown -R nginx:nginx /var/www/html/g2026/g4
sudo chmod -R 755 /var/www/html/g2026/g4
```

#### 5. 重启 Web 服务器
```bash
# Apache
sudo systemctl restart apache2

# Nginx
sudo systemctl restart nginx
```

#### 6. 验证部署
```bash
curl -I https://solarark.net/g2026/g4/
# 应该返回 HTTP/1.1 200 OK
```

---

### 方案二：FTP/SFTP 上传（常用 ⭐⭐⭐⭐）

**适用场景**：只有 FTP 访问权限

**工具推荐**：
- FileZilla（免费）
- WinSCP（Windows）
- Cyberduck（Mac）

**步骤**：

#### 1. 下载 FileZilla
```
https://filezilla-project.org/
```

#### 2. 连接服务器
```
主机: solarark.net
用户名: [你的FTP用户名]
密码: [你的FTP密码]
端口: 21 (FTP) 或 22 (SFTP)
```

#### 3. 上传文件
```
本地站点: d:\my_website
远程站点: /g2026/g4/

拖拽以下文件到远程目录：
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
├── .htaccess
└── README.md
```

#### 4. 验证上传
- 确认所有文件传输成功
- 检查文件大小是否一致
- 确保 `.htaccess` 文件已上传（隐藏文件需显示）

---

### 方案三：使用部署脚本（高级 ⭐⭐⭐⭐⭐）

**适用场景**：Linux 服务器，有 root 权限

**步骤**：

#### 1. 上传部署脚本
```bash
# 从本地上传 deploy.sh 到服务器
scp deploy.sh username@solarark.net:/tmp/
```

#### 2. 在服务器上执行
```bash
ssh username@solarark.net

# 赋予执行权限
chmod +x /tmp/deploy.sh

# 运行脚本
sudo /tmp/deploy.sh
```

#### 3. 脚本会自动完成
- ✅ 创建部署目录
- ✅ 克隆 Git 仓库
- ✅ 设置文件权限
- ✅ 重启 Web 服务器

---

### 方案四：使用 Windows 打包脚本（简单 ⭐⭐⭐）

**适用场景**：Windows 用户，通过 FTP 上传

**步骤**：

#### 1. 运行打包脚本
```cmd
# 在项目根目录双击运行
deploy.bat

# 或在命令行中运行
cd d:\my_website
deploy.bat
```

#### 2. 脚本会生成 ZIP 包
```
website_deploy_20260602_143025.zip
```

#### 3. 上传 ZIP 到服务器
- 使用 FTP 工具上传 ZIP 文件
- 在服务器上解压到 `/g2026/g4/`

#### 4. 在服务器上解压
```bash
# SSH 连接到服务器
cd /var/www/html/g2026/g4
unzip website_deploy_*.zip
rm website_deploy_*.zip
```

---

## 🔧 服务器配置检查

### Apache 服务器

确保 `.htaccess` 生效，检查 `httpd.conf`：
```apache
# 启用 mod_rewrite
LoadModule rewrite_module modules/mod_rewrite.so

# 允许 .htaccess 覆盖
<Directory "/var/www/html/g2026/g4">
    AllowOverride All
    Require all granted
</Directory>
```

### Nginx 服务器

创建站点配置文件 `/etc/nginx/sites-available/g2026-g4`：
```nginx
server {
    listen 80;
    server_name solarark.net;
    
    root /var/www/html/g2026/g4;
    index index.html;
    
    location /g2026/g4/ {
        try_files $uri $uri/ /g2026/g4/index.html;
        
        # Gzip 压缩
        gzip on;
        gzip_types text/css application/javascript;
        
        # 缓存设置
        location ~* \.(jpg|jpeg|png|gif|webp)$ {
            expires 1y;
            add_header Cache-Control "public";
        }
        
        location ~* \.(css|js)$ {
            expires 1M;
            add_header Cache-Control "public";
        }
    }
}
```

启用配置：
```bash
sudo ln -s /etc/nginx/sites-available/g2026-g4 /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

---

## ✅ 部署后验证

### 1. 访问测试
```
打开浏览器访问：https://solarark.net/g2026/g4/
```

### 2. 控制台检查（F12）
```
✅ Console 无红色错误
✅ Network 所有资源状态码 200
✅ 无 404 错误
```

### 3. 功能测试
```
✅ 导航栏点击平滑滚动
✅ 移动端汉堡菜单正常
✅ 卡片悬停动画流畅
✅ 响应式布局正确
```

### 4. 跨设备测试
```
桌面端 (>1024px): 多列布局
平板端 (768-1024px): 自适应
手机端 (<768px): 单列 + 汉堡菜单
```

### 5. 性能测试
```
Chrome DevTools → Lighthouse
目标评分:
- Performance: 90+
- Accessibility: 85+
- Best Practices: 90+
- SEO: 90+
```

---

## ⚠️ 常见问题排查

### 问题1：页面显示空白

**原因**：CSS/JS 文件未加载

**解决**：
```bash
# 检查文件是否存在
ls -la /var/www/html/g2026/g4/css/style.css
ls -la /var/www/html/g2026/g4/js/main.js

# 检查文件权限
ls -l /var/www/html/g2026/g4/

# 应该是 -rw-r--r-- (644) 或 -rwxr-xr-x (755)
```

### 问题2：样式错乱

**原因**：`.htaccess` 未生效或 base 路径错误

**解决**：
```html
<!-- 检查 index.html 中的 base 标签 -->
<base href="/g2026/g4/">

<!-- 或临时改为绝对路径测试 -->
<link rel="stylesheet" href="/g2026/g4/css/style.css">
```

### 问题3：404 Not Found

**原因**：URL 重写规则未配置

**解决**：
```apache
# Apache: 检查 .htaccess 是否存在且可读
cat /var/www/html/g2026/g4/.htaccess

# Nginx: 检查 try_files 配置
location /g2026/g4/ {
    try_files $uri $uri/ /g2026/g4/index.html;
}
```

### 问题4：图片不显示

**原因**：图片未上传或路径错误

**解决**：
```bash
# 检查图片目录
ls -la /var/www/html/g2026/g4/images/

# 确保图片文件存在
# 如果使用占位图，暂时不需要实际图片
```

### 问题5：移动端显示异常

**原因**：viewport meta 标签缺失

**解决**：
```html
<!-- 确认 index.html 中有此行 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

---

## 🔄 后续更新流程

### 方式一：Git Pull（推荐）
```bash
# SSH 连接到服务器
ssh username@solarark.net

# 进入项目目录
cd /var/www/html/g2026/g4

# 拉取最新代码
git pull origin master

# 重启 Web 服务器
sudo systemctl restart apache2
```

### 方式二：重新上传
```bash
# 本地修改代码后
git add .
git commit -m "更新说明"
git push

# 服务器上
cd /var/www/html/g2026/g4
git pull
```

### 方式三：FTP 覆盖
```
1. 本地修改文件
2. 使用 FileZilla 重新上传修改的文件
3. 覆盖远程文件
```

---

## 📞 需要帮助？

### 联系老师时提供以下信息：

1. **访问地址**
   ```
   https://solarark.net/g2026/g4/
   ```

2. **部署时间**
   ```
   [记录部署的具体时间]
   ```

3. **使用的部署方式**
   ```
   □ SSH + Git
   □ FTP/SFTP
   □ 部署脚本
   □ 其他方式
   ```

4. **测试结果**
   ```
   □ 桌面端正常
   □ 移动端正常
   □ 所有功能正常
   □ 存在问题：[描述问题]
   ```

5. **截图**（如有问题）
   - 浏览器控制台错误
   - 页面显示异常
   - Network 标签的 404 错误

---

## 🎊 部署成功标志

当以下条件全部满足时，部署成功：

- [ ] 可以通过 https://solarark.net/g2026/g4/ 访问
- [ ] 页面正常显示，无空白
- [ ] CSS 样式正确加载
- [ ] JavaScript 功能正常
- [ ] 导航链接可点击跳转
- [ ] 移动端响应式正常
- [ ] 艺术设计效果完美呈现
- [ ] 在不同设备上测试通过
- [ ] 老师验收通过

---

## 💡 最佳实践建议

### 1. 备份策略
```bash
# 部署前备份
cp -r /var/www/html/g2026/g4 /var/www/html/g2026/g4_backup_$(date +%Y%m%d)
```

### 2. 日志监控
```bash
# 查看 Apache 错误日志
tail -f /var/log/apache2/error.log

# 查看 Nginx 错误日志
tail -f /var/log/nginx/error.log
```

### 3. 性能优化
```bash
# 启用 Gzip 压缩
# 配置浏览器缓存
# 优化图片大小
# 使用 CDN（可选）
```

### 4. 安全加固
```bash
# 设置正确的文件权限
# 禁用目录浏览
# 配置 HTTPS
# 定期更新依赖
```

---

**祝你部署顺利，毕业设计展示圆满成功！** 🎓✨

*最后更新：2026-06-02*