Static Site With Tailwind

静的サイト (追い風あり)

スタック

• HTML
• 追い風

走り方

開発者

• yarn serve:dev実行します。これにより、 index.htmlを含むsrcエントリ ポイントとして提供されます。

• 2 番目のターミナルで、 yarn watch実行します。これにより、 src/内のすべてのファイルが監視され、途中で追加された新しい tailwind スタイルを使用してapp.css再コンパイルすることがわかります。

注:ここでは、更新を押すまでに少し時間がかかります... 「おい、これは派手な React アプリの KISS ではないので、更新ボタンを押すだけだ。」

• 実行を見ずにdev用に Tailwind CSS を手動でコンパイルするにはyarn compile:css:dev

生産のための構築

つまり、実際にこれをデプロイしたいのです...

• 「すべてのこと」を実行するにはyarn build:allを実行します。これにより、すべての*.htmlファイルが/buildディレクトリにコピーされ、 NODE_ENV=productionを使用してapp.cssがコンパイルされます。これにより、Tailwind に tailwind.config.js のプリセットpurgeオプションを使用するように指示されます。

• この/buildディレクトリを静的ホスティング サイトにコピーします。または、エントリ ポイントとして/build/index.html使用するように静的ホスティング サイトに指示します。

注:ビルド後、このビルドをローカルで提供して、 yarn serve:prod実行して「prod」がどのようになるかを確認することもできます。これにより、新しくコンパイルされたコードを表示するために、 srcの代わりにbuildディレクトリが提供されます。

ルーティング

新しいページへのクリーンな URL を作成するにはどうすればよいですか? routesが定義された vercel.json ファイルを追加し、残りの処理は Vercel に任せます。

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

詳細については、こちらのドキュメントを参照してください

それでおしまい

以上です...静的 HTML を追加し、 index.cssリンクして、楽しんでください。

Vercel によるホスティング

リポジトリと設定のリンク

デプロイのプレビュー

終わり！