对于开发人员而言，构建Web应用程序总是令人兴奋，尤其是当您首次进入编程世界时。经过许多努力，您可以构建应用程序的前端，并且想要向世界展示您的技能，创造力以及您的辛勤工作。有些人可能对免费托管网站很熟悉，他们可以在其中托管其应用程序（000WebHost.com，InfinityFree.net等），你们中的某些人可能也熟悉Github页面以部署静态网页。如果您不知道，那么这里是检查以下内容的链接：使用GitHub托管免费的静态网站。好了，这些资源非常受欢迎，可以使您的Web应用程序在服务器上运行，为什么不这样做，如果它非常有用并且免费提供。

如何在GitHub上部署您的反应网站

您是否知道您可以使用流行的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-版本

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目录

$ cd react-deploy

＃在开发环境中运行应用程序

$ npm开始

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

github仓库

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

#install gh-pages软件包

$ npm install-保存gh-pages

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

3.看下面的例子...

“ homepage”：“ http://anuupadhyay.github.io/my-app”， 

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

“脚本”：{

  // ...

  “ predeploy”：“ npm run build”，

  “ deploy”：“ gh-pages -d build”，

}

完成上述操作后，您的文件package.json将看起来像这样……

包-json

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

＃创建一个新的git存储库

$ git init

＃添加远程存储库

$ git remote add origin https://github.com/anuupadhyay/my-app.git

7.现在这是魔术。遵循以下命令并生成您的应用的生产版本，以将代码部署在GitHub页面上。

#deploy应用

$ npm运行部署

就是这样。您的React应用程序发布在GitHub页面上，如果要验证它，只需转到Github存储库中应用程序的设置选项卡，然后向下滚动。您将看到类似下面的内容……

发布的网站

在我们的情况下，可以通过以下网址访问该应用程序

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

＃将所有更改的文件路径添加到分阶段更改

$ git添加。

＃提交所有分阶段的更改

$ git commit -m“创建一个React应用并将其发布到GitHub Pages”

＃将本地存储库推送到GitHub上的远程存储库

$ git push origin master

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

主图像

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