如何将 React 应用程序部署到 GitHub 页面

想要展示自己编写的 React 应用程序，将其部署到 GitHub 页面是一个不错的选择。GitHub Pages 提供了一个简单且免费的方式，使其他人可以通过一个链接来查看你的应用程序。

步骤

以下是将 React 应用程序部署到 GitHub 页面的步骤：

1. 创建 React 应用程序

如果还没有创建 React 应用程序，请使用 create-react-app 命令来创建。

npx create-react-app my-app
cd my-app
npm start

此命令将创建一个名为 my-app 的新目录，并在其中初始化一个新的 React 应用程序。npm start 命令将在浏览器中打开一个新的窗口，显示 React 应用程序的默认页面。

2. 将应用程序部署到 GitHub Pages

安装 gh-pages 模块来将应用程序部署到 GitHub Pages。

npm install gh-pages --save-dev

在 package.json 文件中添加以下内容：

"homepage": "https://[username].github.io/[repo-name]",
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
  }

其中，[username] 是你的 GitHub 帐户名，[repo-name] 是你的 GitHub 存储库的名称。

3. 构建 React 应用程序

使用以下命令构建你的 React 应用程序：

npm run build

这将创建一个名为 build 的新目录。

4. 部署应用程序

最后一步是将应用程序部署到 GitHub Pages 上。

npm run deploy

这将会将 build 目录中的文件上传到名为 gh-pages 的分支上。在几分钟内，你的应用程序就会在 https://[username].github.io/[repo-name] 这个链接上可用。

结论

现在，你已经成功地将 React 应用程序部署到 GitHub Pages 上了！你还可以通过为你的应用程序添加自己的自定义域名来进行更多的个性化设置。了解更多关于 GitHub Pages 的信息，请查看 官方文档。