メインコンテンツへスキップ
kt-tech.blog

【React × Github Pages】簡単に自己紹介サイト作ってみた。

勉強会約9分で読めます

この記事でわかること

  • 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

手順

プロジェクトの作成

まずはプロジェクトを作成しようと思います。

下記のコマンドをターミナルで打ち込んでください。

Bash
npm create vite@latest

こんな感じで順番に選択していきました。

project名は自由に決めましょう。

型安全でやりたいのでTypeScriptを選択しましたが、SWCを使うかどうかは正直このプロジェクトではどっちでもいいかなという感じです。

[email protected]
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つだけです。

  1. npm install tailwindcss @tailwindcss/vite
  2. vite.config.ts の plugins に tailwindcss() を追加
  3. CSS に @import "tailwindcss"; の1行を書く（@tailwind base 等は不要）

テーマの拡張は CSS の @theme ブロックで行います。以下の手順は v3 を使う場合のものとして読んでください。

まずは下記のコマンドの通り実行しましょう。

Bash
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

次に生成された tsconfig.json を編集します。

compilerOptions の部分を追加する感じです。

JSON
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

さらに tsconfig.app.json も編集します。

JSON
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

そして tailwind.config.js も修正します。

JavaScript
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}', 
    './public/index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

さらに index.css にも記述を追加します。

CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

最後に vite.config.ts でエラーが出ないように下記のコマンドとファイルの編集を行います。

Bash
npm i -D @types/node
TypeScript
import 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のセットアップ

下記のコマンドを打ちましょう

Bash
npx shadcn@latest init

割とリッチなUIが簡単に実装できました。

react-routerの導入

ページごとにコンポーネントを分けて管理したいと思うので、react-routerを導入します。

ポイント
v7 以降は react-router-dom が react-router に統合されました。 v7 では互換のため react-router-dom も残っていますが、新規なら npm install react-router で、import 先も react-router にしておくのが無難です（RouterProvider だけは react-router/dom から）。v8 では移行が必須になります。
Bash
npm install react-router-dom

ページの作成

ここはそれぞれ自由にやっていただけたらという感じです。

TypeScript
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の修正

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 になりません。設定も不要です。

TypeScript
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 に戻す方法を取ります。

TypeScript
const router = createBrowserRouter(routes, {
  basename: "/kt-profile-site",  // リポジトリ名
});

さらに vite.config.ts の base もリポジトリ名に合わせます。

TypeScript
export default defineConfig({
  base: "/kt-profile-site/",  // 上の base: "./" から変更
  // ...
});
Tips
迷ったら HashRouter でいいと思います。自己紹介サイトなら URL の見た目は大きな問題にならず、設定を増やさない分だけ壊れにくいです。独自ドメインを当てる予定があるなら、その時点で basename は不要になります。

まとめ

  • Vite + React + TypeScript なら、プロジェクト作成から公開まで 1 日で終わる
  • 静的サイトを無料で公開するなら GitHub Pages は手軽でよい
  • つまずくのはほぼ react-router との組み合わせ。SPA を静的ホスティングに置くときの定番なので、先に知っておくと楽

参考リンク

更新履歴

  1. Tailwind CSS v4 と React Router v7 で手順が変わった点を注記として追加。誤字を修正

この記事のタグ

#React

この記事が役に立ったら共有しよう

Share
B!

Koki

フルスタックエンジニア / React, Next.js, TypeScript

誤字・間違いを報告するXで感想を書く

関連記事

すべて見る