Static Site With Tailwind

Statische Site (mit Rückenwind)

Der Stapel

• HTML
• Rückenwindcss

Wie man läuft

ENTW

• Führen Sie yarn serve:dev aus. Dadurch wird src mit index.html als Einstiegspunkt bereitgestellt .

• In einem zweiten Endlauf yarn watch . Dadurch werden alle Dateien in src/ überwacht und app.css mit allen neuen Tailwind-Stilen neu kompiliert, die im Laufe der Zeit hinzugefügt wurden.

Hinweis: Hier gibt es eine kleine Verzögerung, bevor Sie auf „Aktualisieren“ klicken … „Hey, das ist keine schicke React-App. KISS und klicken Sie einfach auf die Schaltfläche „Aktualisieren.“

• Um Tailwind CSS manuell für dev zu kompilieren, ohne zuzusehen, führen Sie yarn compile:css:dev

Gebäude für die Produktion

Sie möchten dieses Ding also tatsächlich bereitstellen ...

• Führen Sie yarn build:all “ aus, um „alle Dinge“ zu erledigen. Dadurch werden alle *.html Dateien in ein /build -Verzeichnis kopiert und app.css mit NODE_ENV=production kompiliert. Dadurch wird Tailwind angewiesen, unsere voreingestellte purge aus tailwind.config.js zu verwenden

• Kopieren Sie dieses /build Verzeichnis auf eine beliebige statische Hosting-Site ... Oder weisen Sie Ihre statische Hosting-Site an, /build/index.html als Einstiegspunkt zu verwenden.

Hinweis: Nach dem Erstellen können Sie diesen Build auch lokal bereitstellen, um zu sehen, wie „prod“ aussehen wird, indem Sie yarn serve:prod ausführen. Dadurch wird das build -Verzeichnis anstelle von src zur Anzeige mit dem neu kompilierten Code bereitgestellt.

Routenführung

Wie erstelle ich saubere URLs für neue Seiten? Fügen Sie eine vercel.json-Datei mit definierten routes hinzu und überlassen Sie Vercel den Rest.

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

Weitere Informationen finden Sie in den Dokumenten hier

Das ist es

Das ist es, Leute ... Fügen Sie etwas statisches HTML ein, verlinken Sie index.css und haben Sie Spaß.

Hosting mit Vercel

Verknüpfen von Repo und Einstellungen

Vorschau der Bereitstellung

Erledigt!