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的可分佈版本。