在github页面上使用react JS的部署站点

Question

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

在运行npm run build

之前

现在的问题是github页面显示404.当我搬到用户名.github.io/project-name/public时，控制台显示400错误和空白页

运行npm run build

Compiled successfully.
File sizes after gzip:
  39.92 KB  buildstaticjsmain.a7e4b607.js
  109 B     buildstaticcssmain.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后，我会得到此错误。

错误：无法执行提示脚本（退出代码1）致命：无法 阅读" https://github.com'的用户名：无错误

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

编辑 - 我的软件包.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"
  }
}

这就是我的包装中的内容。

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或Circle CI等服务实际上要容易得多。

对于Travis CI示例，请查看本文：6个简单的步骤，自动测试和部署JavaScript应用程序到GitHub页面

设置此设置后，每次将master分支更改推向GitHub Repo时，Travis CI都会自动构建并部署到您的GitHub页面。