Static Site With Tailwind

Site statique (avec vent arrière)

La pile

• HTML
• Tailwindcss

Comment courir

DÉVELOPPEUR

• Exécutez yarn serve:dev Cela servira src avec index.html comme point d'entrée.

• Dans un deuxième terminal, exécutez yarn watch . Cela surveillera tous les fichiers à l'intérieur de src/ et saura recompiler app.css avec tous les nouveaux styles tailwind qui ont été ajoutés en cours de route.

Remarque : il y a un peu de retard ici avant d'appuyer sur Actualiser... "Hé, ce n'est pas une application React sophistiquée KISS et appuyez simplement sur le bouton d'actualisation."

• Pour compiler Tailwind CSS manuellement pour dev sans regarder exécuter yarn compile:css:dev

Bâtiment pour la production

Donc vous voulez réellement déployer cette chose...

• Exécutez yarn build:all pour faire "toutes les choses". Cela copiera tous les fichiers *.html dans un répertoire /build et compilera app.css avec NODE_ENV=production . Cela indique à Tailwind d'utiliser notre option purge prédéfinie à partir de tailwind.config.js

• Copiez ce répertoire /build sur n'importe quel site d'hébergement statique... Ou dites à votre site d'hébergement statique d'utiliser /build/index.html comme point d'entrée.

Remarque : Après la construction, vous pouvez également diffuser cette version localement pour voir à quoi ressemblera "prod" en exécutant yarn serve:prod . Cela servira le répertoire build au lieu de src pour l'affichage avec le code nouvellement compilé.

Routage

Comment créer des URL propres vers de nouvelles pages ? Ajoutez un fichier vercel.json avec routes définis et laissez Vercel s'occuper du reste.

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

Pour plus de détails, consultez leurs documents ici

C'est ça

C'est tout, les amis... Ajoutez du HTML statique, liez index.css et amusez-vous.

Hébergement avec Vercel

Lier le dépôt et les paramètres

Aperçu du déploiement

Fait!