Static Site With Tailwind

ไซต์แบบคงที่ (พร้อม Tailwind)

สแต็ค

• HTML
• Tailwindcss

วิ่งยังไง.

การพัฒนา

• เรียกใช้ yarn serve:dev ซึ่งจะ ให้บริการ src โดยมี index.html เป็นจุดเริ่มต้นของคุณ

• ในเทอร์มินอลที่สองให้รัน yarn watch การดำเนินการนี้จะดูไฟล์ทั้งหมดภายใน src/ และรู้ว่าต้องคอมไพ app.css ใหม่ด้วยสไตล์ tailwind ใหม่ที่เพิ่มเข้ามาระหว่างทาง

หมายเหตุ: อาจเกิดความล่าช้าเล็กน้อยก่อนที่คุณจะกดรีเฟรช... "เฮ้ นี่ไม่ใช่แอป React ที่หรูหรา KISS และเพียงแค่กดปุ่มรีเฟรช"

• หากต้องการคอมไพล์ Tailwind CSS ด้วยตนเองสำหรับ dev โดยไม่ต้องดูการรัน yarn compile:css:dev

อาคารเพื่อการผลิต

ดังนั้นคุณต้องการปรับใช้สิ่งนี้จริง ๆ ...

• รัน yarn build:all to do "ทุกสิ่ง" ซึ่งจะคัดลอกไฟล์ *.html ทั้งหมดไปยังไดเร็กทอรี /build และคอมไพล์ app.css ด้วย NODE_ENV=production ซึ่งจะเป็นการบอกให้ Tailwind ใช้ตัวเลือก purge ที่กำหนดไว้ล่วงหน้าจาก tailwind.config.js

• คัดลอกไดเร็กทอรี /build นี้ไปยังไซต์โฮสติ้งแบบคงที่ใดๆ... หรือบอกให้ไซต์โฮสติ้งแบบคงที่ของคุณใช้ /build/index.html เป็นจุดเริ่มต้น

หมายเหตุ: หลังจากสร้างเสร็จแล้ว คุณอาจให้บริการงานสร้างนี้ในพื้นที่ได้เช่นกันเพื่อดูว่า "prod" จะมีลักษณะอย่างไรหากใช้ yarn serve:prod สิ่งนี้จะให้บริการไดเร็กทอรี build แทน src สำหรับการดูด้วยโค้ดที่คอมไพล์ใหม่

การกำหนดเส้นทาง

ฉันจะสร้าง URL ที่สะอาดไปยังหน้าใหม่ได้อย่างไร เพิ่มไฟล์ vercel.json ที่กำหนด routes แล้วปล่อยให้ Vercel จัดการส่วนที่เหลือ

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

สำหรับรายละเอียดเพิ่มเติม โปรดดูเอกสารของพวกเขาที่นี่

แค่นั้นแหละ

นั่นคือทั้งหมด... ใส่ HTML แบบคงที่ ลิงก์ index.css และสนุกไปกับมัน

โฮสติ้งกับ Vercel

การเชื่อมโยง Repo และการตั้งค่า

การแสดงตัวอย่างการปรับใช้

เสร็จแล้ว!