Static Site With Tailwind

الموقع الثابت (مع الريح الخلفية)

المكدس

• HTML
• Tailwindcss

كيفية الجري

ديف

• تشغيل yarn serve:dev سيخدم هذا الأمر src مع index.html كنقطة دخول.

• في المحطة الثانية تشغيل yarn watch . سيؤدي هذا إلى مشاهدة جميع الملفات الموجودة داخل src/ ومعرفة كيفية إعادة ترجمة app.css باستخدام أي أنماط خلفية جديدة تمت إضافتها على طول الطريق.

ملاحظة: هناك بعض التأخير هنا قبل أن تضغط على تحديث... "مرحبًا، هذا ليس تطبيق React app KISS الرائع، وما عليك سوى الضغط على زر التحديث."

• لتجميع Tailwind CSS يدويًا dev دون مشاهدة تشغيل yarn compile:css:dev

بناء للإنتاج

إذن أنت تريد بالفعل نشر هذا الشيء ...

• قم بتشغيل yarn build:all للقيام "بكل الأشياء" سيؤدي هذا إلى نسخ جميع ملفات *.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

ربط الريبو والإعدادات

معاينة النشر

منتهي!