如何在 GitHub 上部署你的 React 网站？

构建 Web 应用程序对开发人员来说总是令人兴奋的，尤其是当您第一次踏入编程世界时。经过大量的努力，您构建了应用程序的前端，并且想要向全世界展示您的技能、创造力，当然还有您的辛勤工作。有些人可能熟悉免费托管网站，他们可以在其中托管他们的应用程序。你们中的一些人可能还熟悉 Github 页面来部署静态网页。如果您不知道，那么这里是检查的链接… 使用 GitHub 托管免费静态网站。嗯，这些资源非常流行，可以让您的 Web 应用程序在服务器上运行，如果它非常有用并且免费提供，为什么不呢。

你知道你可以使用流行的 javascript 库React制作一个很酷的网站，也可以部署在GitHub 页面上吗？你不相信吗……？在您的系统中安装 React Developer Tool 并自行检查链接Portfolio 。使用 React学习和构建Web 应用程序是不是很酷很神奇？在 GitHub 页面上免费部署您的 React Web 应用程序并向全世界展示它，这不是很酷很神奇吗？

现在，如果您对学习 ReactJS 感到兴奋，那么这里是GeeksforGeeks ReactJS的链接，但要在 GitHub 页面上部署您漂亮的应用程序，我们需要了解更多内容。因此，在本博客中，我们将讨论在 GitHub 页面上部署 React 应用程序的分步过程。

基本术语

1. React： Facebook 开发的一个流行的 JavaScript 库，用于为用户界面创建和处理灵活的组件。

2. Git：一个惊人的开源版本控制系统，可以处理大小项目。它用于与其他开发人员协作并在软件开发过程中跟踪源代码的更改。

3. GitHub：用于协作和版本控制的代码托管平台。它用于工作和存储 Web 开发项目。

4. Github Pages：它允许您将您的 GitHub 存储库变成一个优雅的网站，以展示您的投资组合、项目、文档或其他任何您想要上线的内容，但请记住，无需设置数据库，也无需配置服务器。

5. NodeJS和npm ： Node.js 是在服务器上运行 Javascript 的服务器运行时环境，npm 是一个包管理器，用于为 JavaScript 项目下载和安装不同的包。

先决条件

1.下载 Git 并执行默认安装过程。

2.应安装足够版本的 NodeJS 和 npm。这是检查安装和版本的命令。

$ node --version

$ npm --version

3. 安装了足够版本的 create-react-app。这是检查安装和版本的命令。

$ create-react-app --version

如果未安装，请使用以下命令全局安装。

$ npm install -g create-react-app

4.一个 GitHub 帐户。

现在真正的乐趣开始（程序）

1.首先使用下面给出的命令在您的系统中创建一个 React 应用程序。我们给这个应用程序命名为“react-deploy”。这是您将部署到 GitHub Pages 的应用程序。此过程将在您的目录中创建一个名为“react-deploy”的新文件夹。

$ create-react-app react-deploy

2.现在输入您的新应用程序并运行以下命令以启动该应用程序。您将看到您的应用程序正在本地开发服务器http://localhost:3000 上运行。

#change directory
$ cd react-deploy
#run application in the development environment
$ npm start

3.在本地服务器上检查您的应用程序运行完美无错误后，在 GitHub 上创建一个新存储库。我们将此名称命名为“my-app”，它与您在上一步中创建的应用程序名称不同。但是，您也可以为 GitHub 存储库名称选择相同的名称，即“react-deploy”。这完全取决于你。

4.安装gh-pages包作为应用程序的“dev-dependency”。

#install gh-pages package
$ npm install --save gh-pages

5.向应用程序的package.json文件添加一些属性。在顶层，添加主页属性。将其值定义为字符串http://{username}.github.io/{repo-name} ，其中 {username} 是您的 GitHub 用户名，{repo-name} 是 GitHub 存储库的名称（my- app) 您在第 3 步中创建的。

看看下面给出的例子……

"homepage": "http://anuupadhyay.github.io/my-app", 

现在您需要添加另外两个属性。在现有的脚本属性中，添加一个predeploy属性和一个deploy属性，每个属性的值如下所示：

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  //...
  "build": "react-scripts build && cp build/index.html build/404.html", // this will prevent page reloads to give a  404 error
}

完成上述操作后，您的文件package.json将如下所示……

接下来，如果您使用的是来自 react-router-dom 的路由器，那么您需要将浏览器路由器标签更改为

//...
  BrowserRouter basename={process.env.PUBLIC_URL}
//... 

6.在此步骤中，在应用程序文件夹中创建一个 git 存储库，并将 GitHub 存储库作为“远程”添加到您的本地 git 存储库中。这将使gh-pages包知道您希望它在步骤 7 中部署应用程序的位置。它还将使 git 知道您希望它将源代码（即主分支上的提交）推送到第 8 步。

#create a new git repository
$ git init
#add remote repository
$ git remote add origin https://github.com/anuupadhyay/my-app.git

7.现在神奇来了。按照以下命令生成应用程序的生产版本，以在 GitHub 页面上部署代码。

#deploy application
$ npm run deploy

而已。你的 React 应用程序发布在 GitHub 页面上，如果你想验证它，只需转到 Github 存储库中应用程序的设置选项卡并向下滚动。你会看到类似下面的东西……

在我们的例子中，该应用程序可通过以下网址访问：https://anuupadhyay.github.io/my-app/

8.此时，如果您探索 GitHub 存储库，您会注意到 master 分支不存在，而 gh-pages 分支确实存在。这意味着后者包含构建的应用程序代码，而不是应用程序的源代码。所以要创建一个默认的主分支并将你的源代码推送到它，运行下面给出的命令……

#add all changed file paths to staged changes
$ git add.
#commit all staged changes
$ git commit -m "Create a React app and publish it to GitHub Pages"
#pushed local repository to remote repository on GitHub
$ git push origin master

在这最后一步之后再次探索 GitHub 存储库。您会注意到现在存在一个 master 分支，它包含应用程序的源代码。您将在 GitHub 存储库中看到如下所示的内容。

因此，master 分支保存源代码，而 gh-pages 分支保存构建的应用程序代码。