概要
この記事ではReactとGithubPagesを使って簡単に自己紹介サイトをデプロイしようと思います。
ハンズオン形式で進めていきますが、詳細な説明はしないので詳しく知りたい方は各単語を検索してみていただけると幸いです。
他にもなるべくレイアウトを一から実装するのは割と面倒なのでchatGPTやGithub Copilotを使って最低限の実装をしてもらっています。
対象者
対象者は以下になります。
使用するツール
使用したツールや技術などをまとめておきます。
前提
この記事では、前提としてnode.jsの実行環境や、VSCodeなどのIDEの準備が終わっている前提で進めています。
もしセットアップが終わっていない場合は書くセットアップを完了いただいた後、この記事に戻ってきていただければと思います。
手順
この章では順番に手順を説明していこうと思います。
プロジェクトの作成
まずはプロジェクトを作成しようと思います。
下記のコマンドをターミナルで打ち込んでください。
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のセットアップ
まずは下記のコマンドの通り実行しましょう。
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/node
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のセットアップ
下記のコマンドを打ちましょう
npx shadcn@latest init
割とリッチなUIが簡単に実装できました。
react-routerの導入
ページごとにコンポーネントを分けて管理したいと思うので、react-routerを導入します。
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を使っているとデプロイ後に真っ白の画面になります。
終わりに
ページは問題なく確認できましたでしょうか？
静的なページで無料で公開するならgithub pagesとてもいいなと思いました。
これからも使っていこうと思います。
