https://kenkenpa198.github.io/helloworld-vite/
$ npm create vite@latest
✔ Project name: … practice-vite
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript
...
Done. Now run:
cd practice-vite
npm install
npm run dev$ cd practice-vite
$ npm install
added 11 packages, and audited 12 packages in 1s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ npm run dev
> [email protected] dev
> vite
VITE v5.0.11 ready in 120 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help$ npm run build
> [email protected] build
> vite build
vite v5.0.11 building for production...
✓ 7 modules transformed.
dist/index.html 0.45 kB │ gzip: 0.29 kB
dist/assets/index-X4m0RMh6.css 1.21 kB │ gzip: 0.63 kB
dist/assets/index-xf4JlvXi.js 2.59 kB │ gzip: 1.38 kB
✓ built in 87ms
$ npm run preview
> [email protected] preview
> vite preview
➜ Local: http://localhost:4173/
➜ Network: use --host to expose
➜ press h + enter to show helpREADME 冒頭の公開ページを GitHub Pages でデプロイするまでのメモ。
-
プロジェクトルートへ
vite.config.jsを作成する。cd practice-vite touch vite.config.js -
ルートディレクトリの設定を記述する。
GitHub リポジトリが
https://github.com/<USERNAME>/<REPO>の場合は'/<REPO>/'を記述する。export default { base: '/helloworld-vite/', }
-
GitHub Actions の YAML ファイルを作成する。
mkdir -p .github/workflows touch .github/workflows/main.yml
-
main.ymlへ 静的サイトのデプロイ | Vite > GitHub Pages 上のサンプルコードを記述する。# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー name: Deploy static content to Pages ...
-
GitHub リポジトリページ >
Settings>Pagesへ遷移する。 -
Build and deployment>SourceのプルダウンメニューからGitHub Actionsを選択する。 -
プッシュする。
-
main ブランチを元に、npm パッケージのインストール ～ ビルド ～ デプロイが行われたことを確認する。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent