【React × Github Pages】簡単に自己紹介サイト作ってみた。
この記事でわかること
- Vite + React + TypeScript でプロジェクトを立ち上げ、TailwindCSS と shadcn/ui を入れるまでの手順
- gh-pages を使って GitHub Pages に無料でデプロイする方法
- react-router を使ったときにデプロイ先で画面が真っ白になる原因
TypeScript / React / Git / GitHub の基礎知識、Node.js 実行環境、IDE（VSCode 等）。記事の手順は Tailwind CSS v3 時点のものです（v4 の手順は本文の注記を参照）
概要
この記事ではReactとGithubPagesを使って簡単に自己紹介サイトをデプロイしようと思います。
ハンズオン形式で進めていきますが、詳細な説明はしないので詳しく知りたい方は各単語を検索してみていただけると幸いです。
他にもなるべくレイアウトを一から実装するのは割と面倒なのでchatGPTやGithub Copilotを使って最低限の実装をしてもらっています。
使用するツール
使用したツールや技術などをまとめておきます。
- 言語: TypeScript
- ビルド: Vite
- CSS : TailwindCSS
- UI: shadcn/ui
- デプロイ先: Github Pages
- AIツール: chatGPT(o1 preview),Github Copilot
手順
プロジェクトの作成
まずはプロジェクトを作成しようと思います。
下記のコマンドをターミナルで打ち込んでください。
npm create vite@latestこんな感じで順番に選択していきました。
project名は自由に決めましょう。
型安全でやりたいのでTypeScriptを選択しましたが、SWCを使うかどうかは正直このプロジェクトではどっちでもいいかなという感じです。
create-vite@5.5.2
Ok to proceed? (y) y
✔ Project name: … kt-profile-site
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC無事に終わったら下記のように表示されると思います
Scaffolding project in /Users/koki-takahashi/Desktop/Private/kt-profile-site...
Done. Now run:
cd kt-profile-site
npm install
npm run dev上記のコマンド通りに実行し起動後、 localhost:5173 にて下記のように表示されていれば問題ありません。
必要なパッケージ
今回使おうと思ってるパッケージは下記の通りです。
- tailwindcss
- shadcn/ui
- react-router
TailwindCSSのセットアップ
この節は Tailwind CSS v3 時点の手順です。 v4（2025年1月リリース）でセットアップが大きく変わり、tailwind.config.js も postcss / autoprefixer も不要になりました。v4 では次の3つだけです。
npm install tailwindcss @tailwindcss/vitevite.config.tsの plugins にtailwindcss()を追加- CSS に
@import "tailwindcss";の1行を書く（@tailwind base等は不要）
テーマの拡張は CSS の @theme ブロックで行います。以下の手順は v3 を使う場合のものとして読んでください。
まずは下記のコマンドの通り実行しましょう。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p次に生成された tsconfig.json を編集します。
compilerOptions の部分を追加する感じです。
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}さらに tsconfig.app.json も編集します。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
}
}そして tailwind.config.js も修正します。
export default {
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./public/index.html',
],
theme: {
extend: {},
},
plugins: [],
}さらに index.css にも記述を追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;最後に vite.config.ts でエラーが出ないように下記のコマンドとファイルの編集を行います。
npm i -D @types/nodeimport path from "path"
import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
base: "./",
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})セットアップが終わったら試しにTailWindCSSが反映されているかみてみましょう。
shadcn/uiのセットアップ
下記のコマンドを打ちましょう
npx shadcn@latest init割とリッチなUIが簡単に実装できました。
react-routerの導入
ページごとにコンポーネントを分けて管理したいと思うので、react-routerを導入します。
react-router-dom が react-router に統合されました。 v7 では互換のため react-router-dom も残っていますが、新規なら npm install react-router で、import 先も react-router にしておくのが無難です（RouterProvider だけは react-router/dom から）。v8 では移行が必須になります。npm install react-router-domページの作成
ここはそれぞれ自由にやっていただけたらという感じです。
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { Contact,Skill,Top,Portfolio } from './pages';
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import { Layout } from './components/layouts/Layout/Layout';
const router = createBrowserRouter([
{ path: "/", element: <Layout><Top /></Layout> },
{ path: "/skill", element: <Layout><Skill /></Layout> },
{ path: "/contact", element: <Layout><Contact /></Layout> },
{ path: "/portfolio", element: <Layout><Portfolio /></Layout> },
]);
createRoot(document.getElementById('root')!).render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
)デプロイ
package.jsonの修正
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"リポジトリの作成と紐付け
Github Pagesへのデプロイ
npm run deployを実行します。
デプロイ後に画面が真っ白になるとき
react-router を使っていると、デプロイ後に画面が真っ白になったり、/skill のような下層ページを直接開くと 404 になります。
原因は2つあります。
1. GitHub Pages は静的ファイルを返すだけ
SPA はすべての URL を index.html で受けて JS 側で振り分けますが、GitHub Pages は /skill という URL に対して skill というファイルを探しに行き、見つからないので 404 を返します。
2. パスの起点がずれている
プロジェクトページの URL は https://<user>.github.io/<repo>/ なのに、createBrowserRouter は / を起点だと思っています。
手っ取り早いのは HashRouter に変える方法です。URL に # が入ります（/#/skill）が、# 以降はサーバーに送られないので 404 になりません。設定も不要です。
import { createHashRouter, RouterProvider } from "react-router-dom";
const router = createHashRouter([
{ path: "/", element: <Layout><Top /></Layout> },
{ path: "/skill", element: <Layout><Skill /></Layout> },
]);URL をきれいに保ちたい場合は、createBrowserRouter のまま basename を渡し、404.html を置いて index.html に戻す方法を取ります。
const router = createBrowserRouter(routes, {
basename: "/kt-profile-site", // リポジトリ名
});さらに vite.config.ts の base もリポジトリ名に合わせます。
export default defineConfig({
base: "/kt-profile-site/", // 上の base: "./" から変更
// ...
});HashRouter でいいと思います。自己紹介サイトなら URL の見た目は大きな問題にならず、設定を増やさない分だけ壊れにくいです。独自ドメインを当てる予定があるなら、その時点で basename は不要になります。まとめ
- Vite + React + TypeScript なら、プロジェクト作成から公開まで 1 日で終わる
- 静的サイトを無料で公開するなら GitHub Pages は手軽でよい
- つまずくのはほぼ
react-routerとの組み合わせ。SPA を静的ホスティングに置くときの定番なので、先に知っておくと楽
参考リンク
更新履歴
- Tailwind CSS v4 と React Router v7 で手順が変わった点を注記として追加。誤字を修正
