正确部署和更新 React 应用到 Github Pages

Question

当我使用“npm run deploy”将我的 React 应用程序部署到 Github 页面时，我一直遇到 404“找不到文件”。该站点是从我的 repo 中的“gh-pages”分支构建的，我已将我的 master 分支与我的所有源文件匹配。

我在这里担心的一个问题是，发现其他可操作的 Github Pages 存储库仅包含其“gh-pages”分支中的 build 文件夹，而不包含其源代码的其余部分。第二点令人困惑的是，现在我已经两次提交/推送我的网站，如上所述，并且一切正常......直到我去更新某些内容并返回 404。

所以，我的问题是：

• 我是否需要将我的“gh-pages”分支设置为仅包含我的构建文件夹，以便它可以找到我的 index.html 而不是 404？如果是这样，我如何将分支设置为仅保存特定文件夹而不将其他文件合并到其中？
• 您能否描述一下网站启动后更新网站的流程？

如果您想查看我的存储库，可以在以下位置找到它： https://github.com/edmundweir/doe-website

我想要上线的网站是： https://descendantsofearth.com/

如果我在 500 米深的兔子洞故障排除中，我的手电筒已经没电了，我们将不胜感激。

感谢， 贝蒂。

Answer 1

TLDR：删除 GitHub 上的 gh-pages 分支，然后运行 ​​npm run deploy。

404 '找不到文件'

发生这种情况是因为您的 gh-pages 分支在根目录中没有 index.html 文件，并且您没有在 GitHub Pages 设置中指定要使用的源文件夹。此处的快速补救措施是将源文件夹设置为 /build，但这不会实现您使用 gh-pages npm pkg 寻找的设置。

该站点是从我的 repo 中的“gh-pages”分支构建的，我已将我的 master 分支与我的所有源文件匹配。

这是您的问题的根本原因。您的 deploy npm 脚本当前设置为仅将 build 文件夹的内容提交到 gh-pages 分支。该软件包将为您管理这个分支，作为一个具有与master 完全不同的历史记录的分支。

现在我已经按照上述方式两次提交/推送了我的网站，并且一切正常...直到我去更新某些内容并返回 404。

可能它在您运行部署脚本时起作用，然后您通过手动推送到分支来破坏它？

我是否需要将我的“gh-pages”分支设置为仅包含我的构建文件夹，以便它可以找到我的 index.html 而不是 404？如果是这样，我如何将分支设置为仅保存特定文件夹而不将其他文件合并到其中？

这个包会为你处理所有这些，这真的很酷。对于一些历史 - 当 GitHub Pages 首次出现时 - 说明是创建一个 orphan 分支，您可以手动将静态构建推送到该分支。请注意，有几种方法可以实现这一点。

您能描述一下网站启动后更新的过程吗？

master 不应包含您的静态build，就像它不包含node_modules 等一样。您应该将build 添加到您的.gitignore，这样它就不会被提交。这样，您只需提交实际的源代码 - 这可以最大限度地减少代码库的大小并为您提供干净的修订历史记录。

当您想“部署”您的更改时，您应该运行npm run build 以从您的源代码构建您的静态应用程序，然后运行npm run deploy 让gh-pages 将您的静态build 推送到gh-pages 分支（然后 GitHub Pages 将用于您的网站）。