Vite + TypeScript + Sass + GitHub Pagesで簡単デプロイ

初投稿です！
自己紹介ページを持っておりませんでしたので、復習がてらVite, TypeScript, Sass, GitHubPagesでサクッと公開してみましたので、
メモの意味も込めてまとめてみました。
こちらにソースコードも載せております。

手順

1.以下のコマンドでViteのプロジェクトを作成→使用技術を聞かれるので好みのものを選択

npm create vite@latest

2.下記のコマンドでsass導入

npm install -D sass

3.GitHubPages自動化ライブラリを導入

npm install gh-pages --save-dev

4.package.jsonにスクリプトを追加

   "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"
   },

5.viteの設定ファイルでbaseを設定

import { defineConfig } from 'vite'

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

6.GitHubでリポジトリを作成& git push

7.GitHubPagesの設定画面でBranchを編集

8. デプロイを実行

npm run build
npm run deploy

7.Actionsタブで成功が確認できれば完了です。

あとは好みに合わせてvite.config.jsやディレクトリ構造などを変更してみてください。

CodeRabbit導入

導入手順に従えば問題ございません。
設定はGUIでも行うことはできますが、私はyamlファイルで設定いたしました。
こちらのファイルも上記のGitHubにあげました、ソースコードより確認が可能です。