yangyuqing/new-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2352e1f7e399b610e03c11c3559571e420f12aac
new-site/DEPLOY_GUIDE.md

8.9 KiB
Raw Blame History

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

📋 部署前检查清单

✅ 代码准备状态

  • HTML 已添加 <base href="/g2026/g4/">
  • SEO meta 标签已配置
  • .htaccess 服务器配置已创建
  • 所有资源使用相对路径
  • 代码已推送到 Gitea 仓库

📦 当前文件清单

✅ index.html (15.8KB)
✅ css/style.css
✅ js/main.js
✅ .htaccess
✅ images/ (文件夹)
✅ README.md
✅ DEPLOYMENT.md
✅ CHECKLIST.md

🎯 部署方案选择

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

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

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

优点：

  • ✅ 自动化程度高
  • ✅ 后续更新方便
  • ✅ 版本控制完整

步骤：

1. 连接到服务器

ssh username@solarark.net
# 输入密码

2. 进入部署目录

cd /var/www/html/g2026/g4
# 或者实际的项目根目录

3. 克隆仓库

# 如果目录为空
git clone https://gitea.solarark.net/yangyuqing/new-site.git .

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

4. 设置权限

# 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 服务器

# Apache
sudo systemctl restart apache2

# Nginx
sudo systemctl restart nginx

6. 验证部署

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. 上传部署脚本

# 从本地上传 deploy.sh 到服务器
scp deploy.sh username@solarark.net:/tmp/

2. 在服务器上执行

ssh username@solarark.net

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

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

3. 脚本会自动完成

  • ✅ 创建部署目录
  • ✅ 克隆 Git 仓库
  • ✅ 设置文件权限
  • ✅ 重启 Web 服务器

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

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

步骤：

1. 运行打包脚本

# 在项目根目录双击运行
deploy.bat

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

2. 脚本会生成 ZIP 包

website_deploy_20260602_143025.zip

3. 上传 ZIP 到服务器

  • 使用 FTP 工具上传 ZIP 文件
  • 在服务器上解压到 /g2026/g4/

4. 在服务器上解压

# SSH 连接到服务器
cd /var/www/html/g2026/g4
unzip website_deploy_*.zip
rm website_deploy_*.zip

🔧 服务器配置检查

Apache 服务器

确保 .htaccess 生效，检查 httpd.conf：

# 启用 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：

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";
        }
    }
}

启用配置：

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 文件未加载

解决：

# 检查文件是否存在
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 路径错误

解决：

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

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

问题3：404 Not Found

原因：URL 重写规则未配置

解决：

# Apache: 检查 .htaccess 是否存在且可读
cat /var/www/html/g2026/g4/.htaccess

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

问题4：图片不显示

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

解决：

# 检查图片目录
ls -la /var/www/html/g2026/g4/images/

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

问题5：移动端显示异常

原因：viewport meta 标签缺失

解决：

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

🔄 后续更新流程

方式一：Git Pull（推荐）

# SSH 连接到服务器
ssh username@solarark.net

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

# 拉取最新代码
git pull origin master

# 重启 Web 服务器
sudo systemctl restart apache2

方式二：重新上传

# 本地修改代码后
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. 备份策略

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

2. 日志监控

# 查看 Apache 错误日志
tail -f /var/log/apache2/error.log

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

3. 性能优化

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

4. 安全加固

# 设置正确的文件权限
# 禁用目录浏览
# 配置 HTTPS
# 定期更新依赖

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

最后更新：2026-06-02

Reference in New Issue View Git Blame Copy Permalink