* create-react-app使用して作成されました
このチュートリアルでは、Reactアプリを作成してGitHubページに展開する方法を紹介します。
Reactアプリを作成するには、 create-react-app使用します。これは、人々がゼロからReactアプリを作成するために使用できるツールです。 Reactアプリを展開するために、 gh-pages使用します。これは、GitHubが提供する無料のWebホスティングサービスであるGitHub Pagesに物を展開するために使用できるNPMパッケージです。
このチュートリアルをフォローすると、GitHubページに採用された新しいReactアプリが表示されます。カスタマイズできます。
このチュートリアルは、元の英語から次の言語に翻訳されています。
ノードとNPMがインストールされています。このチュートリアルの作成中に使用するバージョンは次のとおりです。
$ node --version
v16.13.2
$ npm --version
8.1.2NPMをインストールすると、システムに2つのコマンドが追加されています。NPMと
npxのどちらも、このチュートリアルの作成npmに使用します。
Gitがインストールされています。このチュートリアルを作成しながら使用するバージョンは次のとおりです。
$ git --version
git version 2.29.1.windows.1githubアカウント。
リポジトリ名：必要な名前を入力できます*。
*プロジェクトサイトの場合、必要な名前を入力できます。ユーザーサイトの場合、githubはリポジトリの名前に次の形式を持つ必要があります。
{username}.github.io（gitname.github.io）
入力した名前は、いくつかの場所に表示されます。（a）github全体のリポジトリへの参照、（b）リポジトリのURL、c）展開されたReactアプリのURLに。
このチュートリアルでは、Reactアプリをプロジェクトサイトとして展開します。
入力してください： react-gh-pages
リポジトリプライバシー： public （またはprivate *）を選択します。
* Github Freeユーザーの場合、GitHubページで使用できるリポジトリの唯一のタイプが公開されます。 Github Proユーザー（および他の有料ユーザー）の場合、 Public RepositoriesとPrivate RepositoriesはGitHubページで使用できます。
私は選択します：公開
リポジトリの初期化：すべてのチェックボックスを空にしたままにします。
これにより、githubは、
README.md、.gitignore、および/またはLICENSEファイルでリポジトリを事前に入力する代わりに、空のリポジトリを作成するようになります。
この時点で、GitHubアカウントには空のリポジトリが含まれており、指定した名前とプライバシータイプがあります。
my-appという名前のReactアプリを作成します：
my-app（web-uiなど）とは別の名前を使用する場合は、このチュートリアルのmy-appのすべての出来事を他の名前（すなわちmy-app>web-uiに置き換えることで達成できます。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で機能します。
ブランチ名：
mastervs.mainGITリポジトリには1つのブランチがあり、これには（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アプリがあり、ソースコードを含むフォルダーにあります。このチュートリアルに示されている残りのコマンドはすべて、そのフォルダーから実行できます。
gh-pages NPMパッケージをインストールしますgh-pages NPMパッケージをインストールし、開発依存関係として指定します。
$ npm install gh-pages --save-devこの時点で、 gh-pages NPMパッケージがコンピューターにインストールされ、Reactアプリの依存性がReact Appのpackage.jsonファイルに文書化されています。
package.jsonファイルにhomepageプロパティを追加しますテキストエディターでpackage.jsonファイルを開きます。
$ vi package.jsonこのチュートリアルでは、私が使用するテキストエディターはVIです。必要なテキストエディターを使用できます。たとえば、ビジュアルスタジオコード。
この形式にhomepageプロパティを追加*： https://{username}.github.io/{repo-name}
*プロジェクトサイトの場合、それが形式です。ユーザーサイトの場合、形式は次のとおりです。https
https://{username}.github.io。homepageプロパティの詳細については、create-react-appドキュメントの「GitHubページ」セクションをご覧ください。
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true,この時点で、React Appのpackage.jsonファイルには、 homepageという名前のプロパティが含まれています。
package.jsonファイルに追加しますテキストエディターでpackage.jsonファイルを開きます（まだ1つで開いていない場合）。
$ vi package.json predeployプロパティとscriptsオブジェクトにプロパティdeployことを追加します。
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",この時点で、React Appのpackage.jsonファイルには展開スクリプトが含まれています。
ローカルGITリポジトリに「リモート」を追加します。
この形式でコマンドを発行することでそれを行うことができます。
$ git remote add origin https://github.com/{username}/{repo-name}.gitそのコマンドをあなたの状況に合わせてカスタマイズするには、 {username}をgithub usernameに置き換え、 {repo-name}をステップ1で作成したgithubリポジトリの名前に置き換えます。
私の場合、私は実行します：
$ git remote add origin https://github.com/gitname/react-gh-pages.gitそのコマンドは、私がこのローカルGITリポジトリ内から
$ git pushコマンドを発行するときに、私が私が私に代わって行動するgh-pagesNPMパッケージがいつでも物事をプッシュしたい場所をgitに伝えます。
この時点で、ローカルリポジトリには「リモート」があり、そのURLがステップ1で作成したGitHubリポジトリを指します。
ReactアプリをGitHubリポジトリにプッシュします
$ npm run deployこれにより、
package.jsonで定義されているpredeployおよびdeployScriptsが実行されます。ボンネットの下では、
predeployスクリプトはReactアプリの分散型バージョンを構築し、buildという名前のフォルダーに保存します。次に、deployスクリプトは、そのフォルダーの内容をGitHubリポジトリのgh-pagesブランチで新しいコミットに押し込み、まだ存在しない場合はそのブランチを作成します。
デフォルトでは、
gh-pagesブランチでの新しいコミットには、「更新」のコミットメッセージが表示されます。次のように、-mオプションを介してカスタムコミットメッセージを指定できます。$ npm run deploy -- -m " Deploy React app to GitHub Pages "
この時点で、GitHubリポジトリには、Reactアプリの分散バージョンを構成するファイルを含むgh-pagesという名前のブランチが含まれています。ただし、これらのファイルをまだ提供するようにgithubページを構成していません。
gh-pages/ (root)それでおしまい！ ReactアプリはGitHubページに展開されています！
この時点で、Reactアプリはステップ4で指定したhomepage URLにアクセスした人なら誰でもアクセスできます。たとえば、私が展開したReactアプリにはhttps://gitname.github.io/react-gh-pagesでアクセスできます。
前のステップで、 gh-pages NPMパッケージは、GitHubリポジトリのgh-pagesという名前のブランチにReactアプリの分散型バージョンをプッシュしました。ただし、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-pages2つのブランチがあります。masterブランチにはReactアプリのソースコードが含まれ、gh-pagesブランチにはReactアプリの分散バージョンが含まれます。
create-react-app展開ガイドCNAMEファイルを保存しますcreate-react-appによって生成されたデフォルトのReactアプリをユニークなものに変える時間です！master - Reactアプリのソースコードgh-pagesそのソースコードから構築されたReactアプリこのチュートリアルのメンテナンスに貢献してくれたこれらの人々に感謝します。
このリストは手動で維持されています。現在、（a）最終的にmasterに合併したプルリクエストを提出した各人、および（b）別の方法で貢献した（建設的なフィードバックを提供する）、そして承認した各人が含まれます。私はこのリストにそれらを含めています。
