react gh pages下载 - react gh pages源代码下载

react gh pages

其他源码

下载

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

*使用create-react-app创建

介绍

在本教程中，我将向您展示如何创建React应用程序并将其部署到GitHub页面。

为了创建React应用程序，我将使用create-react-app ，这是人们可以用来从头开始创建React应用程序的工具。要部署React应用程序，我将使用gh-pages ，这是人们可以用来将事物部署到GitHub页面的NPM软件包，GitHub Pages是GitHub提供的免费Web托管服务。

如果您遵循本教程，则最终将获得一个新的React应用程序（在GitHub页面上进行的启用），然后您可以自定义。

翻译

该教程已将其原始英语翻译成以下语言：

传统中文（信用： @creaper9487）

教程

先决条件

安装了节点和NPM。以下是我在制作本教程时要使用的版本：
```
$ node --version
v16.13.2

$ npm --version
8.1.2
```
安装NPM将在制作本教程时将使用的系统添加两个命令 - npm和npx 。
git已安装。这是我在制作本教程时要使用的版本：
```
$ git --version
git version 2.29.1.windows.1
```
GitHub帐户。

程序

1。在github上创建一个空存储库

登录您的GitHub帐户。
访问创建新的存储库表格。
填写表格如下：
- 存储库名称：您可以输入所需的任何名称*。
  *对于项目站点，您可以输入任何所需的名称。对于用户站点，GitHub要求存储库的名称具有以下格式： {username}.github.io （例如gitname.github.io ）
  您输入的名称将显示在几个地方：（a）在整个GitHub中对存储库的引用，（b）在存储库的URL中，以及（c）在已部署的React App的URL中。
  在本教程中，我将部署React应用程序作为项目站点。
  我将输入： react-gh-pages
- 存储库隐私：选择public （或私有*）。
  *对于GitHub免费用户，唯一可以与GitHub页面一起使用的存储库是公开的。对于GitHub Pro用户（以及其他付费用户），可以与GitHub页面一起使用公共和私人存储库。
  我会选择：公开
- 初始化存储库：将所有复选框留为空。
  这将使Github创建一个空存储库，而不是使用README.md ， .gitignore和/或LICENSE文件预先填充存储库。
提交表格。

此时，您的GitHub帐户包含一个空存储库，其中包含您指定的名称和隐私类型。

2。创建一个React应用程序

创建一个名为my-app的React应用程序：
如果您想使用my-app （例如web-ui ）的其他名称，则可以通过在本教程中替换所有my-app的出现来实现此目标，并使用其他名称（即my-app > web-ui ）。
```
$ npx create-react-app my-app
```
该命令将创建一个用JavaScript编写的React应用程序。要创建用Typescript编写的一个，您可以发布此命令：
```
$ npx create-react-app my-app --template typescript
```
该命令将创建一个名为my-app的新文件夹，该文件夹将包含React应用程序的源代码。
除了包含React应用程序的源代码外，该文件夹也是GIT存储库。该文件夹的特征将在步骤6中发挥作用。
分支名称： master与main
GIT存储库将有一个分支，该分支将被命名为（a） master ，是新的GIT安装的默认设备；或（b）git配置变量的值， init.defaultBranch ，如果您的计算机正在运行git版本2.28或更高版本，并且您已在git配置中设置该变量（例如，通过$ git config --global init.defaultBranch main ）。
由于我没有在GIT安装中设置该变量，因此我的存储库中的分支将被命名master 。如果存储库中的分支有不同的名称（您可以通过运行$ git branch进行检查），例如main ;您可以在本教程的其余部分中替换所有master的所有出现，并用其他名称（例如master → main ）。
输入新创建的文件夹：
```
$ cd my-app
```

此时，您的计算机上有一个React应用程序，您在包含其源代码的文件夹中。本教程中显示的所有剩余命令都可以从该文件夹运行。

3。安装`gh-pages` NPM软件包

安装gh-pages NPM软件包并将其指定为开发依赖性：
```
$ npm install gh-pages --save-dev
```

此时，在您的计算机上安装了gh-pages NPM软件包，React应用程序对其的依赖性已记录在React App的package.json文件中。

4。将`homepage`属性添加到`package.json`文件

在文本编辑器中打开package.json文件。
```
$ vi package.json
```
在本教程中，我将使用的文本编辑器是VI。您可以使用所需的任何文本编辑器；例如，Visual Studio代码。
以这种格式添加一个homepage属性*： https://{username}.github.io/{repo-name}
*对于项目站点，这就是格式。对于用户站点，格式为： https://{username}.github.io 。您可以在create-react-app文档的“ github页面”部分中阅读homepage属性的更多信息。
```
{
  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
  "private": true,
```

此时，React App的package.json文件包括一个名为homepage属性。

5。将部署脚本添加到`package.json` 。

在文本编辑器中打开package.json文件（如果尚未在一个中打开）。
```
$ vi package.json
```

将predeploy属性和deploy属性添加到scripts对象：

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

此时，React App的package.json文件包括部署脚本。

6.添加一个指向GitHub存储库的“远程”

将“远程”添加到本地GIT存储库中。
您可以通过以这种格式发布命令来做到这一点：
```
$ git remote add origin https://github.com/{username}/{repo-name}.git
```
要在您的情况下自定义该命令，请用您的github用户名替换{username} ，然后用您在步骤1中创建的github存储库的名称替换{repo-name} 。
就我而言，我会运行：
```
$ git remote add origin https://github.com/gitname/react-gh-pages.git
```
该命令告诉git我希望它在$ git push （或代表我的gh-pages npm软件包）中推出东西。

此时，本地存储库有一个“遥控器”，其URL指向您在步骤1中创建的GitHub存储库。

7。将React应用推到GitHub存储库

将React应用程序推入GITHUB存储库
```
$ npm run deploy
```
这将导致predeploy和deploy package.json中定义的脚本运行。
在引擎盖下， predeploy脚本将构建React应用程序的可分布版本，并将其存储在名为build的文件夹中。然后， deploy脚本将将该文件夹的内容推向GITHUB存储库的gh-pages分支上的新提交，如果该分支尚不存在，则创建该文件夹。
默认情况下， gh-pages分支机构上的新提交将具有“更新”的提交消息。您可以通过-m选项指定自定义提交消息，例如：
```
$ npm run deploy -- -m " Deploy React app to GitHub Pages "
```

在这一点上，GitHub存储库包含一个名为gh-pages分支，其中包含构成React App的可分布版本的文件。但是，我们尚未配置GitHub页面以服务这些文件。

8。配置github页面

导航到github页面设置页面
1. 在您的Web浏览器中，导航到GitHub存储库
2. 在代码浏览器上方，单击标有“设置”的选项卡
3. 在侧边栏中，在“代码和自动化”部分中，单击“页面”
像这样配置“构建和部署”设置：
1. 来源：从分支部署
2. 分支：
  - 分支： gh-pages
  - 文件夹： / (root)
单击“保存”按钮

就是这样！ React应用程序已部署到GitHub页面！

此时，访问您在步骤4中指定的homepage URL的任何人都可以访问React应用程序。

9。（可选）将React App的源代码存储在GitHub上

在上一步中， gh-pages NPM软件包将React应用程序的可分布版本推到了GitHub存储库中名为gh-pages分支。但是，React应用程序的源代码尚未存储在GitHub上。

在此步骤中，我将向您展示如何在GitHub上存储React应用程序的源代码。

在遵循本教程时，将您所做的更改提交到本地GIT存储库的master分支；然后，将该分支推到GitHub存储库的master分支。
```
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin master
```
我建议此时探索GitHub存储库。它将有两个分支： master gh-pages 。 master分支将包含React App的源代码，而gh-pages分支将包含React App的可分布版本。