在 GitHub 个页面上部署使用 React JS 制作的网站

Question

实际上，我使用命令行中的 create-react-app 创建了我的第一个 React JS 应用程序。

之前运行 npm run build

现在的问题是 GitHub 页面显示 404。当我移动到 username.github。io/project-name/public 控制台显示 400 错误和一个空白页面

运行之后npm run build

Compiled successfully.

File sizes after gzip:

  39.92 KB  build\static\js\main.a7e4b607.js
  109 B     build\static\css\main.65027555.css

The project was built assuming it is hosted at /project-name/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
To publish it at http://username.github.io/project-name, run:

  npm install --save-dev gh-pages

Add the following script in your package.json.

    // ...
    "scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

Then run:

  npm run deploy

在运行之后 npm run deploy 我得到这个错误。

error: failed to execute prompt script (exit code 1) fatal: could not read Username for 'https://github.com': No error

如何解决这个错误？我们可以在不需要数据库的 GitHub 页面上托管 React js 应用程序吗？

编辑- 我的 package.json 文件

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://username.github.io/project-name",
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^1.0.0"
  }
}

这是我的 package.json 文件中的内容。

Answer 1

如果您的目标只是在 GitHub 页面上托管 create-react-app，您实际上并不需要 gh-pages 包。

手动方式：

在运行 npm run build 之后，构建输出位于 build 文件夹中。在 build 文件夹中复制这些文件。

在您的存储库中创建一个名为 gh-pages 的分支。检查 gh-pages 分支。删除所有内容并将复制的文件粘贴到此 gh-pages 分支中。提交并推送到您的 GitHub 存储库。

转到您的 GitHub 存储库设置并使用 gh-pages 分支设置 GitHub 页面。（参见 https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/）

访问 username.github.io/project-name，您应该能够看到您的应用程序。

自动化方式：

如果使用像Travis CI or Circle CI这样的服务，其实会容易很多。

以Travis CI为例，看这篇文章：6 simple steps to automatically test and deploy your JavaScript app to GitHub Pages

设置完成后，每次将 master 分支中的更改推送到 GitHub 存储库时，Travis CI 将自动构建并部署到您的 GitHub页。

在 GitHub 个页面上部署使用 React JS 制作的网站

Deploy site made with React JS on GitHub pages

node.js

github-pages

reactjs

手动方式：

自动化方式：