如何将 React App 部署到 GitHub Pages

您是否构建了 React 应用程序并想要部署它，按照这些简单的步骤，您就可以部署并向世界展示您的精彩应用程序。

我将展示如何使用 GitHub Pages 创建和部署create-react-appReact App

先决条件：

• GitHub帐户。

• 在您的机器上安装Git并设置 Git。

确保您的机器上安装了 Node.js 和 Npm。

• 安装Node.js

• 安装Npm

注意：您需要在本地计算机上安装 Node 8.10.0 或更高版本。

程序：

1-首先创建一个名为my-appusing的存储库create-react-app。

npm init react-app my-app

2-我们需要安装GitHub Pages包作为开发依赖项。

cd my-app
npm install gh-pages --save-dev

3-向文件添加属性package.json。

我们需要在顶层添加的第一个属性，homepage其次我们将其定义为一个字符串，其值为"http://{username}.github.io/{repo-name}"{username} 是您的 GitHub 用户名，{repo-name} 是您创建的 GitHub 存储库的名称，它看起来像这样：

"homepage": "http://yuribenjamin.github.io/my-app"

其次在现有的scripts属性中我们还需要添加predeploy和deploy。

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

4-创建一个 Github 存储库并初始化它，然后将其作为远程存储库添加到您的本地 git 存储库中。

现在，使用你的应用程序名称创建一个远程 GitHub 存储库，然后返回初始化它
git init
并将其添加为远程
git remote add origin git@github.com:Yuribenjamin/my-app.git

5-现在将其部署到 GitHub Pages。

只需运行以下命令：

npm run deploy

此命令将创建一个名为gh-pages“此分支托管您的应用程序”的分支，并且您在package.json文件中创建的主页属性将保存您的链接以进行实时预览，或者您可以打开分支设置向下滚动到 GitHub Pages 部分，您会发现：

访问已部署的应用程序

6- 提交并推送到 GitHub。可选

git add .
git commit -m "Your awesome message"
git push origin master

回顾

我们创建了 React App，create-react-app
然后将其安装gh-pages为开发依赖项
，并在package.json文件中添加了一些属性，homepage还在现有scripts属性中添加了一些属性predeploy，deploy
并创建了一个远程存储库并对其进行初始化
并运行npm run deploy以生成生产版本并将其部署到 GitHub Pages。

如果您有任何疑问，请随时提出。
我们非常乐意收到您的回复。