npm create vite@latest

npm install -D sass

   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "deploy": "gh-pages -d dist",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

6. Viteの設定ファイルでbaseプロパティを設定

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/product-name/',
})

7. GitHub でリポジトリを作成

8. 対象リポジトリの Sessings > Pages > build and deployment > Branch のドロップダウンメニューから gh-pagesを選択

9. ローカル環境で動作確認

npm run dev

10. mainブランチにpush

11. ビルド

npm run build

12. デプロイ

npm run deploy

13. 対象のリポジトリ > Actions からデプロイの成功が確認できれば完了です！

その他

• 初めはGitHub Workflowでデプロイしておりましたが、本番環境でコンパイルされませんでしたので、自動化ライブラリで対応いたしました。

• ソースレビューはAIに任せ、設定ファイルはyamlファイルで記述することで共有する際の工数と人為的なミスを減らすことを意識いたしました。

https://coderabbit.ai/ja/

• 仕様書に関するWKIはソースコードにdocフォルダとMarkdownファイルを使用しバージョン管理いたしました。
  VSCodeで”Markdown ALL in One”をインストールことで迅速に記述でき、相対パスも指定できるため管理が行いやすかったです。

参考：

• https://zenn.dev/ttani/articles/github-vscode-documentation-rule