دروس Jekyll: كيفية إنشاء موقع ثابت

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

هذا هو المكان الذي تأتي فيه مولدات المواقع الثابتة (SSG) - فهي تسهل إنشاء مواقع ويب جميلة وسريعة التحميل دون الحاجة إلى أنظمة خلفية معقدة أو قواعد بيانات.

في هذه المقالة ، ستتعرف على إحدى مجموعات SSG الشهيرة - Jekyll ، وتعرف على كيفية عملها ، وكيف يمكنك إنشاء موقع ويب ثابت بها.

إليك عرضًا توضيحيًا مباشرًا لموقع المدونة الذي ستقوم ببنائه باستخدام Jekyll.

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

ما هو جيكل؟

Jekyll هو SSG مجاني مفتوح المصدر تم إنشاؤه وتشغيله بلغة برمجة Ruby. لست بحاجة إلى فهم كيفية عمل Ruby لاستخدام Jekyll ؛ ما عليك سوى تثبيت Ruby على جهازك.

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

إليك ما يميز Jekyll بين مجموعات SSG:

1. سهل الاستخدام : يستخدم Jekyll ملفات نصية عادية وبناء جملة markdown لإنشاء المحتوى وإدارته ، مما يعني أنك لست بحاجة إلى معرفة HTML أو CSS للبدء.
2. سريع وآمن: لا يتعامل Jekyll مع أي قاعدة بيانات أو برمجة نصية من جانب الخادم ، مما يعني أن هناك مخاطر أقل لحدوث نقاط الضعف والهجمات. يقوم بإنشاء ملفات HTML ثابتة مما يجعل موقع الويب الخاص بك سريعًا وآمنًا بشكل لا يصدق.
3. قابل للتخصيص: Jekyll قابل للتخصيص بدرجة كبيرة ، مما يسمح لك باستخدام التخطيطات والقوالب أو حتى إنشاء مكونات إضافية لتوسيع الوظائف.
4. سهولة النشر : تنشئ Jekyll ملفات HTML ثابتة يمكن نشرها على خادم ويب أو مزود استضافة دون الحاجة إلى نظام إدارة محتوى ديناميكي.
5. بدعم من مجتمع كبير: تمتلك Jekyll مجتمعًا كبيرًا من المستخدمين والمطورين ، مما يعني توفر الكثير من الموارد إذا كنت بحاجة إلى مساعدة أو ترغب في توسيع وظائف موقعك.

كيفية تثبيت Jekyll

تحتاج أولاً إلى تثبيت Ruby على جهازك قبل أن تتمكن من متابعة تثبيت Jekyll كما هو مذكور في وثائق Jekyll.

كيفية تثبيت Jekyll على macOS

بشكل افتراضي ، يأتي Ruby مثبتًا مسبقًا مع macOS ، ولكن لا يوصى باستخدام مثل هذا الإصدار من Ruby لتثبيت Jekyll لأنه قديم. على سبيل المثال ، في Ventura ، أحدث نظام تشغيل من Apple ، إصدار Ruby الذي يتم تثبيته مسبقًا هو 2.6.10 ، أحدث إصدار منه هو 3.1.3 (اعتبارًا من وقت كتابة هذه المقالة).

لإصلاح ذلك ، ستحتاج إلى تثبيت Ruby بشكل صحيح باستخدام مدير إصدارات مثل chruby. ستحتاج إلى تثبيت Homebrew على جهاز Mac الخاص بك أولاً باستخدام الأمر أدناه في جهازك:

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

بمجرد نجاح التثبيت ، قم بإنهاء Terminal وإعادة تشغيله ، ثم تحقق مما إذا كان Homebrew جاهزًا للعمل عن طريق تشغيل هذا الأمر:

 brew doctor

إذا حصلت على " نظامك جاهز للتخمير" ، يمكنك الآن الانتقال إلى تثبيت chruby و ruby-install بالأمر أدناه:

 brew install chruby ruby-install

يمكنك الآن تثبيت أحدث إصدار من ruby ​​وهو 3.1.3 باستخدام حزمة ruby-install التي قمت بتثبيتها للتو:

 ruby-install 3.1.3

هذا سوف يستغرق بضع دقائق. بمجرد نجاحها ، قم بتكوين shell الخاص بك لاستخدام chruby تلقائيًا باستخدام الأمر أدناه:

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

يمكنك الآن إنهاء الجهاز وإعادة تشغيله ، ثم تحقق من أن كل شيء يعمل عن طريق تشغيل هذا الأمر:

 ruby -v

يجب أن تقول روبي 3.1.3 .

لديك الآن أحدث إصدار من Ruby مثبتًا على جهازك. يمكنك الآن المتابعة لتثبيت أحدث جوهرة Jekyll و bundler:

 gem install jekyll bundler

كيفية تثبيت Jekyll على نظام التشغيل Windows

لتثبيت Ruby و Jekyll على جهاز يعمل بنظام Windows ، يمكنك استخدام RubyInstaller. يمكن القيام بذلك عن طريق تنزيل وتثبيت إصدار Ruby + Devkit من تنزيلات RubyInstaller واستخدام الخيارات الافتراضية للتثبيت.

في المرحلة الأخيرة من معالج التثبيت ، قم بتشغيل خطوة ridk install - والتي تُستخدم لتثبيت الأحجار الكريمة. اقرأ المزيد عبر وثائق RubyInstaller.

من الخيارات ، اختر سلسلة أدوات تطوير MSYS2 و MINGW. افتح نافذة موجه أوامر جديدة وقم بتثبيت Jekyll and Bundler باستخدام الأمر أدناه:

 gem install jekyll bundler

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

للتحقق من تثبيت Jekyll بشكل صحيح على جهازك ، افتح الجهاز الطرفي وقم بتشغيل الأمر التالي:

 jekyll -v

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

أوامر Jekyll والتكوين

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

أوامر Jekyll CLI

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

• jekyll build : يولد الموقع الثابت في دليل الموقع .
• jekyll serve : يبني الموقع ويبدأ خادم الويب على جهازك المحلي ، مما يسمح لك بمعاينة الموقع في متصفحك على http: // localhost: 4000.
• jekyll new [site name] : إنشاء موقع Jekyll جديد في دليل جديد باسم الموقع المحدد.
• jekyll doctor : إخراج أي مشكلات في التكوين أو التبعية قد تكون موجودة.
• jekyll clean : يحذف الدليل _site ، حيث يتم تخزين ملفات الموقع التي تم إنشاؤها.
• jekyll help : إخراج وثائق المساعدة لـ Jekyll.
• jekyll serve --draft : يولد ويخدم موقع Jekyll الخاص بك ، بما في ذلك أي منشورات موجودة في دليل المسودات .

يمكنك أيضًا إلحاق بعض الخيارات بهذه الأوامر. شاهد قائمة كاملة بأوامر وخيارات Jekyll في وثائق Jekyll.

ملف تكوين Jekyll

ملف تكوين Jekyll هو ملف YAML يسمى _config.yml يحتوي على إعدادات وخيارات لموقع Jekyll الخاص بك. يتم استخدامه لتكوين جوانب مختلفة من موقعك ، بما في ذلك عنوان الموقع والوصف وعنوان URL والإعدادات الأخرى.

فيما يلي بعض خيارات التكوين الأكثر استخدامًا:

• العنوان: عنوان موقعك.
• الوصف: وصف موجز لموقعك.
• url: عنوان URL الأساسي لموقعك.
• baseurl: الدليل الفرعي لموقعك ، إذا كان مستضافًا في دليل فرعي للمجال.
• الرابط الثابت: بنية عنوان URL لمنشوراتك وصفحاتك.
• استبعاد: قائمة بالملفات أو الدلائل المطلوب استبعادها من عملية إنشاء الموقع.
• ما يلي: قائمة بالملفات أو الدلائل المطلوب تضمينها في عملية إنشاء الموقع.
• ترقيم الصفحات: عدد المشاركات التي سيتم عرضها في كل صفحة عند استخدام ترقيم الصفحات.
• الإضافات: قائمة ملحقات Jekyll للتحميل.
• الموضوع: بشكل افتراضي ، يتم تعيين هذا على minima . يمكنك استخدام أي موضوع آخر عن طريق تعيين اسمه وتنفيذ إعدادات أخرى سنتعرف عليها لاحقًا في هذه المقالة.

يمكنك أيضًا إنشاء متغيرات مخصصة في ملف التكوين الخاص بك واستخدامها في قوالب الموقع والتخطيطات والتضمينات. على سبيل المثال ، يمكنك إنشاء متغير يسمى author_name ثم استخدامه في القوالب الخاصة بك مثل هذا: {{ site.author_name }} .

لتعديل ملف تكوين Jekyll الخاص بك ، افتح ملف _config.yml في دليل مشروع Jekyll في محرر نصي وقم بإجراء التغييرات.

ملاحظة: أي تغييرات تجريها على ملف التكوين ستدخل حيز التنفيذ في المرة التالية التي تنشئ فيها موقعك jekyll build أو jekyll serve .

كيف يمكنك إنشاء موقع ثابت على Jekyll؟

الآن بعد أن قمت بتثبيت Jekyll على جهازك ، أصبح من الممكن الآن إنشاء موقع ويب Jekyll ثابت بأمر واحد في غضون بضع ثوانٍ. افتح Terminal وقم بتشغيل هذا الأمر:

 jekyll new joels-blog

تأكد من استبدال "joels-blog" باسم موقعك المفضل.

بعد ذلك ، انتقل إلى مجلد موقع الويب. ستلاحظ بنية موقع Jekyll الأساسية التي تتضمن أدلة وملفات مثل هذه:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

إليك الغرض من كل من هذه الأدلة والملفات:

• _config.yml: ملف تكوين Jekyll الذي يحتوي على إعدادات وخيارات موقعك.
• _posts: دليل يحتوي على محتوى موقعك (يمكن أن يكون منشورات مدونة). يمكن أن تكون هذه ملفات Markdown أو HTML مع اصطلاح تسمية ملف معين: YEAR-MONTH-DAY-title.MARKUP .
• Gemfile و Gemfile.lock: يستخدم Bundler هذه الملفات لإدارة جواهر Ruby التي يعتمد عليها موقعك.
• index.md: الصفحة الرئيسية الافتراضية لموقعك ، والتي تم إنشاؤها من Markdown أو ملف HTML.

ولكن هناك المزيد من الملفات / المجلدات التي يمكن استخدامها لتخصيص موقع Jekyll الخاص بك. تتضمن هذه المجلدات:

• _includes: دليل يحتوي على مقتطفات HTML قابلة لإعادة الاستخدام يمكن تضمينها في تخطيطاتك وصفحاتك. مثل نافبار ، تذييل ، إلخ
• _layouts: دليل يحتوي على قوالب تخطيط HTML تحدد بنية صفحاتك.
• الأصول: دليل يحتوي على أي ملفات يستخدمها موقعك ، مثل الصور وملفات CSS.
• _sass: دليل يحتوي على ملفات Sass يمكن استخدامها لإنشاء CSS لموقعك.

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

خيار البدء السريع: استخدم نموذج GitHub الخاص بنا

كبديل لبدء مشروعك باستخدام Jekyll CLI ، يمكنك إنشاء مستودع Git باستخدام نموذج Kinsta "Hello World" Jekyll على GitHub. حدد استخدام هذا القالب > إنشاء مستودع جديد لنسخ رمز البداية إلى مستودع جديد داخل حساب GitHub الخاص بك.

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

لديك الآن موقع Jekyll ، ولكن كيف يمكنك معاينة موقع الويب لترى كيف يبدو قبل أن تبدأ في تخصيصه ليناسب احتياجاتك؟ افتح Terminal وانتقل إلى دليل مشروعك ، ثم قم بتشغيل الأمر التالي:

 jekyll serve

سيؤدي هذا إلى إنشاء مجلد موقع يتضمن جميع الملفات الثابتة التي تم إنشاؤها من مشروعك. سيبدأ أيضًا خادم Jekyll ، ويمكنك معاينة موقعك عبر http: // localhost: 4000 .

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

كيفية تخصيص موقع Jekyll

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

كيف تعمل الجبهة في جيكل

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

إنه تنسيق بيانات وصفية مستخدم في Jekyll ، لتخزين المعلومات حول صفحة أو منشور - يمكن كتابته إما في YAML أو JSON.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

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

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

كيفية تكوين الافتراضات الأمامية

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

الطريقة التي تم تنظيمها بها معقدة بعض الشيء ، لكن هذا هو الشكل الذي ستبدو عليه. الصق هذا أسفل التكوين الأخير في ملف _config.yml الخاص بك:

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

عند تشغيل أمر jekyll serve الآن ، ستلاحظ أنه حتى عندما لا تحدد التخطيط والمؤلف في كل منشور ، فلا يزال بإمكانك الوصول إليهم داخل ملفاتك.

ملاحظة: عندما لا تحدد مسارًا ، ستستخدم جميع الملفات قيم المادة الأمامية المحددة.

إنشاء الصفحات في Jekyll

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

على سبيل المثال ، إذا كنت تريد إنشاء صفحة بعنوان URL https://example.com/about ، فقم بإنشاء ملف باسم about.htm l أو about.md . يحدد امتداد الملف لغة الترميز المراد استخدامها لمحتوى الصفحة (HTML أو Markdown).

بمجرد إنشاء ملف ، أضف المقدمة والمحتوى المناسبين. احفظ الملف وقم بتحديث موقع Jekyll الخاص بك في المستعرض. يجب الآن الوصول إلى الصفحة الجديدة على عنوان URL المقابل لاسم الملف.

إنشاء تخطيطات في Jekyll

يمكنك استخدام التخطيطات لتحديد هيكل وتصميم صفحات ومنشورات موقعك. عادة ما يتم ذلك بشكل رئيسي باستخدام كود HTML. يمكنك تضمين رأس ، تذييل ، معلومات وصفية مع البيانات الوصفية للصفحة.

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

من الأفضل تحديد الهيكل العام لتخطيطاتك باستخدام HTML أو لغة ترميز أخرى.

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

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

في هذا المثال ، سيتم استبدال العناصر النائبة {{ page.title }} و {{ content }} بالعنوان الفعلي ومحتوى الصفحة التي يتم عرضها.

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

كيف يعمل المجلد _includes في Jekyll

يحتوي المجلد _includes على مقتطفات من التعليمات البرمجية التي يمكن إعادة استخدامها والتي يمكنك تضمينها في أجزاء مختلفة من موقع الويب الخاص بك. على سبيل المثال ، يمكنك إنشاء ملف navbar.html في مجلد التضمين الخاص بك وإضافته إلى ملف تخطيط page.html الخاص بك باستخدام العلامة {% include %} .

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

في وقت الإنشاء ، ستستبدل Jekyll العلامة بمحتوى navbar.html .

يمكن أن يحتوي المجلد _includes على أي نوع من الملفات ، مثل ملفات HTML أو Markdown أو Liquid. الهدف الأساسي هو الحفاظ على الكود الخاص بك جافًا (لا تكرر نفسك) من خلال السماح لك بإعادة استخدام الكود عبر موقعك.

التكرار من خلال المشاركات في Jekyll

قد ترغب في إنشاء صفحة مدونة مخصصة لاحتواء جميع منشورات المدونة الخاصة بك ، وهذا يعني أنك تريد جلب جميع المنشورات على موقعك وتكرارها. من السهل تحقيق Jekyll باستخدام علامة {% for %} .

يتم تخزين جميع المنشورات على أي موقع ويب Jekyll في متغير site.posts . يمكنك تكرار واستخدام المتغير السائل {{ post.title }} لإخراج عنوان كل مشاركة بهذه الطريقة:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

يمكنك أيضًا استخدام متغيرات Liquid إضافية لإخراج معلومات أخرى حول كل منشور ، مثل تاريخ المنشور أو مؤلفه:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

لاحظ أنه في المثال أعلاه ، يقوم المرشح السائل بتنسيق تاريخ كل منشور بتنسيق أكثر قابلية للقراءة.

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

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

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

بالنسبة لهذه المقالة ، ستقوم بتثبيت سمة مدونة وتخصيصها لنشر موقع مدونة على Kinsta. هذا موضوع قائم على النوع ويمكنك الوصول إلى كود المصدر والتعليمات على GitHub.

لإضافة سمة تستند إلى الأحجار الكريمة ، افتح ملف Gemfile لموقعك وأضف جوهرة السمة التي تريد استخدامها. الموضوع الذي سنستخدمه هو مدونة jekyll-theme-clean-blog . يمكنك استبدال سمة الحدود الدنيا الافتراضية في Gemfile:

 gem "jekyll-theme-clean-blog"

قم بتشغيل أمر bundle install في دليل موقعك لتثبيت جوهرة القالب وتبعياته.

في ملف _config.yml الخاص بموقعك ، أضف السطر التالي لتحديد السمة التي تريد استخدامها:

 theme: jekyll-theme-clean-blog

في هذه المرحلة ، يكون موضوعك جاهزًا للاستخدام.

ستحتاج إلى إزالة جميع التنسيقات في دليل _layouts لتجنب تجاوزها لتخطيط السمة.

يمكنك بعد ذلك العثور على أسماء التخطيطات لملفاتك في وثائق النسق. على سبيل المثال ، إذا كنت تستخدم سمة jekyll-theme-clean-blog ، فإن أسماء التخطيط لملف index.html هي الصفحة الرئيسية ، والصفحات الأخرى هي الصفحة ، وجميع المنشورات عبارة عن منشور .

أخيرًا ، تشغيل jekyll serve على بناء موقعك وتقديمه باستخدام السمة الجديدة.

هذا كل شيء! يجب أن يستخدم موقع Jekyll الخاص بك الآن المظهر الجديد المستند إلى الأحجار الكريمة الذي أضفته. يمكنك تخصيص السمة بشكل أكبر عن طريق تعديل تخطيطها في أدلة التخطيطات الخاصة بموقعك.

تخصيص سمة Jekyll

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

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

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

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

افعل هذا لجميع الصفحات والمنشورات وستظهر صفحتك على النحو التالي:

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

توجد روابط التنقل في ملف navbar.html الخاص بالمجلد _includes. يمكنك إنشاء هذا الملف ، ولصق الكود من شفرة المصدر الخاصة بك ، وإزالة خيار الاتصال أو إضافة أي خيار جديد تريده.

عند حفظ مشروعك ، ستلاحظ أنه سيتم تخصيص خيارات التنقل:

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

قم بإنشاء ملف ، posts.html والصق الكود التالي:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

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

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

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

يتم تخزين كل المحتويات في مجلد _posts. يتم تخزين كل محتوى في ملف باستخدام اصطلاح تسمية مشابه لـ YYYY-MM-DD-title.md (أو .html لملفات HTML). على سبيل المثال ، إذا كنت تريد إنشاء منشور باسم "مشاركتي الأولى" ، فأنشئ 2023-03-08-my-first-post.md في دليل _posts .

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

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

ثم يمكنك إضافة المحتوى الخاص بك أسفل كتلة المادة الأمامية باستخدام علامات HTML أو بناء الجملة الشكلي.

احفظ الملف ، وسيقوم Jekyll تلقائيًا ببنائه وإدراجه في موقعك.

كيفية نشر موقع Jekyll الخاص بك على Kinsta

Kinsta عبارة عن منصة سحابية تتيح لك استضافة مواقع ويب ثابتة ، بما في ذلك Jekyll. يمكن القيام بذلك عن طريق إعداد بعض التكوينات ، ودفع أكوادك إلى GitHub ، ثم النشر أخيرًا إلى Kinsta.

المتطلبات الأساسية: تكوين موقع Jekyll الخاص بك

تحقق من ملف Gemfile.lock وتأكد من أنه يتضمن نظامًا أساسيًا لجميع الأجهزة. للتأكد من تكوين جميع الأنظمة الأساسية بشكل صحيح ، قم بتشغيل الأمر التالي:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

ثم يمكنك المتابعة لإنشاء ملف Procfile - يحدد هذا الملف الأوامر التي يتم تنفيذها عند نشر موقعك. يقوم هذا الملف تلقائيًا بتحديث الأوامر المراد تنفيذها في علامة التبويب "العملية" في MyKinsta. هذا هو الأمر الذي يجب إضافته إلى ملف Procfile الخاص بك:

 web: bundle exec jekyll build && ruby -run -e httpd _site

ادفع موقع Jekyll الخاص بك إلى GitHub

في هذه المقالة ، دعنا نستخدم أوامر Git لدفع أكوادك إلى GitHub. أولاً ، قم بإنشاء مستودع على GitHub ؛ سيتيح لك هذا الوصول إلى عنوان URL الخاص بالمستودع.

يمكنك الآن تهيئة مستودع Git محلي عن طريق فتح الجهاز الطرفي ، والانتقال إلى الدليل الذي يحتوي على مشروعك ، وتشغيل الأمر التالي:

 git init

أضف الآن الكود الخاص بك إلى مستودع Git المحلي باستخدام الأمر التالي:

 git add

يمكنك الآن تنفيذ تغييراتك باستخدام الأمر التالي:

 git commit -m "my first commit"

ملاحظة: يمكنك استبدال "أول التزام لي" برسالة موجزة تصف تغييراتك.

أخيرًا ، ادفع الكود الخاص بك إلى GitHub باستخدام الأوامر التالية:

 git remote add origin [repository URL] git push -u origin master

ملاحظة: تأكد من استبدال "[عنوان URL للمستودع]" بعنوان URL الخاص بمستودع GitHub.

بمجرد الانتهاء من هذه الخطوات ، سيتم دفع التعليمات البرمجية الخاصة بك إلى GitHub ويمكن الوصول إليها من خلال عنوان URL للمستودع الخاص بك. يمكنك الآن النشر في Kinsta!

نشر موقع Jekyll الخاص بك في Kinsta

يتم النشر في Kinsta في غضون دقائق فقط. ابدأ من لوحة معلومات My Kinsta لتسجيل الدخول أو إنشاء حسابك. بعد ذلك ، سوف تفوض Kinsta على GitHub.

يمكنك بعد ذلك اتباع هذه الخطوات لنشر موقع Jekyll الخاص بك:

1. انقر فوق التطبيقات على الشريط الجانبي الأيسر
2. انقر فوق إضافة خدمة
3. انقر فوق التطبيق من القائمة المنسدلة

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

يمكنك بعد ذلك تعيين اسم لهذا التطبيق. حدد موقعًا لمركز البيانات من بين 25 موقعًا متاحًا ، ثم سيقوم Procfile تلقائيًا بتزويد أمر عملية الويب.

سيبدأ تطبيقك في النشر. في غضون بضع دقائق ، سيتم توفير رابط للوصول إلى الإصدار المنشور من موقع الويب الخاص بك. في هذه الحالة يكون: https://myblog-84b54.kinsta.app/

ملخص

لقد تعلمت حتى الآن كيفية عمل Jekyll والتخصيصات المختلفة التي يمكنك القيام بها مع Jekyll. من الآمن الآن الموافقة على أن Jekyll هي أداة ممتازة لإنشاء مواقع ويب ثابتة نظرًا لبساطتها ومرونتها وميزاتها القوية.

يسهّل نظام Jekyll للقوالب البديهية والقوالب السائلة والدعم المدمج للترميز ولغات الترميز الأخرى إنشاء مواقع غنية بالمحتوى وإدارتها بسرعة.

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

ما هو رأيك في Jekyll؟ هل استخدمت Jekyll لبناء أي شيء؟ لا تتردد في مشاركة مشاريعك وخبراتك معنا في قسم التعليقات أدناه.