Question

实际上，我使用cmd行的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后，我收到此错误。

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

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

修改我的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或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制作的站点

1 个答案:

手动方式：

自动化方式：