将 React App 正确部署和更新到 Github 页面

Deploying and updating a React App to Github Pages correctly

当我将我的 React 应用程序部署到 Github 具有 'npm run deploy' 的页面时,我一直 运行 进入 404 'File not found'。该网站是从我的回购中的 'gh-pages' 分支构建的,我已将我的主分支与我的所有源文件相匹配。

我在这里担心的一个问题是,发现其他可操作的 Github 页面存储库仅在其 'gh-pages' 分支中包含构建文件夹,而不包含其源代码的其余部分。第二个困惑是,现在我有两次 committed/pushed 我的网站如上所述并且一切正常......直到我去更新一些东西并且返回 404。

所以,我的问题是:

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

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

任何关于此事的帮助将不胜感激,因为我在 500 米下的一个故障排除兔子洞里,我的手电筒 运行 没电了。

谢谢, 贝蒂

TLDR:删除 GitHub 上的 gh-pages b运行ch,然后删除 运行 npm run deploy.

404 'File not found'

发生这种情况是因为您的 gh-pages b运行ch 在根目录下没有 index.html 文件并且您没有指定要在 GitHub 页面设置。此处的快速补救措施是将源文件夹设置为 /build,但这无法实现您使用 gh-pages npm pkg.

寻找的设置

The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.

这是您问题的根本原因。您的 deploy npm 脚本当前设置为仅将 build 文件夹的内容提交到 gh-pages b运行ch。该软件包将为您管理这个 b运行ch,作为一个 b运行ch,具有与 master.

完全不同的历史记录

on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.

可能它在您 运行 部署脚本时起作用,然后您通过手动推送到 b运行ch?

破坏了它

Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?

这个包正在为您处理所有这一切,这真的很酷。对于一些历史 - 当 GitHub Pages 首次出现时 - 说明是创建一个 orphan b运行ch,你可以手动将静态构建推送到其中。请注意,有几种方法可以实现这一点。

Can you describe a process to update the site once it's up?

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

每当您想“部署”您的更改时,您应该 运行 npm run build 从您的源代码构建您的静态应用程序,然后 npm run deploygh-pages将您的静态 build 推送到 gh-pages b运行ch(然后 GitHub 页面将用于您的站点)。