如何通过Git从dist文件夹部署Parcel构建的项目到GitHub Pages

下面提供两种实用的Git方法，帮你把dist文件夹的构建产物部署到GitHub Pages：

方法一：使用git subtree（推荐方案） #

这种方法适配你当前的仓库结构（main分支包含src和dist），无需调整分支结构，直接把dist目录作为子树推送到专门的部署分支：

1. 确保dist目录是最新构建产物：
   在项目根目录运行构建命令（若还未更新产物）：

   parcel build
   

2. 将dist目录推送到gh-pages分支：
   执行以下命令，把dist目录的内容单独推送到远程的gh-pages分支：

   git subtree push --prefix dist origin gh-pages
   

3. 配置GitHub Pages源：
   打开你的GitHub仓库，进入「Settings」→「Pages」，在「Source」选项中选择gh-pages分支与根目录（/root），点击「Save」。等待数分钟后，页面即可部署完成。

后续更新部署时，只需重新构建产物，再重复执行第2步的推送命令即可。

方法二：使用Git工作树（适合隔离源码与部署文件） #

如果后续想让main分支仅保留开发源码（可将dist加入.gitignore），可以用工作树单独管理gh-pages分支的内容：

1. 创建并关联gh-pages分支的工作树：
   在项目根目录执行：

   git worktree add ../dist-deploy gh-pages
   

   这会在项目外创建dist-deploy文件夹，关联到gh-pages分支。
2. 更新部署内容：
   进入dist-deploy文件夹，清空原有内容，复制最新的dist产物：

   cd ../dist-deploy
   rm -rf *
   cp -r ../你的项目目录/dist/* .
   

3. 提交并推送部署内容：

   git add .
   git commit -m "Deploy latest build to GitHub Pages"
   git push origin gh-pages
   

4. 清理工作树（可选）：
   部署完成后，可移除临时工作树：

   cd ../你的项目目录
   git worktree remove ../dist-deploy
   

完成第一次推送后，同样需要去GitHub Pages设置页面选择gh-pages分支作为源。

内容的提问来源于stack exchange，提问作者ali safaeyan