hugo boilerplate

Hugo Boilerplate

Hugo Boilerplate لبناء مواقع الويب الحديثة؟

هذا الغلاية يلف Hugo مع Gulp كخط أنابيب تنمية محلي.

يتم استخدام postcss و webpack + babel في CSS و JS تجميع ونقل.

يتم استخدام Browsersync لتوفير تجربة تطوير محلية حديثة ، مما يتيح لك معاينة موقعك على أجهزة متعددة متزامنة.

يتم استخدام BrowsersList لتكوين دعم المتصفح.

يستخدم SVG Sprite لإنشاء Sprite SVG.

تثبيت

المتطلبات الأساسية

لاستخدام Gulp ، يجب أن يكون لديك عقدة و NPM مثبتة.

يثبت

بمجرد تثبيت المتطلبات المسبقة ، استنساخ المستودع إلى الجهاز المحلي الخاص بك ، ثم تشغيل:

 npm install

سيؤدي ذلك إلى تثبيت Hugo وكذلك جميع التبعيات العقدية اللازمة لتشغيل بيئة Hugo الخاصة بك. هذا قد يستغرق بعض الوقت!

تطوير

يتم تنفيذ جميع مهام التطوير باستخدام NPM Run. انظر "scripts" في package.json للحصول على قائمة كاملة بالأوامر.

التنمية المحلية

يتم تشغيل التنمية المحلية بواسطة Browsersync ، ستتمكن من تطوير مواقع بسرعة من خلال:

• خادم تطوير محلي في http://localhost:3000/ .
• تحديثات CSS التلقائي دون إعادة تحميل الصفحة
• إعادة تحميل الصفحة التلقائية عند تغيير المحتوى

تشغيل خادم التطوير المحلي بسيط مثل التشغيل:

 npm start

سيعرض ذلك جميع المحتوى المسودات أو المؤرخة في المستقبل أو منتهية الصلاحية ، والذي لم يتم تضمينه في بناء الإنتاج الخاص بك.

إذا كنت ترغب في التطوير مع الموقع كما سيظهر في الإنتاج ، فتشغيل:

 npm run preview

بناء الإنتاج

لإنشاء بناء إنتاج نهائي على جهازك المحلي يمكنك تشغيله:

 npm run build

سينتهي بناء الإنتاج الجديد لموقعك في dist/ الدليل.

أوامر هوغو

يمكن تشغيل جميع أوامر Hugo's CLI عبر NPM عن طريق التشغيل:

 npm run hugo -- <command> --<param>

على سبيل المثال:

 npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md

هيكل المشروع

 .
├── .tmp/                  // Temporary directory for development server
├── dist/                  // The production build
├── hugo/                  // The Hugo project; content, data and static files
|   ├── .forestry/         // Contains Forestry.io configuration files
|   ├── content/           // Where all site content is stored 
|   ├── data/              // TOML, YAML or JSON files containing site data 
|   ├── layouts/           // Your site's layouts
|   |   ├── partials/      // Your site's partials
|   |   └── shortcodes/    // Your site's shortcodes
|   ├── static/            // Where all static files live
|   |   ├── css/           // Where compiled CSS files live
|   |   ├── js/            // Where compiled JS files live
|   |   └── uploads/       // Where user uploads are stored
|   └── config.toml        // The Hugo configuration file
└─── src/
     ├── css               // CSS/SCSS source files to be compiled to /css/
     └── js                // JS source files to be compiled to /js/

مضمنة SVG

سيتم دمج أي SVGs الموجودة في src/img/ في Sprite SVG واحد في hugo/static/svg/sprite.symbol.svg .

يأتي هذا Boilerplate مع جزء بسيط لاستخدام SVGs في تخطيطاتك. يمكنك تحديد SVG عن طريق تمرير معرفه.

 {{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}

ملاحظة: class width height معلمات اختيارية

الاختبار

يأتي هذا Boilerplate مع تكوينات ESLINT و Stylelint القياسية التي سترتب على CSS و JS للأخطاء أو مشكلات النمط الشائعة ، والتي تعمل مع أكثر المعرفات شعبية.

يمكن أيضًا إجراء الاختبارات من سطر الأوامر:

• JS: npm run eslint
• CSS: npm run stylelint

إذا كنت تريد إصلاح أخطاء الوبر تلقائيًا ، فيمكنك القيام بذلك من سطر الأوامر أيضًا:

• JS: npm run eslint:fix
• CSS: npm run stylelint:fix

تنظيف

هذه الغلاية هي التنظيف الذاتي ، وسوف تزيل الإنتاج dist/ Development .tmp/ المجلدات في كل مرة يتم فيها تشغيل أمر للتأكد من أن محتوياتها محدثة دائمًا.

إذا كنت ترغب في التنظيف يدويًا ، فقم بتشغيل:

 npm run clean

إعدادات

يتم التعامل مع جميع مهام البناء بواسطة Gulp وتقع في gulpfile.babel.js . جميع أجزاء الإنشاء قابلة للتكوين في ملفات منفصلة لجعل الإدارة سهلة.

مسارات

يمكن تكوين جميع مسارات المصدر والوجهة من gulp.config.js .

هوغو

يمكن تكوين أوامر الإنشاء لـ Hugp من gulp.config.js . يتم تعيين أوامر الإنشاء بناءً على متغير بيئة NODE_ENV . يمكنك اختياريًا تحميل ARGs مختلفة باستخدام متغير بيئة GENERATOR_ARGS .

أربعة خيارات متوفرة:

• default : أوامر الإنشاء الافتراضية التي يتم تشغيلها دائمًا
• development : أوامر بناء إضافية لخادم التطوير
• preview : أوامر بناء إضافية لخادم تطوير الإنتاج
• production : أوامر بناء إضافية لبناء الإنتاج

خادم تطوير Browsersync

تم العثور على التكوين لـ Browsersync في .browsersyncrc.js

CSS/Sass

تم العثور على تكوين postCSS في .postcssrc.js

جافا سكريبت

تم العثور على التكوين لـ WebPack في .webpackrc.js

دعم المتصفح

يستخدم كل من PostCSS و WebPack. .browserslistrc لاتخاذ قرار بشأن دعم المتصفح عند التجميع.

نصائح وموارد

• للتعرف على كيفية التطور مع Hugo ، انظر وثائق Hugo
• لمعرفة كيفية استخدام نظام Templating Hugo ، راجع الوثائق
• يجب تخزين الملفات الثابتة في hugo/static/ Folder كما يجب أن تظهر في الموقع المبني على سبيل المثال ، يجب تخزين ملف CNAME في hugo/static/CNAME ليصبح /CNAME
• يتم تجميع ملفات JavaScript من جذر src/js/ إلى js/{filename}.js
  • يمكن كتابة JavaScript باستخدام ES6 ، ودعم require() import عبارات من حزم NPM وملفات JS المحلية
• يتم تجميع ملفات CSS من جذر src/css/ إلى css/{filename}.css
  • يتم حل بيانات الاستيراد وإدراجها في ملفات CSS المترجمة
• لتوافق مع الغابات أو غيرها من CMSS ، تأكد من أن ملفات CSS و JS المترجمة في مجلد hugo/ Folder تلتزم دائمًا
• يتم توفير متغيرات البيئة إلى القوالب الخاصة بك ، والتي يمكن الوصول إليها في القوالب على النحو التالي: {{ getenv "HUGO_ENV" }}
  • بالنسبة لخطوط أنابيب التنمية ، فإن هذا يساوي development
  • لأنابيب الإنتاج ، هذا يساوي production
  • للحصول على ميزة المعاينة في الغابات ، فإن هذا يساوي staging

باستخدام الغابات

يأتي هذا المستودع مع مثال أساسي للمحتوى الذي تم تكوينه مسبقًا للعمل مع Forestry ، والذي يمكنك استخدامه لبدء بناء موقعك.

• مفترق هذا المستودع إلى حسابك
• اشترك في حساب الغابات ، واستيراد هذا المستودع باعتباره "موقعًا موجودًا"
• عندما تتم مطالبته بـ "جذر المشروع" ، أدخل hugo

المساهمة

جميع المساهمات موضع ترحيب! يرجى الاطلاع على إرشادات قواعد السلوك والدعم.

الترخيص

يتم إصدار مشروع Boilerplate هذا تحت رخصة معهد ماساتشوستس للتكنولوجيا.