Static Site With Tailwind

Situs Statis (dengan Tailwind)

Tumpukan

• HTML
• Tailwindcss

Bagaimana cara menjalankannya

PERANG

• Jalankan yarn serve:dev Ini akan melayani src dengan index.html sebagai titik masuk Anda.

• Di terminal kedua, jalankan yarn watch . Ini akan mengawasi semua file di dalam src/ dan mengetahui cara mengkompilasi ulang app.css dengan gaya tailwind baru yang telah ditambahkan selama proses.

Catatan: ada sedikit penundaan di sini sebelum Anda menekan tombol segarkan... "Hei, ini bukan aplikasi React yang mewah, KISS dan cukup tekan tombol segarkan."

• Untuk mengkompilasi Tailwind CSS secara manual untuk dev tanpa menonton run yarn compile:css:dev

Bangunan untuk Produksi

Jadi, Anda benar-benar ingin menerapkan hal ini...

• Jalankan yarn build:all untuk melakukan "semua hal" Ini akan menyalin semua file *.html ke direktori /build dan mengkompilasi app.css dengan NODE_ENV=production . Ini memberitahu Tailwind untuk menggunakan opsi purge preset kami dari tailwind.config.js

• Salin direktori /build ini ke situs hosting statis mana pun... Atau beri tahu situs hosting statis Anda untuk menggunakan /build/index.html sebagai titik masuknya.

Catatan: Setelah membangun, Anda juga dapat menyajikan bangunan ini secara lokal untuk melihat seperti apa tampilan "prod" dengan menjalankan yarn serve:prod . Ini akan menyajikan direktori build alih-alih src untuk dilihat dengan kode yang baru dikompilasi.

Rute

Bagaimana cara membuat beberapa url bersih ke halaman baru? Tambahkan file vercel.json dengan routes yang ditentukan dan biarkan Vercel mengurus sisanya.

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

Untuk lebih jelasnya lihat dokumen mereka di sini

Itu saja

Itu saja teman-teman... Masukkan beberapa HTML statis, tautkan index.css , dan bersenang-senanglah.

Hosting dengan Vercel

Menghubungkan Repo dan Pengaturan

Pratinjau Penerapan

Selesai!