Next js Blog Boilerplate

Next JS Blog Boilerplate مع CSS Tailwind

Next.js Blog Boilerplate هو رمز بداية لمدونتك استنادًا إلى إطار Next.js 12+ مع Tailwind CSS 3.0. ⚡ مصنوعة من Next.js ، typeScript ، Eslint ، أجمل ، postcss ، css tailwind.

استنساخ هذا المشروع واستخدمه لإنشاء مدونة Next.js الخاصة بك. يمكنك التحقق من توضيح قوالب مدونة JS التالية.

الرعاة

أضف شعارك هنا

سمات

ميزة المدونة:

• ؟ بناء جملة تسليط الضوء على prism.js
• ؟ بيانات SEO وفتح علامات الرسم البياني
• JSON-LD للفهرسة الأكثر ثراء
• ترقيم الصفحات
• ؟ قم بتضمين موضوع مدونة مجاني الحد الأدنى
• تخفيض السعر
• ؟ تعظيم درجة منارة

تجربة المطور أولاً:

• next.js لمولد الموقع الثابت
• ؟ تتكامل مع CSS Tailwind
• ؟ PostCSS لمعالجة CSS Tailwind
• ؟ اكتب فحص TypeScript
• ✏ Linter مع eslint
• ؟ رمز التنسيق مع أجمل
• ؟ SEO Metadata و JSON-LD وعلامات الرسم البياني المفتوح مع كبار المسئولين الاقتصاديين التالي
• محلل الحزمة

ميزة مدمجة من Next.js:

• ☕ Minify HTML و CSS
• ؟ حية إعادة التحميل
• ✅ تخزين ذاكرة التخزين المؤقت

فلسفة

• الحد الأدنى من الرمز
• صديق سيو
• جاهز للإنتاج

متطلبات

• Node.js و NPM

الرعاة

ابدء

قم بتشغيل الأمر التالي في بيئتك المحلية:

 git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name
cd my-project-name
npm install

بعد ذلك ، يمكنك التشغيل محليًا في وضع التطوير باستخدام إعادة تحميل مباشر:

 npm run dev

افتح http: // localhost: 3000 مع متصفحك المفضل لرؤية مشروعك.

 .
├── _posts            # Your blog posts
├── public            # Static files
│   ├── assets
│   │   └── images
│   │       └── posts # Images used in your blog posts
└── src
    ├── pages         # Next.js pages
    ├── styles        # Your blog CSS files
    └── templates     # Blog templates

التخصيص

يمكنك بسهولة تكوين JS Next Boilerplate. الرجاء تغيير الملف التالي:

• public/apple-touch-icon.png ، public/favicon.ico ، public/favicon-16x16.png and public/favicon-32x32.png : favicon مدونتك ، يمكنك توليدها من https://favicon.io/favicon-converter/
• public/assets/images/logo.png public/assets/images/logo-32x32.png .
• src/styles/main.css : ملف CSS الخاص بك باستخدام CSS Tailwind
• src/utils/Config.ts : ملف التكوين مثل اسم المدونة ، url ، إلخ.
• src/templates/Main.tsx : موضوع المدونة

نشر على الإنتاج

يمكنك رؤية النتائج محليا في وضع الإنتاج مع:

 $ npm run build
$ npm run start

يتم قضاء ملفات HTML و CSS التي تم إنشاؤها (ميزة مدمجة من JS التالي). كما سيتم إزالة CSS غير المستخدمة من CSS Tailwind.

يمكنك إنشاء بناء إنتاج محسّن مع:

 npm run build-prod

الآن ، مدونتك جاهزة للنشر. توجد جميع الملفات التي تم إنشاؤها في مجلد dist ، والتي يمكنك نشرها مع أي خدمة استضافة.

نشر إلى NetLify

استنساخ هذا المستودع على حساب github الخاص ونشره على NetLify:

مساهمات

الجميع مرحب بهم للمساهمة في هذا المشروع. لا تتردد في فتح مشكلة إذا كان لديك سؤال أو العثور على خطأ.

رخصة

مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، حقوق الطبع والنشر © 2022

انظر الترخيص لمزيد من المعلومات.

الرعاة

أضف شعارك هنا

---

مصنوع من ♥ بواسطة CreativeSignsguru