كيفية بناء موقع ثابت سريع الاشتعال باستخدام Hugo

Hugo هو مولد موقع ثابت (SSG) مكتوب بلغة Go (المعروفة أيضًا باسم Golang) ، وهي لغة برمجة مجمعة عالية الأداء تُستخدم غالبًا لتطوير تطبيقات وخدمات الواجهة الخلفية.

اليوم ، يستطيع Hugo إنشاء معظم مواقع الويب في غضون ثوانٍ (أقل من 1 مللي ثانية لكل صفحة). وهذا ما يفسر سبب اعتبار Hugo لنفسها "أسرع إطار عمل لبناء مواقع الويب في العالم".

في هذه المقالة ، سنلقي نظرة على تاريخ Hugo ، وما الذي يجعله سريعًا جدًا ، وكيف يمكنك البدء في بناء موقع Hugo الثابت الخاص بك.

ما هو هوغو؟ ولماذا هي شعبية؟

طور Steve Francia في الأصل مولد موقع Hugo الثابت في عام 2013 ، وتولى Bjrn Erik Pedersen منصب المطور الرئيسي للمشروع في عام 2015. Hugo هو مشروع مفتوح المصدر ، مما يعني أنه يمكن لأي شخص عرض الكود الخاص به وتحسينه.

كمنشئ موقع ثابت ، يأخذ Hugo ملفات محتوى Markdown ، ويديرها من خلال قوالب السمات ، ويبث ملفات HTML التي يمكنك نشرها بسهولة عبر الإنترنت - ويقوم بكل هذا بسرعة كبيرة.

في عام 2021 ، هناك العشرات ، إن لم يكن المئات ، من المولدات الساكنة. كل مولد موقع ثابت له جاذبيته. تحظى Jekyll بشعبية كبيرة بين مطوري Ruby ، ​​وعلى الرغم من أنها ليست بالسرعة التي تتمتع بها الخيارات الأخرى ، إلا أنها كانت من أوائل مولدات المواقع الثابتة التي شهدت اعتمادًا واسع النطاق. Gatsby هو SSG شائع آخر مناسب تمامًا لتطوير مواقع قابلة للنشر بشكل ثابت ديناميكية في الوظائف.

لذا ، مع وجود العديد من مجموعات SSG ، ما الذي يجعل Hugo تبرز؟

هوغو سريع

من حيث الأداء الأولي ، فإن Hugo هو أفضل مولد موقع ثابت في العالم. بالمقارنة مع Jekyll ، أظهر Forestry أن Hugo أسرع 35 مرة. وبالمثل ، يمكن لـ Hugo عرض 10000 صفحة في 10 ثوانٍ ، وهي مهمة تستغرق أكثر من نصف ساعة لإكمال Gatsby. لا يعد Hugo أسرع SSG من حيث أوقات الإنشاء فحسب ، بل إنه سريع التثبيت أيضًا.

يشحن Hugo كملف تنفيذي مستقل ، على عكس Jekyll و Gatsby و SSGs الأخرى التي تتطلب تثبيت التبعيات مع مدير الحزم. هذا يعني أنه يمكنك تنزيل Hugo واستخدامه على الفور دون الحاجة إلى القلق بشأن تبعيات البرامج.

القوالب سهلة في هوغو

في لغة SSG ، يشير مصطلح "القوالب" إلى عملية إضافة عناصر نائبة لإدراج المحتوى الديناميكي داخل صفحة HTML. للوصول إلى عنوان الصفحة ، يمكنك استخدام المتغير {{ .Title }} . وبالتالي ، في نموذج Hugo HTML ، من الشائع رؤية {{ .Title }} مغلفًا في علامات H1 مثل:

 <h1>{{ .Title }}</h1>

في وقت الإنشاء ، سيحصل Hugo تلقائيًا على العنوان داخل ملف محتوى ويدرج العنوان بين علامتي <h1> . يحتوي Hugo على مجموعة متنوعة من متغيرات القوالب المضمنة ، ويمكنك حتى كتابة وظائف مخصصة لمعالجة البيانات في وقت الإنشاء. بالنسبة للقوالب ، يستخدم Hugo مكتبات html/template مضمنة في Go ومكتبات text/template . يساعد هذا في تقليل تضخم التطبيقات لأن Hugo لا يحتاج إلى تثبيت مكتبات تابعة لجهات خارجية للقوالب.

فيما يلي مثال على نموذج للصفحة الرئيسية index.html من سمة Ananke الشهيرة. كما ترى ، يشبه ملف HTML قياسيًا مع بعض التعليمات البرمجية القوالب الإضافية:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

كيفية تثبيت Hugo

يتم شحن Hugo كملف قابل للتنفيذ مترجم ، مما يعني أنك لن تضطر إلى تنزيل وإدارة العديد من التبعيات لمجرد البدء. إنه متاح لأنظمة macOS و Windows و Linux.

كيفية تثبيت Hugo على نظامي macOS و Linux

تتطلب طريقة التثبيت الموصى بها لنظامي التشغيل macOS و Linux برنامج Homebrew ، وهو مدير حزمة لتثبيت التطبيقات وتحديثها. إذا لم يكن لديك برنامج Homebrew مثبتًا بالفعل ، فيمكنك تثبيته عن طريق تشغيل الأمر أدناه في Terminal:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

بعد تثبيت Homebrew ، قم بتشغيل الأمر أدناه لتثبيت Hugo:

 brew install hugo

كيفية تثبيت Hugo على نظام Windows

لمستخدمي Windows ، يمكن تثبيت Hugo باستخدام مديري الحزم Chocolatey أو Scoop. نظرًا لأن إرشادات تثبيت Chocolatey و Scoop أكثر تعقيدًا قليلاً من Homebrew ، فإننا نوصي بالرجوع إلى صفحات التوثيق الرسمية الخاصة بهم هنا وهنا.

بعد تثبيت Chocolatey أو Scoop ، يمكنك تثبيت Hugo باستخدام أحد الأوامر التالية (حسب مدير الحزم الخاص بك):

 choco install hugo-extended -confirm

 scoop install hugo-extended

كيفية التحقق من تثبيت Hugo بشكل صحيح

للتحقق من تثبيت Hugo بشكل صحيح ، قم بتشغيل الأمر التالي:

 hugo version

يجب أن ينتج هذا الأمر الطرفي معلومات تتعلق بالإصدار المثبت حاليًا من Hugo كما يلي:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

أوامر وتكوين هوغو

قبل أن نتعمق في إنشاء موقع ثابت باستخدام Hugo ، دعنا نتعرف على أوامر CLI المختلفة ومعلمات ملف التكوين.

أوامر Hugo CLI

• hugo check - يقوم بإجراء فحوصات تحقق مختلفة
• hugo config - يعرض التكوين لموقع Hugo
• hugo convert - يحول المحتوى إلى تنسيقات مختلفة
• hugo deploy - ينشر موقعك إلى مزود خدمة السحابة
• hugo env - يعرض إصدار Hugo ومعلومات البيئة
• hugo gen - يوفر الوصول إلى مولدات مختلفة
• hugo help - يعرض معلومات حول الأمر
• hugo import - يتيح لك استيراد موقع من موقع آخر
• hugo list - تعرض قائمة بأنواع المحتويات المختلفة
• hugo mod - يوفر الوصول إلى مختلف مساعدي الوحدة
• hugo new - يتيح لك إنشاء محتوى جديد لموقعك
• hugo server - يبدأ خادم تطوير محلي
• hugo version - يعرض إصدار هوغو الحالي

يحتوي Hugo CLI أيضًا على مجموعة متنوعة من العلامات لتحديد خيارات إضافية لبعض الأوامر. لعرض قائمة كاملة بأعلام Hugo (يوجد الكثير منها) ، نوصي باستخدام أمر hugo help لعرض قائمة بجميع العلامات المتاحة.

ملف تكوين Hugo

يدعم ملف تكوين Hugo ثلاثة تنسيقات: YAML و TOML و JSON. وبالمثل ، فإن ملف تكوين Hugo هو config.yml أو config.toml أو config.json ، ويمكنك العثور عليه في الدليل الجذر لمشروع Hugo.

إليك ما يبدو عليه ملف تكوين Hugo النموذجي بتنسيق YAML:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

إذا كنت قد استخدمت WordPress أو CMS آخر من قبل ، فقد تبدو بعض خيارات التكوين مألوفة لك. على سبيل المثال ، kinsta-static-site هو اسم سمة الموقع ، Kinsta Static Site هو العنوان التعريفي لـ SEO ، paginate (عدد المنشورات لكل صفحة) هو 5 .

يحتوي Hugo على العشرات من خيارات التكوين ، والتي يمكنك استكشافها جميعًا في وثائق Hugo الرسمية. إذا كنت بحاجة إلى إجراء أي تغيير في التكوين العام أثناء تطوير موقع Hugo ، فستحتاج إلى تعديل ملف التكوين هذا.

كيفية إنشاء موقع Hugo

الآن بعد أن انتهينا من كيفية تثبيت واستخدام Hugo CLI وأساسيات ملف تكوين Hugo ، فلنقم بإنشاء موقع Hugo جديد.

لإنشاء موقع Hugo ، استخدم الأمر أدناه (لا تتردد في تغيير my-hugo-site إلى شيء آخر إذا كنت ترغب في ذلك):

 hugo new site my-hugo-site

بعد ذلك ، انتقل إلى مجلد الموقع ، وسترى الملفات والمجلدات التالية: ملف config.toml ، ومجلد النماذج الأصلية ، ومجلد المحتوى ، ومجلد التخطيطات ، ومجلد السمات ، ومجلد البيانات ، والمجلد الثابت . دعنا ننتقل بسرعة إلى ماهية كل من هذه الملفات والمجلدات.

ملف config.toml الخاص بـ Hugo

كما أشرنا أعلاه ، يحتوي ملف التكوين الأساسي لـ Hugo على إعدادات عامة لموقعك.

مجلد النماذج الأصلية لهوجو

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

على سبيل المثال ، إذا كان لديك نوع محتوى بودكاست لعرض حلقات البودكاست الخاصة بك ، فيمكنك إنشاء نموذج أصلي جديد في archetypes/podcast.md بالمحتويات أدناه:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

باستخدام هذا النموذج الأصلي للبودكاست ، يمكنك بعد ذلك استخدام الأمر أدناه لإنشاء منشور جديد:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

الآن ، إذا فتحت المنشور الذي تم إنشاؤه حديثًا ، يجب أن ترى هذا:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

بدون النماذج البدئية ، سيكون عليك تحديد معلمات المادة الأمامية يدويًا لكل منشور جديد تقوم بإنشائه. بينما قد تبدو النماذج البدئية معقدة وغير ضرورية في البداية ، إلا أنها قد توفر لك الكثير من الوقت على المدى الطويل.

مجلد محتوى هوغو

مجلد المحتوى هو المكان الذي ينتقل إليه محتوى المنشور الفعلي. يدعم Hugo كلاً من تنسيقات Markdown و HTML ، مع كون Markdown هو الخيار الأكثر شيوعًا نظرًا لسهولة استخدامه. بالإضافة إلى كونه مساحة التخزين العامة للمنشورات ، يمكنك استخدام مجلد المحتوى لتنظيم محتوى المنشور بشكل أكبر.

يتعامل Hugo مع كل دليل عالي المستوى في مجلد المحتوى كقسم محتوى. تشبه أقسام المحتوى في Hugo أنواع المنشورات المخصصة في WordPress. على سبيل المثال ، إذا كان موقعك يحتوي على منشورات وصفحات وملفات podcast ، فسيحتوي مجلد المحتوى الخاص بك على منشورات وصفحات وأدلة podcast حيث ستعيش ملفات المحتوى لأنواع المنشورات المختلفة هذه.

مجلد تخطيطات هوغو

يحتوي مجلد التخطيطات على ملفات HTML التي تحدد بنية موقعك. في بعض الحالات ، قد ترى موقع Hugo بدون مجلد تخطيطات لأنه لا يلزم أن يكون في الدليل الجذر للمشروع ويمكن أن يتواجد داخل مجلد سمة بدلاً من ذلك.

على غرار سمات WordPress التي تستخدم PHP للقوالب ، تتكون قوالب Hugo من HTML أساسي مع قوالب ديناميكية إضافية مدعومة من مكتبات html/template المضمنة في Golang ومكتبات text/template . توجد ملفات قالب HTML المتنوعة المطلوبة لإنشاء ترميز HTML لموقعك في مجلد التخطيطات .

مجلد ثيمات هوغو

بالنسبة للمواقع التي تفضل طريقة أكثر احتواءًا لتخزين ملفات وأصول القوالب ، يدعم Hugo مجلد السمات . تتشابه سمات Hugo مع سمات WordPress من حيث تخزينها في دليل السمات وتحتوي على جميع القوالب اللازمة لعمل سمة ما.

بينما يفضل بعض مستخدمي Hugo الاحتفاظ بالملفات المتعلقة بالقوالب في الدليل الجذر للمشروع ، فإن تخزين هذه الملفات داخل مجلد السمات يسمح بإدارة ومشاركة أسهل.

مجلد بيانات هوغو

مجلد بيانات Hugo هو المكان الذي يمكنك فيه تخزين البيانات التكميلية (بتنسيق JSON أو YAML أو TOML) اللازمة لإنشاء صفحات موقعك. تعد ملفات البيانات مفيدة لمجموعات البيانات الأكبر التي قد يكون تخزينها مباشرة في محتوى أو ملف قالب مرهقة.

على سبيل المثال ، إذا أردت إنشاء قائمة بمعدلات التضخم بالدولار الأمريكي من 1960 إلى 2020 ، فسوف يستغرق الأمر حوالي 80 سطرًا لتمثيل البيانات (سطر واحد لكل عام). بدلاً من وضع هذه البيانات مباشرةً في ملف محتوى أو قالب ، يمكنك إنشاؤها في مجلد البيانات وتعبئتها بالمعلومات الضرورية.

هوغو مجلد ثابت

مجلد Hugo الثابت هو المكان الذي تخزن فيه الأصول الثابتة التي لا تتطلب أي معالجة إضافية. عادةً ما يكون المجلد الثابت هو المكان الذي يقوم فيه مستخدمو Hugo بتخزين الصور والخطوط وملفات التحقق من DNS والمزيد. عندما يتم إنشاء موقع Hugo وحفظه في مجلد لنشره بسهولة ، يتم نسخ جميع الملفات الموجودة في المجلد الثابت كما هي.

إذا كنت تتساءل عن سبب عدم ذكرنا لملفات JavaScript أو CSS ، فذلك لأنه غالبًا ما تتم معالجتها ديناميكيًا عبر خطوط الأنابيب أثناء تطوير الموقع. في Hugo ، يتم تخزين ملفات JavaScript و CSS بشكل شائع داخل مجلد السمات لأنها تتطلب معالجة إضافية.

كيفية إضافة موضوع إلى موقع Hugo

يعد تنزيل وتثبيت سمة معدة مسبقًا طريقة رائعة لبدء استخدام Hugo. تأتي سمات Hugo بجميع الأشكال والأحجام ، والعديد منها متاح مجانًا في مستودع Hugo الرسمي. دعنا نمضي قدمًا ونثبت موضوع Hyde الشهير على موقع Hugo الخاص بنا.

أولاً ، انتقل إلى مجلد سمة مشروعك في Terminal:

 cd <hugo-project-directory>/themes/

بعد ذلك ، استخدم Git لنسخ سمة Hyde في دليل سمات مشروعك.

 git clone https://github.com/spf13/hyde.git

بعد ذلك ، أضف السطر التالي إلى ملف config.toml الخاص بك لتنشيط سمة Hyde:

 theme = "hyde"

في هذه المرحلة ، يتم تثبيت وتكوين سمة Hyde. تتمثل الخطوة التالية في بدء تشغيل خادم الويب للتطوير المدمج في Hugo لعرض الموقع في متصفح الويب الخاص بك.

كيفية معاينة موقع Hugo

يأتي Hugo مزودًا بخادم ويب متكامل لأغراض التطوير ، مما يعني أنك لست بحاجة إلى تثبيت خادم ويب تابع لجهة خارجية مثل Nginx أو Apache لمجرد عرض موقعك محليًا.

لبدء تشغيل خادم الويب Hugo ، قم بتشغيل الأمر أدناه في الدليل الجذر لمشروعك:

 hugo server -D

سيقوم Hugo بعد ذلك ببناء صفحات موقعك وإتاحتها على http://localhost:1313/ :

إذا قمت بزيارة عنوان URL في متصفح الويب الخاص بك ، فيجب أن ترى موقع Hugo الخاص بك مع سمة Hyde:

افتراضيًا ، سيراقب خادم التطوير المحلي لـ Hugo التغييرات ويعيد بناء الموقع تلقائيًا. نظرًا لأن سرعة إنشاء Hugo سريعة جدًا ، يمكن رؤية تحديثات موقعك في الوقت الفعلي تقريبًا - وهو أمر نادر الحدوث في عالم منشئ المواقع الثابتة. لتوضيح ذلك ، دعنا ننشئ أول مشاركة لنا في Hugo.

كيفية إضافة محتوى إلى موقع Hugo

تختلف إضافة محتوى إلى موقع Hugo اختلافًا كبيرًا عن نظام إدارة المحتوى الكامل مثل WordPress أو Ghost. مع Hugo ، لا توجد طبقة CMS مضمنة لإدارة المحتوى الخاص بك. بدلاً من ذلك ، يُتوقع منك إدارة وتنظيم الأشياء على النحو الذي تراه مناسبًا.

بعبارة أخرى ، لا توجد طريقة "صحيحة" صريحة لإدارة المحتوى في Hugo. سنشارك طريقة واحدة لإضافة المحتوى وإدارته في هذا القسم ، لكن لا تتردد في تغيير الأمور كلما أصبحت أكثر دراية بـ Hugo.

أقسام المحتوى في Hugo

في Hugo ، أول أداة لتنظيم المحتوى لديك تحت تصرفك هي قسم المحتوى . يشبه قسم المحتوى في Hugo نوع المنشور في WordPress - لا يمكنك استخدامه فقط كعامل تصفية للمحتوى ، ولكن يمكنك أيضًا استخدامه كمعرف عند إنشاء سمات مخصصة.

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

كيفية إضافة منشورات في Hugo

مع وضع ذلك في الاعتبار ، فلنقم بإنشاء قسم محتوى لمنشورات المدونة وإضافة بعض أجزاء المحتوى. أنشئ مجلدًا جديدًا باسم المنشورات في مجلد محتوى مشروعك - هذا هو قسم المحتوى.

لنقم بإنشاء طبقة تنظيمية أخرى داخل مجلد posts عن طريق إنشاء مجلد 2021 . في هذه المرحلة ، يجب أن يبدو دليل المحتوى الخاص بك كما يلي:

الآن ، دعونا ننشئ أول منشور لدينا. كما ناقشنا سابقًا ، يدعم Hugo ملفات Markdown و HTML للمحتوى. بشكل عام ، من الأفضل التمسك بملفات Markdown لأنها أسهل في الكتابة والتنسيق والقراءة.

في المجلد content / posts / 2021 ، أنشئ ملفًا جديدًا ينتهي .md (امتداد ملف Markdown). يمكنك تسمية الملف كما تريد ، ولكن الصيغة الموصى بها لتسمية ملف محتوى Hugo هي YYYY-MM-DD-a-sample-post.md .

بالإضافة إلى إنشاء ملف محتوى يدويًا ، يمكنك أيضًا استخدام Hugo CLI لإنشاء منشور جديد باستخدام الأمر أدناه (تأكد من تشغيل الأمر من دليل المشروع الخاص بك):

 hugo new posts/2021/2021-08-30-a-sample-post.md

لاحظ كيف أن مجلد المحتوى مفقود من المسار أعلاه. هذا لأن Hugo يفترض أن جميع ملفات المحتوى ستنتقل إلى مجلد المحتوى افتراضيًا.

إذا فتحت ملف المحتوى الذي تم إنشاؤه حديثًا ، فسترى بضعة أسطر من البيانات الوصفية في الجزء العلوي من المستند والتي تبدو كالتالي:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

تسمى هذه البيانات الوصفية ، التي تم تنسيقها في YAML ، "المادة الأمامية". تعد المادة الأمامية التي يتم إنشاؤها تلقائيًا إحدى الفوائد المهمة لاستخدام Hugo CLI. الموضوع الأمامي هو المكان الذي يتم فيه تخزين البيانات الفريدة للمنشور (اسم المنشور ، والبيانات ، وحالة المسودة ، والعلامات ، والفئات ، وما إلى ذلك). يمكن تكوين التنسيق الافتراضي للمادة الأمامية على أساس كل قسم باستخدام النماذج الأصلية.

الآن دعنا نضيف بعض النص إلى المنشور. عند كتابة منشور ، تأكد دائمًا من أن المحتوى الخاص بك تحت المقدمة مثل:

بمجرد حفظ ملف المحتوى ، يجب أن ترى Hugo يعيد بناء موقعك في Terminal. في لقطة الشاشة أدناه ، يمكنك رؤية Hugo أعاد بناء الموقع بالكامل في 22 مللي ثانية!

إذا قمت بزيارة موقع Hugo الخاص بك في متصفح الويب الخاص بك ، فسترى المنشور الجديد.

كيفية إضافة صفحة في هوغو

الآن بعد أن أضفنا منشورًا إلى موقع Hugo الخاص بنا ، دعنا نضيف صفحة. تميز معظم أنظمة إدارة المحتوى ، بما في ذلك WordPress ، بين المنشورات والصفحات. عادةً ما تكون المشاركة جزءًا مؤرخًا من المحتوى ، بينما تتكون الصفحة من محتوى ثابت أو دائم الخضرة.

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

 hugo new pages/about.md

لاحظ كيف يختلف اصطلاح التسمية للصفحات عن المشاركات. على عكس المنشورات ، لا ترتبط الصفحات بتاريخ محدد ، لذلك ليس من الضروري تضمين تاريخ الإنشاء في اسم الملف.

الآن ، دعنا نضيف بعض النص إلى صفحة "حول":

في هذه المرحلة ، يجب أن تشاهد صفحة حول في متصفح الويب الخاص بك:

الآن بعد أن أصبح لدينا قسمان للمحتوى - المنشورات والصفحات - دعنا ننتقل إلى كيفية إجراء بعض التخصيصات على الموقع ، مثل تحرير العنوان والوصف وإضافة صفحة "حول" إلى قائمة الشريط الجانبي وتغيير تنسيق الروابط الثابتة وإزالة صفحات من آخر تغذية.

كيفية تغيير عنوان الموقع ووصفه

تعتمد الطريقة الدقيقة لتغيير عنوان الموقع ووصفه على تكوين موقعك و / أو السمة النشطة. في حالة موضوع Hyde ، يمكن تغيير عنوان الموقع ووصفه في ملف تكوين Hugo ( config.toml ).

نحن نعلم هذا بسبب رمز السمة التالي الذي يعرض الشريط الجانبي:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

الجزءان اللذان يجب التركيز عليهما هما:

 {{ .Site.Title }}

و…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

تعد المقاود {{ }} جزءًا من محرك قوالب Hugo وتسمح بالبيانات التي يتم إنشاؤها ديناميكيًا في الصفحات المعروضة. كمثال ، {{ .Site.Title }} يوجه Hugo للتحقق من ملف config.toml وجلب القيمة المعينة لمفتاح العنوان .

نظرًا لأن التكوين الافتراضي لـ Hugo يستخدم My New Hugo Site كعنوان للموقع ، فهذا ما يظهره الشريط الجانبي. إذا قمنا بتغيير عنوان الموقع في config.toml إلى شيء آخر ، فسوف ينعكس التغيير أيضًا على الواجهة الأمامية.

دعنا نمضي قدمًا ونغير معلمة العنوان في config.toml من My New Hugo Site إلى Kinsta's Hugo Site .

بالانتقال إلى وصف الموقع ، يمكنك أن ترى أن محرك قوالب Hugo يدعم المنطق الشرطي. تُترجم الشفرة أدناه إلى اللغة الإنجليزية البسيطة ، وهي ترشد Hugo للتحقق مما إذا تم تعيين قيمة Params لمفتاح الوصف في ملف config.toml . إذا لم يكن كذلك ، فإليك سلسلة افتراضية لاستخدامها بدلاً من ذلك.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

نظرًا لعدم وجود وصف تم تكوينه في ملف config.toml ، يقوم Hugo افتراضيًا بتقديم "مظهر أنيق مفتوح المصدر وأول موضوع للجوال لـ Hugo تم إنشاؤه بواسطةmdo. صنع في الأصل لـ Jekyll. "

لنقم الآن بتحديث ملف config.toml الخاص بنا من:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

ل:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

كما هو متوقع ، تظهر التغييرات الآن على الواجهة الأمامية أيضًا:

كيفية إزالة الصفحات من آخر التغذية

في معظم المدونات ، من الشائع أن يعرض موجز المنشور على الصفحة الرئيسية المنشورات فقط. بشكل افتراضي ، تتضمن سمة Hyde جميع ملفات المحتوى في موجز النشر. لتغيير هذا السلوك ، ستحتاج إلى تحرير دالة range في قالب index.html ، الذي يقوم بإنشاء الصفحة الرئيسية.

تتكرر وظيفة range في Hugo عبر مجموعة محددة من العناصر ثم تقوم بشيء ما باستخدام البيانات. بشكل افتراضي ، يتنوع نموذج index.html الخاص بسمة Hyde إلى .Site.RegularPages ويقوم بتصفية البيانات مثل الرابط الثابت وعنوان المنشور وملخص المنشور قبل عرض HTML.

منذ .Site.RegularPages يتضمن جميع الصفحات العادية على Hugo ، بما في ذلك كل من المنشورات والصفحات ، يتم تقديم صفحة "حول". من خلال تغيير عناصر range إلى .Site.RegularPages "Section" "posts" ، يمكننا توجيه Hugo للتصفية فقط من خلال الصفحات العادية في قسم المنشورات - ملفات المحتوى في مجلد المشاركات الذي أنشأناه سابقًا.

دعنا نجري هذا التغيير الآن عن طريق تحرير القالب من هذا:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

الى هذا:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

بعد إجراء هذا التغيير ، ستعرض الصفحة الرئيسية منشورات مثل:

كيفية استخدام الجزئيات في هوغو

إحدى أقوى ميزات قوالب Hugo هي الأجزاء - قوالب HTML مضمنة في قالب HTML آخر. تسمح الأجزاء الجزئية بإعادة استخدام الكود عبر ملفات قوالب مختلفة دون إدارة الكود في كل ملف.

على سبيل المثال ، من الشائع رؤية أقسام صفحة مختلفة (رأس ، تذييل ، إلخ) في ملفاتها الجزئية المنفصلة ، والتي يتم استدعاؤها بعد ذلك داخل ملف قالب baseof.html الخاص بالقالب.

ضمن ملف baseof.html في سمة Ananke ، يمكنك مشاهدة مثال على جزء في السطر 18 - {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

في هذه الحالة ، {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} يوجه Hugo لاستبدال محتويات السطر 18 بالملف site-style.html في المجلد / Layouts / parts. إذا انتقلنا إلى /partials/site-style.html ، فسنرى الكود التالي:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

بإلغاء تحميل هذا الرمز إلى ملف منفصل ، يمكن أن يظل ملف القالب baseof.html منظمًا ويسهل قراءته. في حين أن الأجزاء الجزئية ليست ضرورية ، خاصة بالنسبة للمشاريع الأساسية ، إلا أنها مفيدة للمشاريع الكبيرة ذات الوظائف الأكثر تعقيدًا.

كيفية استخدام الرموز القصيرة في Hugo

تتشابه أكواد Hugo القصيرة مع الأجزاء الجزئية من حيث أنها تسمح بإعادة استخدام الكود عبر مجموعة متنوعة من الصفحات. الرموز القصيرة هي ملفات HTML موجودة في المجلد / Layouts / shortcodes . يتمثل الاختلاف الرئيسي في أن الأجزاء تنطبق على قوالب HTML ، بينما تنطبق الرموز القصيرة على صفحات محتوى Markdown.

في Hugo ، تتيح لك الرموز القصيرة تطوير وحدات من الوظائف التي يمكنك استخدامها في الصفحات عبر موقعك دون إدارة تغييرات التعليمات البرمجية لكل صفحة.

إذا كنت تدير مدونة ، فستحتاج إلى مراجعة محتوى نص منشوراتك لتحديث مراجع السنة إلى العام الحالي. اعتمادًا على عدد المنشورات التي لديك على موقعك ، يمكن أن تستغرق هذه المهمة وقتًا طويلاً!

باستخدام رمز Hugo القصير في ملفات المحتوى الخاصة بك ، لن تقلق بشأن تحديث مراجع السنة مرة أخرى!

لنبدأ بإنشاء رمز قصير في /layouts/shortcodes/current_year.html بالمحتويات أدناه:

 {{ now.Format "2006" }}

يمكن تضمين الرموز القصيرة في المشاركات بهذا التركيب - {{< shortcode_name >}} . في حالتنا ، يمكننا استدعاء الرمز المختصر current_year.html بـ {{< shortcode_name >}} مثل:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

إذا قمت بعرض المنشور في متصفح الويب ، فيجب أن ترى العام الحالي في السطر الأول من المنشور كما يلي:

كيفية إضافة صور إلى منشور في Hugo

على عكس WordPress وأنظمة إدارة المحتوى الكاملة الأخرى ، لا يتضمن Hugo نظام السحب والإفلات لإدارة الصور. وبالتالي ، يتم تفريغ تصميم نظام إدارة الصور للمستخدم النهائي.

بينما لا يوجد لدى Hugo طريقة موحدة لإدارة الصور ، تعتمد إحدى الطرق الشائعة على تخزين الصور في مجلد / ثابت والإشارة إليها في المنشورات والصفحات باستخدام رمز قصير. دعنا نتعرف على كيفية تنظيم الصور الأساسية في Hugo.

أول شيء يتعين علينا القيام به هو إنشاء هيكل تنظيمي لمكتبة الصور الخاصة بنا. بينما يبدو هذا معقدًا ، كل ما هو مطلوب هو إنشاء بعض الأدلة الإضافية داخل المجلد / static .

لنبدأ بإنشاء مجلد تحميل في / static . ضمن مجلد التحميلات ، أنشئ مجلدًا باسم 2021 لاستيعاب جميع الصور التي تم تحميلها في عام 2021.

بعد ذلك ، دعنا نضيف صورتين ( blue1.jpg و blue2.jpg ) إلى مجلد 2021 .

في HTML ، يتم عرض الصور باستخدام علامة <img> . على سبيل المثال ، لعرض blue1.jpg ، يمكننا استخدام HTML أدناه:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

في حين أنه من الممكن إضافة HTML مباشرة إلى ملف محتوى Markdown ، فمن الأفضل إنشاء رمز قصير يمكنك استخدامه لعرض أي صورة من مجلد التحميلات. بهذه الطريقة ، إذا احتجت في أي وقت إلى تحديث علامة img ، فيمكنك تحرير قالب الرمز القصير دون تحرير كل مثيل لعلامة img .

لإنشاء قالب الرمز القصير ، أنشئ ملفًا جديدًا في /layouts/shortcodes/img.html بالمحتوى أدناه:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

بعد ذلك ، أضف الرمز المختصر أدناه إلى منشور مدونة:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

في نموذج الرمز القصير ، {{ .Get "src" }} و {{ .Get "alt" }} تعليمات إلى Hugo لجلب محتويات معلمات src< و alt< عند استدعاء رمز قصير.

الآن ، إذا أعدت تحميل منشور المدونة ، فيجب أن ترى الصورة كما يلي:

كيفية نشر موقع Hugo

حتى هذا المنشور ، تعلمت كيفية تثبيت Hugo ، وإنشاء موقع ، وإضافة سمة ، وإجراء تعديلات أساسية على ملفات التكوين ، وتوسيع وظائف موقعك بأجزاء وأكواد قصيرة. في هذه المرحلة ، يجب أن يكون لديك موقع وظيفي جاهز للنشر عبر الإنترنت.

نظرًا لأن Hugo هو منشئ مواقع ثابت ، يمكنك نشر HTML و CSS و JS الذي ينشئه في أي مكان باستخدام خادم ويب. نظرًا لأن المتطلبات الفنية لخدمة المواقع الثابتة منخفضة جدًا ، يمكنك استضافتها مجانًا عبر مجموعة واسعة من المزودين مثل Netlify و Vercel و Cloudflare Pages والمزيد.

في السابق ، استخدمنا hugo server -D لتدوير خادم تطوير محلي لمعاينة التغييرات على موقعنا في الوقت الفعلي. لإنشاء الموقع بالكامل ، يمكننا استخدام الأمر hugo في الدليل الجذر لمشروعنا. بعد اكتمال إنشاء الموقع ، يجب أن ترى مجلدًا عامًا جديدًا في دليل المشروع. داخل هذا المجلد ، ستجد جميع الملفات التي تحتاج إلى تحميلها على خادم أو خدمة تخزين سحابي مثل Amazon S3.

يعد إنشاء موقعك محليًا وتحميله يدويًا إلى Amazon S3 أو خادم يقوم بتشغيل Nginx إحدى طرق نشر موقع تم إنشاؤه بشكل ثابت. ومع ذلك ، فهو ليس الأكثر فاعلية لأنه يتطلب منك تحميل ملفات جديدة يدويًا في كل مرة تقوم فيها بإجراء تغيير.

بدلاً من ذلك ، فإن الخيار الأفضل هو ربط مجلد مشروع Hugo بمستودع GitHub وربط مستودع GitHub بخدمة النشر الآلي مثل Netlify. باستخدام هذا الإعداد ، يمكنك تحرير موقعك ، ودفع التغييرات إلى GitHub ، وبدء إنشاء ونشر جديد على Netlify دون أي تدخل يدوي. الآن ، دعنا نتعرف على كيفية القيام بكل هذا!

كيفية تحميل مشروع Hugo الخاص بك على GitHub

أولاً ، ستحتاج إلى إنشاء مستودع GitHub لمشروعك. للقيام بذلك ، قم بإنشاء حساب GitHub (إذا لم يكن لديك حساب بالفعل) وقم بتنزيل تطبيق GitHub لسطح المكتب الرسمي. بعد تثبيت تطبيق GitHub ، انقر فوق ملف في شريط القائمة وحدد مستودع جديد . امنح المستودع اسمًا من اختيارك ، واترك الخيارات الأخرى في حالتها الافتراضية في الوقت الحالي ، وانقر فوق إنشاء مستودع .

افتراضيًا (في نظام macOS) ، يُنشئ تطبيق GitHub مستودعات جديدة في /Users/username/Documents/GitHub . نظرًا لأننا أطلقنا على المستودع الخاص بنا my-hugo-site ، يمكن العثور على المستودع الخاص بنا على /Users/brianli/Documents/GitHub/my-hugo-site .

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

إذا عدت إلى تطبيق GitHub ، يجب أن تشاهد الآن قائمة بالملفات التي تم تغييرها. لتحميل المستودع إلى GitHub ، أضف ملخصًا ، وانقر على الالتزام بالصفحة الرئيسية ، وانقر على "نشر المستودع " في الزاوية اليمنى العليا.

By default, the “Keep this code private” option is checked. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

نظرًا لأن Hugo يعد مولد موقع ثابتًا سريعًا ، فلن يستغرق النشر سوى بضع ثوانٍ لموقع أساسي. بمجرد انتهاء النشر ، ستتمكن من رؤية عنوان URL المرحلي في لوحة معلومات Netlify. انقر فوق عنوان URL لعرض الموقع المنشور.

هذا هو موقع Hugo الخاص بنا على Netlify. كما ترى ، فهو مطابق للموقع الموجود في بيئتنا المحلية:

في هذه المرحلة ، يمكنك إعداد مجال مخصص وشهادة SSL لموقعك المستضاف على Netlify. للقيام بذلك ، نوصي بالرجوع إلى وثائق Netlify الرسمية.

نظرًا لأننا ربطنا Netlify بـ GitHub ، فإن التزامًا جديدًا بمشروع Hugo سيؤدي GitHub repo تلقائيًا إلى نشر جديد على Netlify!

ملخص

Hugo هو أحد أشهر مولدات المواقع الثابتة في العالم ، ولسبب وجيه. ليس فقط لأنه يحتوي على معالجة بناء فائقة السرعة ، ولكنه يأتي أيضًا مزودًا بقدرات قوالب قوية تدعم الأجزاء والأكواد القصيرة.

في هذا البرنامج التعليمي ، تعلمت كيفية تكوين Hugo ، وإنشاء مشروع جديد ، وإضافة ملفات محتوى ، وتحرير ملفات السمات ، ونشر موقع ثابت نهائي. نوصي بالاطلاع على وثائق Hugo الرسمية لمعرفة المزيد عن Hugo وميزاته الأكثر تقدمًا مثل الوظائف المخصصة والمادة الأمامية وحزم بناء CSS / JS.

ما هي أفكارك حول Hugo ومولدات المواقع الثابتة الأخرى؟ واسمحوا لنا أن نعرف في التعليقات أدناه!