gh-pages-vite

Viteを使ってGitHub Pagesへウェブサイトをデプロイするちょっとしたデモ。 Viteのガイド、静的サイトのデプロイページにしたがってスタートします。 デザインはBootstrap v5、画像はunsplashのものを使用します。

note:

• Vite v5以降を使用しています
• Node.js v20以降(see Node.js release schedule) ＋dart-sassを使用
• GitHub Actionsを使用してデプロイ
• Stylelint、Prettier、HTMLHintを使用

how to start

はじめにソースコードをclone:

git clone git@github.com:snaomix/gh-pages-vite.git

nodeパッケージをインストール

cd gh-pages-vite
npm install

ウェブサイトをビルド＆ローカルでテスト:

npm run build
npm run preview

ウェブサイトをdevモードで起動:

npm run dev

Sass(SCSS)をチェックする(Stylelint)

npm run lint:css

Sass(SCSS)をチェックする(Prettier)

npm run check:css

HTMLをチェックする(HTMLHint)

npm run check:html

Sass(SCSS)を整形する(Prettier) ⚠️ ファイルが上書きされます

npm run format:css

JS, JSONを整形する(Prettier) ⚠️ ファイルが上書きされます

npm run format

setting GitHub Actions & run workflow

1. GitHub Freeの場合、パブリックリポジトリに設定しておく
2. Settings > Pages > Build and deploymentのSourceを「GitHub Actions」を選択
3. Actions > Deploy GitHub Pages > Run workflow > 「Run workflow」を選択

more info

• GitHub Pagesのドキュメンテーション … docs.github.com
• GitHub Pages examples … github.com
• GitHub Actionsのドキュメント … docs.github.com