Atoms项目部署GitHub Pages需先构建出dist目录，再通过gh-pages分支或/根目录发布，并配置base='./'解决子路径404问题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
将Atoms项目从本地导出并部署到GitHub Pages，需确保静态资源路径正确、构建产物可直接被GitHub Pages服务识别，且无需服务器端逻辑支持。
确认项目已具备静态站点结构
打开项目根目录，检查是否存在 【dist】 或 【build】 文件夹，且其中包含 index.html、CSS 和 JS 文件——这是 GitHub Pages 能托管的必要前提。若只有 src/ 或未运行构建命令，直接推送到 GitHub 将无法访问页面。
执行 npm run build 或 yarn build 生成生产环境产物；常见框架如 Vite 默认输出到 dist，Create React App 输出到 build。
配置 GitHub Pages 发布源
进入 GitHub 仓库 Settings → Pages → Source → 选择分支（通常选 main 或 gh-pages）→ 在下拉菜单中指定文件夹为 【/ (root)】 或 【/docs】，取决于你的构建产物存放位置。
若构建产物在 dist/ 下，但 GitHub Pages 只支持根目录或 /docs，此时必须把 dist 内容复制到 docs 文件夹，或改用 gh-pages 分支部署（见下一节）。
方法一：使用 gh-pages 分支自动部署
第一步：全局安装 gh-pages 工具 → npm install -g gh-pages
第二步：在 package.json 的 scripts 中添加 "deploy": "gh-pages -d dist"
第三步：运行 npm run deploy → 工具会自动创建 gh-pages 分支，并将 dist 目录全部推送到该分支根路径。GitHub Pages 设置里 Source 改为 【gh-pages branch】 即可生效。
注意：该操作会强制覆盖 gh-pages 分支历史，已有手动提交的内容会被清空。
方法二：手动推送 dist 到 gh-pages 分支
git checkout --orphan gh-pages
git add -f dist/**
git commit -m "Deploy to GitHub Pages"
git push -u origin gh-pages --force
这一步跳过工作区清理和默认分支依赖，直接以 dist 内容初始化全新分支。--force 是必需的，否则推送会被拒绝。
修复静态资源路径问题
打开 dist/index.html，查找所有以 / 开头的 CSS、JS 引入路径，例如<script src="/assets/index.123.js">—— 这类路径在 GitHub Pages 子路径（如 username.github.io/repo-name）下会 404。</script>
在 vite.config.ts 中设置 base: './'，或在 vue.config.js 中配置 publicPath: './'，确保构建时所有资源引用改为相对路径。
若已构建完成，可临时用 sed 或 VS Code 多行替换将 src="/assets/ 改为 src="assets/，但根源解法是改配置后重新 build。
