Skip to content

deploy-to-github.md

Latest commit

 

History

History
114 lines (86 loc) · 3.05 KB

deploy-to-github.md

File metadata and controls

114 lines (86 loc) · 3.05 KB

🚀 快速部署到GitHub Pages

📦 Web包已准备就绪！

您的Flutter应用已成功构建为Web版本，所有文件都在 build/web/ 目录中。

🎯 一键部署步骤

方法1：GitHub网页上传（推荐新手）

  1. 创建GitHub仓库

    • 访问 GitHub.com
    • 点击右上角 "+" → "New repository"
    • 仓库名：beacon-world-app（或您喜欢的名字）
    • 设为 Public
    • ✅ 勾选 "Add a README file"
    • 点击 "Create repository"

  2. 上传文件

    • 在新仓库页面，点击 "uploading an existing file"
    • 将 build/web/ 文件夹中的所有文件拖拽到页面
    • 提交信息：Deploy Beacon World App
    • 点击 "Commit changes"

  3. 启用GitHub Pages

    • 点击仓库的 "Settings" 标签
    • 左侧菜单找到 "Pages"
    • Source 选择 "Deploy from a branch"
    • Branch 选择 "main"
    • Folder 选择 "/ (root)"
    • 点击 "Save"

  4. 访问您的应用

    • URL：https://您的用户名.github.io/beacon-world-app/
    • 等待5-10分钟生效

方法2：Git命令行（推荐开发者）

# 1. 创建并进入新目录
mkdir beacon-world-app
cd beacon-world-app

# 2. 初始化Git仓库
git init
git remote add origin https://github.com/您的用户名/beacon-world-app.git

# 3. 复制Web文件
# 将 build/web/ 中的所有文件复制到当前目录

# 4. 提交并推送
git add .
git commit -m "Deploy Beacon World App"
git branch -M main
git push -u origin main

# 5. 在GitHub仓库设置中启用Pages

📋 必需文件清单

确保上传以下文件：

✅ index.html                 # 主页面
✅ main.dart.js               # 应用代码
✅ flutter.js                 # Flutter引擎
✅ flutter_bootstrap.js       # 启动脚本
✅ manifest.json              # PWA配置
✅ favicon.png                # 网站图标
✅ assets/                    # 资源文件夹
✅ canvaskit/                 # 渲染引擎
✅ icons/                     # 应用图标
✅ .nojekyll                  # GitHub Pages配置

🔧 优化配置

我已经为您准备了多个优化版本：

  • index.html - 标准版本
  • index_github_optimized.html - GitHub Pages优化版
  • github-pages-check.html - 部署诊断工具
  • .nojekyll - 禁用Jekyll处理

🎉 部署后验证

访问您的应用后，检查：

  • 页面正常加载
  • 3D模型显示正常
  • 图片资源加载正常
  • 移动端兼容性良好
  • 各功能模块正常工作

🆘 遇到问题？

  1. 使用诊断工具：访问 您的域名/github-pages-check.html
  2. 检查浏览器控制台：按F12查看错误信息
  3. 清除缓存：使用Ctrl+F5强制刷新
  4. 等待生效：GitHub Pages需要5-10分钟

🌟 成功案例

部署成功后，您将拥有：

  • 🌐 全球可访问的Web应用
  • 📱 移动设备友好界面
  • 🔒 HTTPS安全连接
  • 🚀 CDN加速访问
  • 💰 完全免费托管

准备好让全世界看到您的Beacon World App了吗？ 🚀

按照上述步骤，几分钟内就能完成部署！