كيف تبدأ مدونة باستخدام Hugo

برنامج تعليمي مفصل لبدء مدونة جديدة باستخدام Hugo من الصفر إلى النشر

Hugo هي أداة رائعة لبدء مدونة.

أستخدم Hugo بنفسي في هذه المدونة منذ أكثر من عامين. لدي عدة أسباب للحب باستخدام Hugo.

أنهبسيطومملومرنوسريع.

السبب الرئيسي هو أنه كذلكبسيط. ليس هناك الكثير لتتعلمه لتبدأ.

أنت تكتب محتوى في Markdown ، وهو تنسيق يتيح لي استخدام المحرر المفضل لدي (Bear) لكتابة المشاركات.

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

ولا يعرض أي أشياء رائعة أو من الجيل التالي مثل العديد من أطر عمل JavaScript التي تميل إلى القيام بها.

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

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

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

على أي حال ، يكفي الكلمات.

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

أيضًا ، يجب أن تكون مستعدًا لسير عمل Git-centric لجعل الأمور تنقر حقًا.

ما تفعله هو أن تكتب منشورًا باستخدام Markdown ، ثم تلتزم بتغييراتك في مستودع Git ، وهو الأكثر شيوعًا على GitHub ، وتنشر بعض تقنيات الغراء التغييرات على الخادم الذي يستضيف الموقع.

استضافة موقع Hugo

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

تعد صفحات Netlify و Now و GitHub 3 أماكن رائعة حيث يمكنك استضافة مدونة Hugo مجانًا.

التكلفة الوحيدة هي التي يجب عليك تحملها لاسم المجال. لا يمكنني التأكيد أكثر على أهمية امتلاك اسم المجال الخاص بك. لا.github.ioأو.netlify.comأو.now.shمواقع من فضلك.

يتم استضافة مواقع Hugo الخاصة بي على Netlify.

اختر المجال

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

أوه ، وإذا كان لديك مجال قديم موجود حولك ، فاستخدمه فقط. لماذا؟ كلما كان نطاقك أقدم ، كان ذلك أفضل.

ملاحظة حول النطاقات الفرعية: كل نطاق فرعي ، بالنسبة إلى Google ، هو موقع ويب مختلف. حتى إذا كان المجال الخاص بكflaviocopes.com، وتقوم بإنشاء مدونتك بتنسيقblog.flaviocopes.com، فهذا موقع ويب جديد تمامًا لـ Google ، وسيكون له ترتيب خاص به منفصل عن النطاق الرئيسي.

اقتراحي هو تجنب المجالات الفرعية تمامًا.

قم بتثبيت Hugo

لتثبيت Hugo على macOS ، من محطة التشغيل الخاصة بك

brew install hugo

الbrewالأمر غير موجود على جهاز Mac الخاص بك؟ افحص الدليل البيرة

بالنسبة لنظامي التشغيل Windows و Linux ، تحقق من ملفدليل التثبيت الرسمي.

قم بإنشاء موقع Hugo

بمجرد تثبيت Hugo ، يمكنك إنشاء موقع Hugo عن طريق التشغيل

hugo new site myblog

أقترح تشغيل هذا في ملفwwwمجلد في الدليل الرئيسي الخاص بك ، لأن الأمر سينشئ ملفmyblogالمجلد حيث تقوم بتشغيله.

اختر موضوعًا

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

هناك الكثير من الخياراتhttps://themes.gohugo.io. توصيتي الشخصية هي أن تبدأhttps://themes.gohugo.io/ghostwriter/وقم بتعديله لاحقًا.

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

لذا ، اذهب إلىhttps://github.com/jbub/ghostwriter/archive/master.zipلتنزيل الإصدار الحالي من السمة.

ثم قم بتفريغه في ملفthemes/ghostwriterالمجلد في موقع ويب Hugo الذي تم إنشاؤه حديثًا:

لاحظ أن هناك ملفexampleSiteمجلد فيthemes/ghostwriter. افتحه وافتحهcontentمجلد فرعي. هناك ، يمكنك رؤية ملفpageوpostوprojectالمجلدات الفرعية.

ينسخpageوpostفي الcontentمجلد الموقع:

التكوين

توفر بيانات العينة أيضًا عينةconfig.tomlإملأthemes/ghostwriter/exampleSite/config.toml. هذا هو ملف تكوين Hugo ، والذي يخبر Hugo ببعض تفاصيل التكوين دون الحاجة إلى ترميز المعلومات في السمة.

أوصيك بعدم نسخ ذلك ، لأنه يحتوي على الكثير من الأشياء ، وبدلاً من ذلك استخدم هذا:

baseurl = "/"
title = "My blog"
theme = "ghostwriter"

[Params] mainSections = [“post”] intro = true headline = “My headline” description = “My description” github = https://github.com/XXX twitter = https://twitter.com/XXX email = [email protected] opengraph = true shareTwitter = true dateFormat = “Mon, Jan 2, 2006”

[Permalinks] post = “/:filename/”

يمكنك تخصيص المعلومات الموجودة في هذا الملف بحرية لاحقًا.

الآن من سطر الأوامر ، قم بتشغيل:

hugo serve

فتحhttp://localhost:1313في متصفحك ، ويجب أن تكون قادرًا على مشاهدة الموقع مباشرة!

هذه هي الصفحة الرئيسية للموقع.

توجد قائمة بالمشاركات المأخوذة منcontent/postمجلد موقع الويب الخاص بك:

انقر فوق الأول ، المسمى "إنشاء موضوع جديد":

يمكنك فتح الملفcontent/post/creating-a-new-theme.mdلتغيير أي شيء في المنشور.

إذا قمت بالحفظ ، فسيتم تحديث موقع الويب تلقائيًا بالمحتوى الجديد.

هذا رائع جدا ، أليس كذلك؟

يمكنك إنشاء منشور جديد عن طريق إنشاء ملف.mdملف ، مع إضافة أي شيء تريده. يمكنك استخدام الأرقام المتزايدة ، إذا كنت تفضل ذلك. أو استخدم التاريخ.

إذا كان هناك شيء لا يبدو كما تريد ، يمكنك فتح ملفthemes/ghostwriter/layoutsمجلد وقرصه.

يتم تعريف نموذج "المشاركة" فيthemes/ghostwriter/layouts/post/single.html:

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

ومع ذلك ، حاول ألا تنظر في تخصيص قالبك الآن.

إذا كنت تريد تعديل الألوان ، أضف ملف<style>علامة مع بعض CSS في ملفthemes/ghostwriter/layouts/partials/header.html.

على سبيل المثال ، اجعل الروابط سوداء:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

ركز على المحتوى بدلاً من ذلك.

قم بإزالة الملفات الموجودة ، واكتب 2-3 مشاركات لتبدأ بها.

من السهل جدًا الوقوع في شرك صنع الأشياء تمامًا كما تريد ، ولكن الشيء المهم هو المحتوى.

وكلما كان موقعك أنظف ، كان ذلك أفضل للقراء.

اسمحوا لي الآن أن أكتب قليلا عن النشر.

انشر موقع Hugo على Netlify

أرغب في عرض كيفية نشر موقع Hugo في اثنتين من الخدمات التي أستمتع بها أكثر: Netlify و Now.

أولاً ، سأقوم بإنشاء مستودع GitHub لاستضافة الموقع.

أفتح GitHub Desktop ، وهو تطبيق أستخدمه كل يوم وهو جزء من سير العمل الخاص بي. إنها أبسط طريقة لاستخدام Git.

من قائمة "ملف" ، قمت بالضغط على خيار "مستودع جديد":

يمكن إنشاء نفس الشاشة ببساطة عن طريق سحب ملفmyblogمجلد في التطبيق.

أعطيت الmyblogاسم المستودع ، واختر المسار الصحيح للمستودع.

تقوم العملية تلقائيًا بإجراء الالتزام الأول:

الآن يمكننا النقر فوق الزر "نشر المستودع" لدفع المستودع إلى GitHub:

يمكنك الحفاظ على خصوصية الريبو بالطبع.

بمجرد أن يصبح الريبو في GitHub:

يمكننا الانتقال إلى Netlify.

من لوحة معلومات Netlify الخاصة بي ، قمت بالضغط على الزر "موقع جديد من Git":

تم الضغط على GitHub ، وأذن Netlify بالوصول إلى مستودعاتي الخاصة ، ثم اخترت الريبو الذي أنشأته للتو:

حدده Netlify تلقائيًا باعتباره Hugo repo ، وأدخل أمر الإنشاء تلقائيًا:

يؤدي النقر فوق "نشر الموقع" إلى بدء عملية النشر:

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

عشوائي.netlify.comالمجال الفرعي مرتبط بالموقع ، في هذه الحالةpedantic-engelbart-500c9a.netlify.com، ويتم تمكين HTTPS تلقائيًا.

لذلك يمكننا أن نرى الموقع مباشرًا على الفور:

الآن إذا حاولت تعديل شيء ما في إصدارك المحلي ، فما عليك سوى دفع التغييرات إلى GitHub ، وسيقوم Netlify بتحديث الموقع تلقائيًا. يمكنك رؤيته يبني الموقع في لوحة "نظرة عامة" على الموقع:

لمعرفة المزيد حول Netlify ، أوصيك بمراجعة ملفبرنامج Netlify التعليمي.

انشر موقع Hugo على Zeit Now

يتم استدعاء Zeit الآنفيرسيل، وقد يكون هذا البرنامج التعليمي قديمًا

منصة رائعة أخرى يمكنك استخدامها لمدونة Hugo الخاصة بك هي Zeit Now.

بمجرد التسجيل ، من لوحة القيادة تضغط علىمشروع جديدزر.

في المرة الأولى التي تقوم فيها بالنشر من GitHub ، يجب عليك أولاً تثبيت تطبيق GitHub بالنقر فوق "تثبيت الآن لـ GitHub":

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

بمجرد العودة ، انقر فوق الزر "مشروع جديد من GitHub":

حدد المشروع وانقر على "استيراد":

في غضون ذلك ، انتقل إلى المجلد الرئيسيmysiteوإضافة أpackage.jsonملف بهذا المحتوى:

{
  "scripts": {
    "build": "hugo"
  }
}

يوضح هذا الآن كيفية نشر الموقع.

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

لاحظ أنه في الآن لديك 3 عناوين URL يمكنك استخدامها للوصول إلى الموقع:

  • myblog.flaviocopes.now.sh
  • myblog-alpha-swart.now.sh
  • myblog-git-master.flaviocopes.now.sh

يمكنك اختيار الشخص الذي تفضله.

بالإضافة إلى ذلك ، كل عملية نشر لها عنوان URL الخاص بها أيضًا. في هذه الحالة كان لديmyblog-h8xks5jhn.now.shلكنها تتغير مع كل عملية نشر.

وبالطبع يمكنك إضافة مجالك أيضًا. لدى Zeit خدمة رائعة لشراء نطاقك مباشرة منهم ، والمتوفر علىhttps://zeit.co/domains.

وإذا كنت تفضل العمل باستخدام سطر الأوامر ، فإن ملفnowيتيح لك الأمر شراء المجالات من هناك أيضًا.

أوصي بشدة أن تتحقق من بلديبرنامج Zeit Now التعليمي.


المزيد من الدروس المعملية: