React + Vite + TailwindCSSで開発→GitHub Pagesでデプロイする

Tailwind Variantsは、TailwindCSSのクラス名の競合を防げるやつ。

普通にclassName="ここにクラス名 {props.className}"とかやると、propsのクラス名がうまく適用されない可能性があって危険。
なので対策する必要があるが、それにこれが使える。

Tailwind Variantsで提供されているtvを使うと、同じ種類のクラス名を上書きしてくれる。
ついでにVariantsという機能もあり、便利。

export function Button({ className, disabled, children }: {
  className?: string
  disabled: boolean
  children: React.ReactNode
}) {
  const button = tv({
    base: "bg-blue-500 text-blue-50 rounded-sm"
    variants: {
      disabled: { true: "bg-gray-500" }
    }
  })
  return (
    <button className={button({ className, disabled })}>{children}</button>
  )
}

ちゃんと設計すればなくても行けるかもしれないけど、設計なしで作る小規模サービスなら入れて損はないと思う。

https://www.tailwind-variants.org

GitHub Pages は静的サイト ホスティング サービスです。これを使って、GitHub のリポジトリから HTML、CSS、JavaScript ファイルを直接取得し、任意でビルド プロセスを通じてファイルを実行し、Web サイトを公開することができます。

GitHub Pagesは無料でWebサイトを公開できる優れもの。
サーバー代どころかドメイン代も不要で、とてもお財布に優しい。

ただデメリットもある。

• ソースコードをGitHubで公開する必要がある
• 商用利用はNG
• サイトの容量は1GB未満の必要がある

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

コマンド:

bun create vite

このあとに

• React
• TypeScript

を選ぶ

また、不要なファイルも消しておく。
画像ファイルや、App.tsxの内容も書き換えておく。

v3からの変更点

Viteに追加する方法もv3からだいぶ変わってるので、軽く変更点を書いておく。

• CSSは@import "tailwindcss";1行でOK
• @tailwindcss/viteというViteプラグインの追加

なお、前述したTailwind Variantsはv1.xがTailwindCSS v4に対応している。
1.xはresponsiveVariantsなどが削除されているので注意。

https://www.tailwind-variants.org/docs/tailwind-v4

次は公開なので、この時点で多少の開発を済ませておこう。

bun run build --base=/***について:

--baseオプションにはGitHubのリポジトリ名を指定する。
これはビルド後のアセットのパスに使われる。
しっかり指定しないと、JavaScriptとか画像が読み込まれないこともある。

なお、これはvite.config.tsのbaseオプションでも設定できる。
ただGitHub Actionsに書いておくとこの環境でのみ適用されるので、ローカルでビルドをテストしたいときとかに楽だと思う。

ワークフローでやっていること

このワークフローはmainブランチにpushされると実行される。
また、buildとdeployというジョブに分けられている。

ビルド

1. GitHub Pagesをセットアップする（actions/configure-pages@v5）
2. Bunをセットアップする（oven-sh/setup-bun@v1）
   • 開発環境とランタイムを揃えることで、ビルド環境でのみのエラーが減るはず
   • Bunはパッケージマネージャーとしても使う
3. 依存関係をインストールする（bun install）
4. ビルドする=ビルド結果を./distに出力する（bun run build --base=/<repo-name>）
5. ./dist=ビルド結果をアーティファクトとしてアップロードする

前述の通り、リポジトリ名はワークフローの--baseに合わせること。
また、公開されたサイトURLはhttps://<username>.github.io/<repo-name>となる。

また、リポジトリはpublicで作る必要がある。
ただしProプランの場合はこの限りではない。（詳細）

（ワークフローのファイルを追加する前にGitHub Pagesの設定済ませたほうが良いか...?）

これでたぶんデプロイが始まる？
始まってたら1分くらい待って、サイトを訪問して表示チェック。

始まらなかったらワークフローを再実行する。
Actionsタブからできるはず。