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

如果你是一名 React 程序员，想要发布你的网站，那么 GitHub Pages 是一个不错的选择。它可以让你快速、免费地发布你的静态网站，并且支持很多类型的网站，包括 React 网站。在本文中，我们将介绍如何在 GitHub 上部署你的 React 网站。

步骤一：创建一个 GitHub Pages 仓库

首先，你需要在 GitHub 上创建一个新的仓库。这个仓库将作为你的网站的主页，因此需要以你的用户名为前缀，后面加上 .github.io 作为仓库名。例如，如果你的 GitHub 用户名是 username，那么你应该创建一个名为 username.github.io 的仓库。

在创建仓库时，你需要注意以下几点：

• 仓库必须是公开的，否则你的网站将无法被访问。
• 如果你想使用自定义的域名，那么你需要在仓库的根目录下添加一个名为 CNAME 的文件，并将自定义的域名写入其中。

步骤二：克隆仓库到本地

一旦你创建了仓库，下一步就是将仓库克隆到你的本地机器上。你可以使用 Git 命令行工具或 GitHub 的官方客户端来完成这个任务。

git clone https://github.com/username/username.github.io.git

步骤三：准备你的 React 网站

接下来，你需要将你的 React 网站准备好，如果你已经有一个 React 项目，那么你可以直接跳过这一步。否则，你可以使用 create-react-app 命令行工具来创建一个新的 React 项目。

npx create-react-app my-react-app

步骤四：将 React 网站打包成静态文件

一旦你准备好了你的 React 网站，下一步就是将它打包成静态文件并输出到 build 目录中。你可以使用以下命令来完成这个任务：

npm run build

步骤五：将打包后的静态文件部署到 GitHub Pages

最后一步就是将打包后的静态文件部署到 GitHub Pages 上。你可以使用以下命令来完成这个任务：

git checkout --orphan gh-pages
git rm -rf .
git commit --allow-empty -m "Initializing gh-pages branch"
git checkout master -- build
mv build/* ./
rm -r build
git add .
git commit -m "Deploying React app"
git push origin gh-pages

上述命令将会：

• 创建一个新的名为 gh-pages 的分支，用来保存静态文件。
• 清除该分支中的所有旧文件。
• 将打包后的静态文件复制到根目录下。
• 删除 build 目录。
• 将新文件提交到 gh-pages 分支上。
• 推送 gh-pages 分支到 GitHub 上。

如果一切都顺利，你的 React 网站就已经成功部署到了 GitHub Pages 上。你可以通过 https://username.github.io 来访问你的网站，其中 username 为你的 GitHub 用户名。