React + Github Pages(Github Actions)

下記に使用しているコードを書く
https://github.com/ikura1/Copying

コードはViteのデフォルトでやる
npm create vite@latest my-vue-app -- --template react-ts

Next.jsを使った方が楽をできるかも…？
Next.js用のアクションがあるらしい
https://dev.classmethod.jp/articles/github-pages-by-actions/

Setting -> Pages に移動して
とりあえず、Github Actionsを選択

推薦されているActionにReact専用のものではなく、jekyllと静的ページのものでした

jekyllについてはよくわからんけど、静的サイト生成機らしい

Static HTMLの設定を開き拡張して使うことにします。
そのために、Github Actionsでのbuild方法を調べます

ジョブの詳細を見るに、js自体はアップロードされていた

つまりviteの設定で参照できていないだけだった

下記を設定することで表示することができた。アイコン以外

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "./",
});

svgのアイコンを./とすることで全部表示できた

<img src="./vite.svg" className="logo" alt="Vite logo" />

https://ikura1.github.io/Copying/