[GitHubPages] Reactで作成したポートフォリオサイトをGitHubPagesで爆速公開したかった

- もくじ -
• 1.TypeScriptでreactのプロジェクトを作成する
• 2.GitHubにリポジトリを作成する
• 3.ビルド用のパッケージをインストールする
• 4.ビルド&デプロイする
• 5.確認する
• 参考資料

TypeScriptでreactのプロジェクトを作成する

// {プロジェクト名}の部分は好きなプロジェクト名を入れてください。
$ npx create-react-app {プロジェクト名} --template typescript
// たとえばこんな感じ
$ npx create-react-app my-git-hub-pages --template typescript

GitHubにリポジトリを作成する

• リポジトリの名前を{userName}.github.ioとする

• ローカルにリモートリポジトリのurlを登録する

このとき、ディレクトリを先ほど作成したプロジェクトに移動しておく

$ git remote add origin {さっき作成したリモートリポジトリ}

ビルド用のパッケージをインストールする

• gh-pagesをインストールする

$ npm install gh-pages --save-dev

• package.jsonにscript追加

"scripts": {
    "deploy": "gh-pages -d build" // このscriptを追加
  },

ビルド&デプロイする

• ビルドする

$ npm run build

• デプロイする

$ npm run deploy

確認する

• 下記のURLにアクセスしてReactのページが表示されればOK

https://{userName}.github.io/

ex) 私のGitHubPagesです

参考資料

• ReactアプリをGitHub Pages(Project Pages)で公開する - Qiita
• 【初心者向け】GitHub Pagesを使ってHPを爆速で公開する - Qiita