アジェンダ

ReactとViteでGitHub Pagesにサイトを公開するための手順をまとめます。ReactとViteの手順は基本的に同じですが、異なる場合は別途記述しています。

手順

1. プロジェクトの作成

まずは、以下のコマンドで、プロジェクトを作成します。

React:

npx create-react-app my-app
cd my-app

Vite:

npm create vite@latest my-project --template react
cd my-project
npm install

2. `gh-pages` パッケージのインストール

React、ViteでGitHub Pagesにサイトを公開するためには、gh-pagesパッケージをインストールする必要があるので、以下のコマンドでインストールします。

npm install gh-pages --save-dev

3. `package.json`の編集

package.jsonに以下を追加します。

package.json

{
  "homepage": "https://ユーザー名.github.io/リポジトリ名",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" // Reactの場合
    "deploy": "gh-pages -d dist"  // Viteの場合
  }
}

4. React Routerの設定

続いて、React Routerの設定で、basenameを追加いたします。

React:

main

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Router basename="/リポジトリ名">
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

Vite:

main

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Router basename="/リポジトリ名">
      <App />
    </Router>
  </React.StrictMode>,
);

Viteの場合は別途vite.config.tsの設定も追加しなくてはいけません。

vite.config.tsの設定:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/リポジトリ名/', /* 追加 */
});

5. デプロイ

以下のコマンドでサイトをデプロイします。

npm run deploy

6. GitHub Pages の設定

GitHubリポジトリの Settings -> Pages で Source を gh-pages ブランチに設定します。

これで、https://ユーザー名.github.io/リポジトリ名/ でサイトが公開されます。

参考