使用 create-react-app 部署 Github Pages
介绍
在本指南中，我将引导您如何将使用create-react-app创建的 React 应用程序部署到gh-pages。
本指南假设您对Git和命令行界面有一定程度的熟悉。
什么是 gh-pages？
根据文档，gh-pages 是一种静态网站托管服务，它直接从 GitHub 上的存储库获取 HTML、CSS 和 JavaScript 文件，可选择通过构建过程运行这些文件，然后发布网站。
我们将介绍部署 React 应用程序的三个步骤。
创建新的存储库
让我们从创建一个新的 repo 开始：
- 前往 github.com/new
- 对于存储库名称，您可以选择任何名称，但在本指南中，我们将使用guide-react-gh-pages
- 单击创建存储库
创建 React 应用程序
打开终端并输入以下命令：
npx create-react-app guide-react-gh-pagesThis will create a new folder named guide-react-gh-pages (or whatever you named your app). Then follow the instructions on how to start and run the application.
Navigate to the folder that was just created.
cd /path/to/guide-react-gh-pagesLink and push your newly created project to Github Repository.
git init git add . git commit -m "first commit" git remote add origin git@github.com:username/guide-react-gh-pages.git git push -u origin master
推送至 Github
仍然在终端和应用程序的文件夹中，按照以下步骤操作：
安装gh-pages作为开发依赖项
npm install gh-pages --save-devOpen the app's packaage.json file and
Add an homepage field with its value to be the string https://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created in Step 1.
"homepage": "https://myusername.github.io/guide-react-gh-pages",If you skip the step, the app will not deploy correctly because create-react-app uses the homepage field to determine the root URL in the built HTML file.
Update the existing scripts field with the following:
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", }Deploy the app.
npm run deployThe predeploy script will run automatically before deploy is run.
Voila! The app is now accessible at the URL you specified in the homepage field in the package.json file.
概括
本指南提供了如何使用 create-react-app 和 gh-pages npm 包通过几个简单的步骤将您的 React 应用程序发布到 gh-pages 的演练。
如果您想了解更多信息，这里有一个有用的链接：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~