添加部署脚本和完整部署指南

2026-06-02 16:35:54 +08:00
parent f0cbbb0ae7
commit 31ea4bad65
3 changed files with 627 additions and 0 deletions
--- a/DEPLOY_GUIDE.md
+++ b/DEPLOY_GUIDE.md
@@ -0,0 +1,501 @@
+# 🚀 网站部署完整指南 - 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*