تشتهر المواقع الثابتة بالعديد من الأسباب - تجنب الحلول المبالغة والحفاظ على مشروع بسيط بدون قواعد بيانات أو تبعيات أو تكوينات جانبية من جانب الخادم (لا يوجد PHP أو MySQL / MSSQL أو .NET أو Python أو Ruby وما إلى ذلك) مما يجعل من السهل جدًا نشر وقوة ضد العديد من نقاط الضعف المحتملة ؛ كما هو في نهاية المطاف مجرد صفحات HTML التي يتم عرضها على المستخدم.
في هذا الدليل ، سأوضح لك كيفية إعداد بيئة التطوير الخاصة بك مع Hugo وبناء أولموقع إلكتروني ثابت لهوجو .
نهج جديد تماما لمواقع ثابتة
إن التصميم الأسطوري المختصر KISS - Keep It Simple، Stupid يمكن تطبيقه جيدًا هنا على Hugo وكيفية اقترابه من مساحة مولد الموقع الثابتة.
بنيت في جو ، هوغو بسرعة كبيرة لتجميع صفحات ثابتة (يستغرق أجزاء من ميلي ثانية لتجميع موقع صغير - ويمكن أن تفعل الآلاف من الصفحات في ثوان)
كما يوفر Hugo الأدوات الأساسية لسير عمل الموقع الثابت (بما في ذلك أدوات النشر والهجرة) ، مما يسمح للمطورين والمصممين بالتركيز على الأجزاء الممتعة - بناء مواقع الويب والإبداع. دون الحاجة إلى الوقوع في أي من هذه المسائل الاعتبارات / الاعتمادية / طوبولوجيا العمارة.
لماذا مواقع ثابتة؟
في نهاية المطاف ، عندما نبني مواقع ويب قائمة على المحتوى ، يمكننا افتراض بعض العموميات في جميع المواقع ، ويمنح هيوغو إطارًا لذلك. حيث يمكن أن نتخذها أنواع المحتوى سواء كان وظيفة، فئات، استعراض أو المنتجات وتنظيم البيانات، ومنحهم نظرة محددة عن طريق قالب وتطبيق الأنماط - نحن نسير قدما ويمكن بعد ذلك حقا قيادتها في أي مكان نحتاج في HTML / CSS / JS ثابت مساحة موقع الويب - وعندما تفكر في الأمر بطريقة عملية - فهذه مساحة كبيرة جدًا تتيح مساحة كبيرة للإبداع.
سيتم تشغيل jQuery بشكل جيد ولا يوجد أي شيء يمنعك من استخدام خدمات الجهة الخارجية (أو الخاصة بك) على صفحة ثابتة إذا كنت بحاجة إليها. لذلك لا تحد نفسك من خلال التفكير في أنه لا يمكنك دمج تطبيقات / اتفاقيات إعادة الشراء الأخرى في مواقعك الثابتة. انها في الحقيقة ليست القضية ويمكنك استخدام أي من JS هناك!
لذلك ، بالنسبة إلى بضع صفحات من موقع الويب لنشرة الشركة ، مع رابط إلى نماذج google للاتصال بنا (لا يستطيع hugo معالجة النموذج بعد) أو رابط البريد الإلكتروني ، سيكون الأمر مثاليًا ، وإذا كنت بحاجة إلى بعض البيانات التي تظهر أيضًا من خلاصة يمكنك استخدام javascript للتعامل مع هذا الجزء.
كيف يمكن أن تعمل لأعمالي / العملاء؟
لنأخذ على سبيل المثال متجرًا / بوتيكًا صغيرًا أو مستقلاً ، مع بعض المنتجات أو الخدمات التي لا تتطلب حلًا للتجارة الإلكترونية بالكامل حتى الآن - فقط بعض معلومات المنتج والاتصال بنا. يمكن أن يقوم هوغو بذلك في الصباح. وستكون إيجاد الاستضافة بجوار أي شيء - إنها مجرد html ثابتة بعد كل شيء.
لذا ، فبالنسبة لأصحاب الأعمال الوحيدين الذين يمكن أن يعملوا في الفضاء التقني أو خارجه والذين يحتاجون فقط إلى مواقع بسيطة من نوع بطاقات الأعمال - على ميزانيات منخفضة أو لا شيء ، أو حتى على نطاق أكبر قليلاً ، يمكن أن تعمل بشكل جيد لوثائق المشروع المتعلقة بمشروعات غنو على سبيل المثال أو حتى على امتداد الشركات الناشئة أو الشركات الصغيرة والمتوسطة التي تحتاج فقط إلى وجود الآن في الوقت الحالي - حيث يمكن استخدام Hugo بشكل كامل لإنشاء موقع ويب عالي الجودة.
ما هي حدود المواقع الثابتة؟
ما لا يستطيع هوغو فعله هو المحتوى الديناميكي ، مثل نماذج قواعد البيانات ، أو أنظمة البحث أو المستخدم ... وإذا كان هذا هو ما تبحث عنه ، فإن هوغو بالتأكيد ليس ما تريده. ولكن في الأوقات الأخرى ، عندما تجد نفسك تقول - لا يمكننا فقط وضع صفحة أساسية لهذا؟ مولدات موقع ثابت هي أفضل مكان للذهاب في رأيي اعلم أيضًا أن Hugo ليس هو مولد الموقع الثابت الوحيد. هناك العديد من هناك وكان هناك منذ فترة طويلة ، وهنا قائمة أعلى منهم هنا
من أجل بناء مدونات محتوى مباشر مثل المواقع الإخبارية التي تغطي الأحداث التي يتم تطويرها حاليًا ، يمكن أن يكون Hugo حلاً رائعًا لإدخال صفحة بسرعة حتى يتم ربط هذه التغطية من موقعك الرئيسي ، والحصول على الإنترنت في دقائق ، مما يعني أنه يمكنك الاستمرار في إضافة إلى ذلك بسرعة وإعادة توزيع التغييرات بسرعة كبيرة. ولكن لجعل موقع إخباري كامل مع البحث والعديد من الكتاب ، سيكون من غير المناسب حقًا استخدام Hugo.
حيث يفتقر هوغو أيضًا إلى استخدام أدوات أكثر تقدمًا لخط أنابيب الأصول مثل EcmaScript6 و SASS - إذا كنت تريد أن تحتاج إلى تضمين Gulp أو Grunt لإنجاز المهمة ، وإلا فما عليك سوى استخدام CSS و JS أعمل مع.
يمكنك أيضًا الاتصال بنا باستخدام النماذج والبحث فقط ولكن باستخدام طرق خارجية (مثل Google) لتحقيق ذلك. بدلا من ذلك لا شيء يمنعك من تضمين الحل الخاص بك من الخدمة الخاصة بك في تلك المرحلة.
بيئة تطوير منزلك
بيئة تطوير منزلكتمت كتابة Hugo في Go ولديه دعم للعديد من الأنظمة الأساسية ، لعرض جميع الإصدارات التي يمكنك الانتقال إليها هنا
بالنسبة لمستخدمي MacOS مع HomeBrew ، يمكن إجراء التثبيت على النحو التالي:
تحديث الشراب && brew تثبيت hugo
مزيد من المعلومات حول التثبيت لـ Mac OSX و Windows
بمجرد تثبيت Hugo يمكننا اختبار التثبيت عن طريق تشغيل تعليمات hugo في موجه الأوامر أو إصدار hugo
جعل موقعك الاول ثابت مع هوغو
الآن لدينا تثبيت hugo يمكننا البدء في إنشاء الموقع. شغّل الأمر التالي لاستبدال "your-sitename-here" باسم مشروعك
1
$ hugo new site your-sitename-here
سيؤدي ذلك إلى إنشاء سقالة لموقعك يمكنك مشاهدته في باحثك
أو في الطرفية الخاصة بك عن طريق أمر الشجرة
قام Hugo بإنشاء 5 أدلة فرعية وملف واحد ، والذي يستخدمه لإنشاء موقع الويب النهائي من هنا ما تعنيه جميعها:
النماذج الأولية: هنا نحدد محتوى المحتوى ، يمكننا تعيين علامات أو فئات افتراضية وتعريف أنواع مثل منشور أو برنامج تعليمي أو منتج هنا
config.toml: التكوين الرئيسي هنا ، يمكننا تحديد كل من عناوين المواقع ، واللغات ، وغيرها url هنا
المحتوى: يتم تخزين صفحات محتوى الموقع هنا ، ويتم استخدام الأدلة الفرعية للأقسامللمساعدة في تنظيم المحتوى ، وإنشاء محتوى / منتجات لمحتوى منتجاتك على سبيل المثال
البيانات: بيانات الموقع مثل تهيئات التوطين هنا
تخطيطات : تخطيطات لمكتبة ht ht / template التي يستخدمها Hugo للانتقال إلى هنا
static: سيتم تجميع أي ملفات ثابتة هنا في موقع الويب النهائي ، ويُسمح بحرية كاملة حتى تتمكن من عرض أي ملف css أو js أو ملف صورة على سبيل المثال.
المواضيع: إنشاء مواضيع جديدة أو استنساخ الموضوعات من جيثب في هذا الدليل لاستخدامها مع موقعك.
"مرحبا العالم" في هوغو
نحتاج إلى إضافة منشور لرؤية الموقع الذي أنشأناه للتو ، وذلك باستخدام الأمر التالي:
1
$ hugo new post/first-post.md
الآن قم بتحرير الملف في المحتوى / النشر / الأول - العنوان ..m ، وسيحتوي على شيء مشابه لما يلي بشكل افتراضي:
1
+++
2
date = "2016-09-26T13:19:03+07:00"
3
title = "first post"
4
5
+++
المادة الأمامية
المحتوى داخل +++ هو تكوين TOML للنشر. هذا التكوين يسمى المادة الأمامية . يمكّنك من تحديد تكوين النشر مع محتواه. بشكل افتراضي ، سيكون لكل وظيفة خصائص التكوين الموضحة أعلاه.
أضف بعض النص بعد +++ مثل:
1
+++
2
date = "2016-09-26T13:19:03+07:00"
3
title = "first post"
4
5
+++
6
7
Hello world!
خدمة البيانات وتحديث مباشر
حتى نتمكن من رؤية وظيفة إعادة التحميل المباشر التي يحملها مع Hugo ، دعنا نجري بعض التغييرات على الموقع ونرى ما سيحدث.
أولا قم بتشغيل الخادم عن طريق تشغيل
1
$ hugo server
الآن ، إذا أجريت بعض التغييرات على ملفك ، فستشاهد Hugo على الفور.
سيكون موقع الويب الخاص بك متاحًا على http: // localhost: 1313 ولكن مع الاستمرار - ستظل ترى صفحة بيضاء فارغة فقط في هذه المرحلة ، لأننا لم نحدد موضوعًا!
إضافة موضوع
لدى Hugo مكتبة موضوعية قوية ومتعددة الاستخدامات حيث تستخدم مكتبة html / template الخاصة بـ Go . من السهل التعامل مع السمات ، ويتم التثبيت ببساطة عن طريق نسخ مستودع موضوع فيدليل السمات لموقع Hugo الخاص بك.
لا يأتي Hugo بموضوع افتراضي ، لذا يجب عليك تعيين واحد.
سترى الآن مجموعة كبيرة من المواضيع التي يتم استنساخها في موقعك. هناك الكثير لذا سيكون لديك وقت للاستراحة بينما تستنسخ ...
باستخدام الموضوع
لاستخدام موضوع ، ابدأ تشغيل Hugo فقط باستخدام المعلمة -t أو --theme مثل ذلك
1
$ hugo -t ThemeName
أو يمكنك إضافته إلى config.toml الخاص بك :
1
theme: "ThemeName"
و THEMENAME يجب أن يطابق اسم الدليل داخل / المواضيع .
عندما تختار اسم سمة من الدليل ، ابدأ تشغيل الخادم باستخدام خادم hugo --theme = ThemeName وألقِ نظرة على http: // localhost: 1313
إليك بعض الأمثلة من بعض تلك الموضوعات التي استنسخناها ، واستخدمت التسول ،وهشاشة الصبار ، ولدينا نظرة حولك ، وهناك الكثير للاختيار من بينها!
إذاً أنت الآن قد أنشأت موقعًا إلكترونيًا بمشاركة عالمية ، فماذا يمكننا أن نفعل؟
إذاً أنت الآن قد أنشأت موقعًا إلكترونيًا بمشاركة عالمية ، فماذا يمكننا أن نفعل؟
يعد إنشاء مدونة أساسية أمرًا سهلاً للغاية ومجديًا حتى في يوم واحد مع Hugo. أولاً ، ستحتاج إلى تحديد نموذج أولي للنشر الافتراضي ، لذلك أنشئ ملفًا جديدًا فيالنماذج الافتراضية / default.md وأضف ما يلي كمسألة أمامية
1
+++
2
tags = ["welding", "metal work"]
3
categories = ["posts"]
4
+++
هنا نقوم بتعيين بعض العلامات الافتراضية ، لمدونة على اللحام يمكننا التأكد من أننا نريد هذه العلامات على جميع مشاركاتنا ، ونقوم بإنشاء فئة تسمى مشاركات فقط حتى يكون لدينا إعداد افتراضي عند إنشاء منشور.
أضف الآن مشاركتك الأولى عبر المحطة مثل ذلك
1
$ hugo new post/tig-welding-a-bike-frame.md
سيؤدي ذلك إلى إنشاء منشور مع النموذج الأصلي الذي حددته من قبل ، يمكنك الآن فتحه في محرر نصوص والبدء في الكتابة بتنسيق مائل!
دعونا نضيف المزيد من المشاركات ..
1
$ hugo new post/welding-a-roll-cage.md
مرة أخرى لإضافة محتوى ، ما عليك سوى فتح الملف الذي أنشأه Hugo وبدء إضافة المحتوى إلى نهاية الملف بعد المادة الأمامية.
بناء معرض الصور
لإنشاء معرض للصور مع Hugo ، سنستخدم معرض hugo- tool المتوفر علىGitHub .
و هوجو-معرض وأداة إنشاء المشاركات الدليل الجديد يحتوي على ملف تخفيض السعر لكل صورة في الدليل المصدر السماح لعرض الشرائح أمر. سيقوم بقراءة جميع الملفات خارج دليل مسار المصدر وحفظها في الدليل الثابت لموقع hugo.
سيقوم بإنشاء دليل جديد داخل دليل المحتوى يستند إلى العنوان على سبيل المثال المحتوى / اللحام
فمثلا:
1
$ hugo-gallery static/images/welding-photos welding "Photos of my insane welding skills"
زيارة localhost: 1313 / اللحام لعرض المحتوى.
نشر
لدى Hugo عدة أدوات للنشر مثل hugomac وهو تطبيق قائم على نظام OSX يتيح للمستخدم النشر بسهولة إلى استضافة EC2. لا حاجة لسطر الأوامر.
لقد كانت مولدات الموقع الثابتة موجودة منذ فترة ، ويبني Hugo حقًا على مجموعة الأدوات مما يجعله سريعًا وسهلًا في ضرب المواقع ، أو حتى ترحيل موقع حالي من wordpress إلى hugo. هناك الكثير من الأدوات لهوجو ، بما في ذلك المحررين الأمامية تحقق لهم هنا https://gohugo.io/tools/
من الأفضل للمضي قدمًا في رؤية المزيد من الوحدات النمطية لـ Hugo التي تقدم الدعم لأشياء مثل نموذج الاتصال ودعم المعرض ، أو المشاركات ذات الصلة على سبيل المثال.
يحتوي خارطة طريق Hugo على الكثير من الأفكار مثل تغيير حجم الصورة الديناميكية ودعم rsync واستيراد الصور من مقدمي الاستضافة واستضافة أسهل مع AWS EC2 ودمج github .. لذلك إذا كنت لا تستخدم Hugo بعد التأكد من التحقق مرة أخرى مشروع كما يتطور!
