الشروع في العمل مع Hugo: كيفية إنشاء موقع ويب بسيط

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

نظرًا لأن Hugo يُستخدم في الغالب للمواقع الثابتة ، فهو مثالي لإنشاء مدونات أو ملفات أو مواقع توثيق.

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

كيفية تثبيت Hugo

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

ماك

يمكنك تثبيت Hugo باستخدام Homebrew.

1. افتح محطة macOS الخاصة بك.
2. قم بتثبيت مدير حزمة Homebrew.

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

3. قم بتثبيت Hugo.

   الشراب التثبت هوغو

شبابيك

ستحتاج إلى مدير حزم مكافئ لنظام Windows. على سبيل المثال ، يمكنك استخدام ملحق مدير حزمة سكوب.

1. افتح Windows PowerShell ، والذي يجب أن يكون بالفعل جزءًا من نظام التشغيل Windows الخاص بك.
instagram viewer
2. إذا كنت تقوم بتثبيت Scoop لأول مرة ، فقد تحتاج إلى تعيين سياسة التنفيذ الخاصة بك.

   جلس-التنفيذ عن بعد -الكائن المستخدم الحالي

3. تثبيت Scoop:

   iex (الجديد-object net.webclient). downloadstring ('https://get.scoop.sh')
   

4. تثبيت Hugo:

   مغرفة التثبت هوغو

كيفية إنشاء مشروع هوغو

لإنشاء مشروع Hugo جديد ، ستحتاج إلى استخدام المدمج في هوغو موقع جديد أمر.

1. افتح الجهاز الطرفي أو موجه الأوامر. انتقل إلى المجلد حيث تريد إنشاء مشروعك.
2. قم بتنفيذ ملف هوغو موقع جديد أمر:

   هوغو الجديد موقع الجديد-hugo-website

3. انتقل إلى موقع مشروع Hugo الخاص بك في مستكشف الملفات الخاص بك.
4. افتح مجلد المشروع. سترى أن موقع Hugo الجديد الخاص بك يحتوي على بنية الملفات والمجلدات المطلوبة حتى يعمل موقع الويب الخاص بك.

كيفية إضافة موضوع

في الوقت الحالي ، يحتوي مشروعك فقط على المجلدات الأساسية لمشروع Hugo. سيؤدي تشغيل موقع الويب الخاص بك محليًا في هذه المرحلة إلى إظهار شاشة فارغة فقط. نظرًا لعدم وجود أي تصميمات HTML أو CSS أو واجهة مستخدم تم إعدادها لموقع الويب الخاص بك حتى الآن ، فستحتاج إلى إضافتها.

يوفر Hugo بالفعل مكتبة مدمجة ثيمات هوغو تم إنشاؤها بواسطة المطورين.

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

   قرص مضغوط الجديد-hugo-website

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

   بوابة الحرف الأول
   إضافة الوحدة الفرعية git https://github.com/EmielH/tale-hugo.git مواضيع / حكاية

   بدلاً من ذلك ، يمكنك استنساخ مستودع حكاية GitHub في مجلد السمات في مشروعك.

   شخص سخيف استنساخ https://github.com/EmielH/tale-hugo.git مواضيع / حكاية

4. انتقل إلى مجلد المشروع الخاص بك. اضغط على الموضوعات مجلد لفتحه. بغض النظر عن الأمر الذي استخدمته ، سيكون هناك أمر حكاية المجلد الذي يخزن المظهر الذي تم تنزيله حديثًا.
5. في ال config.toml ملف ، أضف سمة الحكاية كجزء من التكوين. سيؤدي هذا إلى إخبار Hugo باستخدام HTML و CSS والأنماط الأخرى التي يتضمنها سمة الحكاية.

   موضوع = "حكاية"

كيفية إضافة صفحات إلى موقع الويب الخاص بك

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

يمكنك كتابة Markdown في الغالب باللغة الإنجليزية البسيطة مع بعض الرموز المضافة لتحديد أي تنسيق. يتضمن ذلك إضافة رموز لتمثيل العناوين ، أو الكلمات التي تكون غامقة ، أو أي تنسيق أساسي آخر قد تحتاجه.

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

1. افتح ال المحتوى مجلد داخل مشروع Hugo الخاص بك. قم بإنشاء ملف Markdown جديد يسمى myFirstPost.md.
2. افتح الملف في أي محرر نصوص مثل Notepad ++ أو Visual Studio Code.
3. في الجزء العلوي من الملف ، أضف بعض البيانات الوصفية. سيتضمن هذا معلومات مهمة حول المنشور. سيقوم الموضوع الذي تستخدمه بتنسيق هذه المعلومات بطريقة معينة على الصفحة.

   
   مؤلف: "اسمك"
   العنوان: "رسالتي الأولى"
   تاريخ: "2022-05-17"
   

4. بعد إضافة البيانات الوصفية ، يمكنك البدء في إضافة المحتوى الخاص بك باستخدام Markdown.

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

5. لا تتردد في إضافة المزيد من ملفات Markdown لإضافة المزيد من الصفحات إلى موقع الويب الخاص بك.

كيفية تشغيل واختبار موقع Hugo الخاص بك محليًا

لتشغيل موقع الويب الخاص بك ، استخدم هوغو تخدم أمر.

1. افتح محطة أو سطر أوامر.
2. انتقل إلى المجلد الجذر لمشروع Hugo الخاص بك.
3. قم بتشغيل هوغو تخدم أمر:

   هوغو تخدم

4. انتظر حتى يكمل موقع الويب عملية بدء التشغيل. بمجرد اكتمال ذلك ، ستطبع المحطة رسالة توضح العنوان المحلي الذي يمكنك الوصول إلى موقع الويب منه. عادة ، هذا هو http://localhost: 1313/.
5. افتح متصفح الويب وادخل http://localhost: 1313/، أو أيًا كان العنوان الذي قدمته لك المحطة. سترى الصفحة الرئيسية لموقع ويب Hugo الخاص بك.
6. ستجد على الصفحة قائمة بالمشاركات لكل ملف تخفيض السعر لديك. في هذه الحالة ، يوجد ملفان تخفيض السعر مملوءان بالمحتوى. يتضمن هذا صفحة myFirstPost.md التي قمت بإنشائها مسبقًا. ويتضمن أيضًا منشورًا جديدًا يسمى bananaCakeRecipe.md.
7. انقر فوق ارتباط العنوان في إحدى المعاينات. سوف يأخذك إلى الصفحة الكاملة لهذا المنشور المحدد.

استضافة موقع Hugo الخاص بك

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

بمجرد إنشاء موقع Hugo الخاص بك ، يمكنك البدء في معرفة المزيد حول كيفية استضافته. هناك العديد من خيارات استضافة مواقع الويب المجانية لتختار من بينها مثل Dropbox أو Google Drive أو OneDrive.

كيفية الحصول على استضافة مواقع مجانية باستخدام Dropbox أو Google Drive أو OneDrive

اقرأ التالي