deploy.md

🚀 部署指南 - EdgeOne Pages

本指南将帮助您将UAPI热榜查询工具部署到EdgeOne Pages上。

📋 部署前准备

1. 项目文件:

   • index.html - 主页面
   • app.js - JavaScript应用
   • README.md - 项目说明（可选）

2. GitHub 仓库:

   • 在GitHub上创建一个新仓库
   • 将项目文件上传到仓库

🛠️ 部署步骤

1. 准备 GitHub 仓库

# 初始化Git仓库
git init
git add .
git commit -m "Initial commit: UAPI热榜查询工具"

# 连接到GitHub仓库（替换为你的仓库地址）
git remote add origin https://github.com/你的用户名/hotboard-query.git
git push -u origin main

2. 部署到 EdgeOne Pages

1. 访问 EdgeOne Pages: https://edgeone.pages.dev/

2. 登录/注册: 使用GitHub账户登录

3. 连接仓库:

   • 点击 "Import from GitHub"
   • 选择你的热榜查询项目仓库
   • 点击 "Import"

4. 配置构建设置:

   项目名称: hotboard-query
   构建设置:
   - 构建命令: echo "Static site - no build needed"
   - 输出目录: / (根目录)
   - Node版本: 任意 (静态网站不需要)
   

5. 部署:

   • 点击 "Create Site"
   • 等待部署完成（通常1-2分钟）

6. 获取访问地址:

   • 部署完成后，EdgeOne会提供一个域名
   • 格式类似: https://hotboard-query-xxx.edgeone.pages.dev

⚙️ 高级配置

自定义域名（可选）

如果您有自己的域名，可以配置自定义域名：

1. 在EdgeOne控制台中找到你的站点
2. 进入 "Settings" > "Custom Domains"
3. 添加您的域名
4. 根据提示配置DNS记录

环境变量（可选）

如果需要配置环境变量（如API代理地址）：

1. 在站点设置中找到 "Environment Variables"
2. 添加需要的变量:

   API_BASE_URL=https://uapis.cn/api/v1/misc/hotboard
   CORS_PROXY=https://your-proxy-url.com/
   

🔧 故障排除

常见问题

Q: 页面加载空白？ A: 检查浏览器控制台是否有JavaScript错误，确保app.js文件正确加载。

Q: API调用失败？ A: 由于CORS限制，可能需要使用代理或显示示例数据。这是正常现象。

Q: 样式显示异常？ A: 检查CSS文件是否正确引用，确保没有网络问题。

Q: 移动端显示不佳？ A: 网站已包含响应式设计，如有问题请检查移动端浏览器兼容性。

调试技巧

1. 浏览器开发者工具:

   • 按F12打开开发者工具
   • 查看Console标签的错误信息
   • 检查Network标签的请求状态

2. 本地测试:

   # 使用Python启动本地服务器
   python -m http.server 8000
   
   # 使用Node.js启动本地服务器
   npx serve .

3. 测试不同浏览器:

   • Chrome, Firefox, Safari, Edge
   • 移动端浏览器

📊 性能优化

已实现的优化

• ✅ 响应式设计
• ✅ 懒加载
• ✅ 缓存机制
• ✅ 压缩资源

进一步优化建议

1. 启用Gzip压缩
2. 添加Service Worker
3. 使用CDN加速
4. 图片优化

🔄 更新部署

当需要更新网站时：

1. 修改本地文件
2. 提交到GitHub:

   git add .
   git commit -m "Update: 描述你的修改"
   git push

3. EdgeOne会自动检测并重新部署

📞 技术支持

如果遇到部署问题，可以：

1. 查看EdgeOne官方文档
2. 在GitHub提交Issue
3. 检查UAPI官方文档

---

部署成功后，您就有了一个完全免费的热榜查询网站！ 🎉