LoginSignup
1
1

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

Posted at

初投稿です!
自己紹介ページを持っておりませんでしたので、復習がてら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を編集

Image from Gyazo

8. デプロイを実行

npm run build
npm run deploy

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

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

CodeRabbit導入

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

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1