アジェンダ
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/リポジトリ名/ でサイトが公開されます。