البحث في الموقع

يُستخدَم Hexo، وهو إطار عمل للتدوين الثابت (Static) مبنيّ على Node.js، لنشر تدوينات مكتوبة في مستندات Markdown. تُعالَج التدوينات ثم تُحوَّل إلى HTML/CSS انطلاقا من قوالب معدَّة لهذا الغرض (تماما كما تفعل بقية مُولّدات المحتوى الثابت مثل Jekyll و Ghost). يعمل Hexo على هيئة وِحدات (Modules) يمكن ثبيتها وإعدادها حسب الحاجة. سنعدّ في هذا المقال Hexo اعتمادا على خادوم ويب Nginx ومنصة GitHub. المتطلبات في ما يلي قائمة بما ستحتاجه لإنجاز هذا الدرس: خادوم أوبنتو 14.04 مع حساب ذي صلاحيات إدارية غير المستخدم الجذر. يمكنك إعداد حساب بالمواصفات المطلوبة باتباع خطوات درس الإعداد الابتدائي لخادوم أوبنتو. تثبيت Git على خادوم أوبنتو وإعداده. يشرح درس تنصيب وإعداد Git و gitolite للتحكم في الإصدارات على أوبنتو الكيفية. تثبيت Node.js على خادوم أوبنتو. تثبيت Nginx على خادوم أوبنتو. حساب على GitHub الذي هو مستودع Git. تأكد من أن المتطلبات مثبتة ومضبوطة ثم انتقل إلى خطوات تثبيت Hexo وإعداده. الخطوة الأولى: تثبيت Hexo وبدء تشغيله تتضمن هذه الفقرة كل ما عليك فعله لتثبيت Hexo وجعله يعمل على خادومك. ابدأ أولا بتحديث الحزم: sudo apt-get update && sudo apt-get upgrade يتكوّن Hexo من الكثير من العناصر والحزم البرمجية. سنجلب اثنتين من الحزم الأكثر أهمية في Hexo باستخدام مدير الاعتمادات npm. العنصر الأول والأهم هو hexo-cli، يوفر أوامر Hexo الأساسية : npm install hexo-cli -g ثم نأتي للعنصر الثاني hexo-server وهو خادوم مضمَّن يمكن استخدامه للعرض المسبق للتدوينات واختبارها قبل النشر: npm install hexo-server -g تتوفر الكثير من الحزم الأخرى لـHexo، إلا أن الحزمتين أعلاه هما الأساس الذي لا يُستغنى عنه لإطلاق مدونة باستخدام Hexo. يمكن أن تستعرض الحزم الأخرى المكونة لإطار عمل Hexo بخاصية البحث في npm. نحتاج الآن لقاعدة ملفات لبناء مدونتنا عليها. يُوفِّر Hexo أمر init لهذا الغرض، كل ما عليك فعله هو تمرير المسار أو المجلد الذي تريد استخدامه لملفات إعداد المدونة إلى الأمر: hexo init ~/hexo_blog يستغرق اﻷمر بضع ثوان حسب سرعة الاتصال لديك: INFO Copying data to ~/hexo_blog INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo! . . . ننتقل إلى المجلد المستخدَم في الأمر السابق: cd ~/hexo_blog ثم ننفذ أمر التثبيت التالي: npm install يمكنك تجاهل التحذيرات الاختيارية (WARN notsup). نحصُل بعد انتهاء تنفيذ الأمر على ملفات الإعداد الأساسية. الخطوة الثانية: ضبط ملف الإعداد الأساسي في Hexo نسرُد محتويات مجلد المشروع: ls -l تظهر مخرجات على النحو التالي: -rw-rw-r-- 1 zeine77 zeine77 1483 Feb 17 15:48 _config.yml drwxrwxr-x 201 zeine77 zeine77 36864 Feb 17 15:53 node_modules -rw-rw-r-- 1 zeine77 zeine77 442 Feb 17 15:48 package.json drwxrwxr-x 2 zeine77 zeine77 4096 Feb 17 15:45 scaffolds drwxrwxr-x 3 zeine77 zeine77 4096 Feb 17 15:45 source drwxrwxr-x 3 zeine77 zeine77 4096 Feb 17 15:45 themes يعدّ الملف config.yml_ أهم هذه الملفات إذ تخزَّن به إعدادات نواة Hexo. إن احتجت مستقبلا لإجراء تعديلات على المدونة فعلى الأرجح سيكون ذلك من خلال هذا الملف. نفتح الملف لإجراء تخصيصات على البرنامج: nano _config.yml توجد في أعلى الملف فقرة معنونة بـSite (الموقع): # Site title: Hexo subtitle: description: author: John Doe language: timezone: يوجد في الأسطر الأربعة الأولى اسم المدونة، عنوان فرعي لها، وصف واسم صاحب المدونة. لديك كامل الحرية في اختيار ما يناسب لهذه الأسطر. انتبه إلى أن بعض قوالب Hexo لا تعرض كامل هذه المعلومات. يمكن اعتباره هذه الفقرة بيانات وصفية للمدونة. الخياران المواليان يمثلان اللغة والمنطقة الزمنية. تأخذ اللغة قيمة عبارة عن حرفين يرمزان للغة وفق معيار ISO-639-1. يُضبط الوقت مبدئيا على المنطقة الزمنية للخادوم ويستخدم صيغة قاعدة بيانات tz. إن قررت التعديل على إحدى المعطيين فتأكد أن القيمة وفق الصيغة المطلوبة. في ما يلي مثال على ملف الإعداد: #Site title: مدونة أكاديمية حسوب subtitle: مدونة تقنية تستخدم Hexo description: مثال على استخدام Hexo لإنشاء مدونة author: أكاديمية حسوب language: ar timezone: Africa/Nouakchott تضبط الفقرة الموالية إعدادات الروابط. يمكن استخدام عنوان IP قيمةً لمعطى url إن لم يكن لديك نطاق خاص. # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://127.0.0.1 root: / permalink: :year/:month/:day/:title/ permalink_defaults: خيار آخر نودّ تغييره في ملف الإعداد وهو default_layout ضمن فقرة Writing إلى الأسفل قليلا. نحدد القيمة draft للمعطى. يعني هذا أن المنشورات الجديدة تُنشأ على هيئة مسودات يجب نشرها حتى تكون مرئية على المدونة. # Writing new_post_name: :title.md # File name of new posts default_layout: draft titlecase: false # Transform title into titlecase احفظ الملف ثم أغلقه. سنعود إليه لاحقا عندما نبدأ بالنشر. الخطوة الثالثة: كتابة تدوينة جديدة ونشرها تبدأ عملية نشر تدوينة (أو مسودة كما أسميناها في الإعداد أعلاه) بتنفيذ الأمر التالي، حيث أول-تدوينة هو اسم التدوينة التي تريد إنشاءها: hexo new أول-تدوينة تظهر الرسالة التالي في سطر الأوامر: INFO Created: ~/hexo_blog/source/_drafts/أول-تدوينة.md نفتح الملف لتحرير أول تدويناتنا: nano ~/hexo_blog/source/_drafts/أول-تدوينة.md يجب أن تحوي كل تدوينة على جبهة أمامية Front-matter، وهي كتلة تعليمات قصيرة مكتوبة بـJSON أو YAML لضبط إعدادات مثل عنوان التدوينة، تاريخ النشر، الوسوم Tags ومعلومات من هذا القبيل. تُعلَّم نهاية الجبهة الأمامية بعلامة --- أو ;;;. تمكن كتابة منشور المدونة بعد الجبهة الأمامية باستخدام صيغة Markdown. أبدل المحتوى المبدئي لملف "md.أول-تدوينة" بالمحتوى التالي: title: أول تدوينة في مدونة أكاديمية حسوب tags: - حسوب - مدونة categories: - إعلانات comments: true date: 2016-02-18 09:30:00 --- ## هنا تكتب تعليمات ماركداون **هذه هي تدوينتنا الأولى!** نص التدوينة الأولى احفظ الملف ثم أغلقه. سيبقى ملف ماركداون الذي أنشأناه للتو في مجلد hexo_blog/source/_drafts/~ إلى أن ننشره. كل الملفات الموجودة في هذا الملف غير مرئية لزوار المدونة. ننشر التدوينة لتتاح للزوار hexo publish first-post تظهر الرسالة التالية: INFO Published: ~/hexo_blog/source/_posts/أول-تدوينة.md سيصبح بالإمكان رؤية المنشور فور نشر المدونة. الخطوة الرابعة: تشغيل خادوم الاختبار أكملنا في الخطوات السابقة إعداد الخادوم، ونشرنا أول تدوينة. سنشغّل خادوم الاختبار لرؤية النتيجة: hexo server يمكن الآن رؤية المدونة بزيارة http://your_server_ip:4000 حيث your_server_ip عنوان IP الموقع. سيظهر لديك منشور Hello World المعرَّف مسبقا، إضافة للمنشور الذي كتبناه للتو. اضغط على الزرين CTRL+C لإيقاف خادوم الاختبار. يُستخدم خادوم الاختبار لعرض التغييرات والإضافات إلى المدونة، ثم يأتي وقت نشر المدونة على الشبكة بعد أن تنتهي من التعديلات. الخطو الخامسة: إعداد Git لنشر المدونة توجد وسائل عدة لنشر ما أعدنناه على Hexo. المقاربة المختارة في هذا الدرس هي استخدام Git لتخزين الملفات الثابتة، الخطافات Hooks لتوجيهها وNginx لتقديمها. تتيح حزم في Hexo الدعم لـ Heroku ،Rsync ،OpenShift وغيرها. سنحتاج لمستودع Git نخزّن فيه ملفات HTML التي يولّدها Hexo. سنستخدم مستودعا عموميا على GitHub لتسهيل الأمور. أنشئ مستودعا جديدا على GitHub باسم hexo_static أو أي اسم آخر تراه مناسبا، مع التأكد من أن المستودع عمومي (خيار Public). حدّد مربع Initialize this repository with a README لإضافة ملف README تلقائيا إلى المستودع. افتح ملف الإعداد الرئيسي لـHexo من أجل تحريره: nano _config.yml توجد في أسفل الملف فقرة معنونة بـDeployment: # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: حدّد خيارات النشر كما في المثال أدناه. يحيل رابط URL إلى المستودع الذي أنشأته للتو؛ لذا تأكد من وضع اسم حسابك في GitHub مكان your_github_username. أبدل كذلك اسم المستودع إن كنت اخترت اسما مغايرا. deploy: type: git repo: https://github.com/your_github_username/hexo_static.git branch: master احفظ الملف ثم أغلقه. بما أننا اخترنا النشر عن طريق Git فسنحتاج لحزمة Hexo التي ترسل الملفات الثابتة التي يولدها إلى مستودع Git. استخدم npm لتثبيتها: npm install hexo-deployer-git --save يمكنك الآن تجربة إرسال الملفات إلى مستودع hexo_static وإضافة أول إيداع بواسطة Hexo: hexo generate && hexo deploy أدخل معلومات الاستيثاق في GitHub عندما تطلب منك لبدء نقل الملفات. تبدو نتيجة تنفيذ الأمرين السابقين بعد نجاحه على النحو التالي: To https://github.com/username/hexo_static.git. * [new branch] master -> master Branch master set up to track remote branch master from https://github.com/username/hexo_static.git. INFO Deploy done: git الخطوة السادسة: إعداد Nginx يتميّز خادوم ويب Nginx في تقديم الملفات الثابتة للزوار، وهو ما يجعله اختيارا مناسبا لمدونتنا. نبدأ بإعداد Nginx لتقديم المدونة للزوار. ننشئ أولا مجلدات النظام التي سنطلب من Nginx استخدامها: sudo mkdir -p /var/www/hexo ثم نعطي للحساب الذي نستخدمه على أوبنتو ملكيةَ المجلد: sudo chown -R $USER:$USER /var/www/hexo نعدّل أذون المجلد على النحو التالي: sudo chmod -R 755 /var/www/hexo نفتح ملف الإعداد المبدئي لـNginx لتحريره: sudo nano /etc/nginx/sites-available/default نعدّل كلتة server في ملف الإعداد بحيث يصبح جذر المستند Document root يشير إلى المجلد الذي أنشأناه للتو: server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; root /var/www/hexo; index index.html index.htm; احفظ الملف ثم أغلقه. يمكنك عند الحصول على اسم نطاق للمدونة تحرير هذا الملف وتحديد قيمة server_name بحيث تصبح اسمَ نطاقك. نعيد تشغيل Nginx لاعتماد التعديلات: sudo service nginx restart الخطوة السابعة: إنشاء خطافات Hooks في Git سنربط في هذه الخطوة مستودع hexo_static بمستودع Git آخر لنرسل عبره ملفات HTML إلى مجلد خادوم الويب. نبدأ بإنشاء مستودع Git فارغ الهدف منه توجيه محتوى المستودع hexo_static إلى مجلد خادوم الويب: git init --bare ~/hexo_bare أنشئ ملف خطاف جديدا داخل مجلد خطافات Git: nano ~/hexo_bare/hooks/post-receive أضف السطرين التاليين إلى الملف. نحدّد في الملف شجرة عمل Git التي تحوي الشفرة المصدرية ومجلد Git الذي يحوي الإعدادات، السجل وأمورا أخرى: #!/bin/bash git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f احفظ الملف ثم أغلقه. اجعل الملف post-receive قابلا للتنفيذ: chmod +x ~/hexo_bare/hooks/post-receive سنحتاج الآن لنسخ مستودع النشر hexo_static الذي أنشأناه في الخطوة الخامسة إلى الخادوم. تأكد من إبدال username في الأمر أدناه باسم حسابك في GitHub. git clone https://github.com/username/hexo_static.git ~/hexo_static انتقل إلى المجلد hexo_static: cd ~/hexo_static نضيف مستودع hexo_bare السابق على أنه مستودع بعيد باسم live: git remote add live ~/hexo_bare الخطوة الثامنة: إنشاء سكربت النشر يمكن باستخدام سكربت Shell قصير بدء كامل عملية النشر السابقة بدلا من أدائها يدويا. يعني هذا أننا لن نحتاج إلى تنفيذ أوامر Hexo الواحدة تلو الأخرى أو تشغيل خطّاف Git بأوامر متعدّدة. نعود إلى مجلد مدونة Hexo وننشء فيه ملفا للسكربت: cd ~/hexo_blog nano hexo_git_deploy.sh ألصق الشفرة التالية في الملف: #!/bin/bash hexo clean hexo generate hexo deploy ( cd ~/hexo_static ; git pull ; git push live master ) احفظ الملف ثم أغلقه. ينفذ السكربت أوامر Hexo التالية: أمر clean الذي يحذف الملفات المولَّدة سابقا من مجلد public. أمر generate الذي يولّد ملفات HTML انطلاقا من ملفات ماركداون ويضعها في مجلد public. أمر deploy الذي يُرسِل الملفات الموجودة في المجلد public إلى مستودع Git الذي عرّفناه سابقا في ملف الإعداد config.yml_. يشغّل السطر الأخير (cd ~/hexo_static ; git pull ; git push live master) خطاف Git ويحدّث مجلد المدونة على خادوم الويب بوضع ملفات HTML فيه. نجعل سكربت النشر قابلا للتنفيذ: chmod +x hexo_git_deploy.sh الخطوة التاسعة: تنفيذ سكربت النشر نفذ سكربت النشر السابق لاختبار كامل العملية: ./hexo_git_deploy.sh ستُطلب منك معلومات الاستيثاق أثناء إيداع الملفات في مستودع GitHub. انتظر اكتمال العملية ثم ألق نظرة على الملفات في المجلد var/www/hexo/: ls /var/www/hexo النتيجة: 2016 archives categories css fancybox index.html js tags تُظهر نتيجة الأمر أعلاه أن الملفات التي أنشأها Hexo نُقلت إلى مجلد خادوم الويب، يعني هذا أن بإمكانك تصفح المدونة بالذهاب إلى عنوان الخادوم http://your_server_ip/. يكفي تنفيذ السكربت hexo_git_deploy.sh مستقبلا لنشر التعديلات أو الإضافات على المدونة. تذكر أن تختبر التغييرات على خادوم Hexo الاختباري قبل نشرها. الخطوة العاشرة: اكتشاف نظام ملفات Hexo (اختيارية) يعتمد Hexo على ملفات للعمل عليها. ليس من الضروري تعديل هذه الملفات إلا أنه سيكون من الجيد معرفة دور كل واحد منها في نظام الملفات التابع لـHexo، فربما تحتاج لاستخدامه. يبدو مخطَّط الملفات والمجلدات على النحو التالي: ├── _config.yml ├── node_modules ├── package.json ├── scaffolds ├── source | └── _posts └── themes مجلد node_modules يخزّن Hexo في هذا المجلّد الوحدات التي تنزّلها بـ npm لاستخدامها في المدونة. بنهاية هذا الدرس لن توجد في هذا المجلد سوى الحزم التي نزلناها في الخطوة الأولى أو الحزم التي تأتي مضمَّنة في Hexo. على العموم لن تحتاج للتعديل على هذا المجلد. مجلد package.json يحوي ملف JSON هذا الإعدادات والإصدارات التي يستخدمها Hexo. الجأ لهذا الملف إن احتجت لتحديث الحزم يدويا، إرجاعها إلى إصدار أقدم Downgrade أو حذفها. لن تحتاج لتعديل هذا الملف على الأرجح إلا إذا حدث تعارض بين حزم Hexo وهو أمر غير شائع. مجلد scaffolds يستخدم Hexo القوالب الموجودة في هذا المجلد ليصيغ التدوينات وفقا لها. تأتي ثلاثة قوالب مبدئيا في الملف وهي draft (مسودة)، post (منشور) و page (صفحة). إن أردت استخدام قالب جديد فيجب وضعه هنا قبل الاستخدام. مجلد source توجد التدوينات المنشورة في مجلد فرعي من مجلد source، نفس الشيء ينطبق على المسودات. يوجد أغلب محتوى المدونة المكتوب بماركداون في هذا المجلد أو مجلد متفرع عنه. مجلد themes توضع قوالب المظهر Themes في هذا المجلد. تحوي أغلب القوالب على ملف config.yml_ خاص بها للاحتفاظ بإعدادات مخصّصة مثل تلك التي يعرّفها ملف الإعداد العام. استخدمنا خلال هذا الدليل القالب المبدئي في Hexo. خاتمة لم نتطرق في هذا الدرس للكثير مما يمكن تعلمه، إلا أنه يضع قاعدة متينة لإنشاء مدونة باستخدام Hexo. راجع التوثيق الرسمي لإطار العمل والذي يحوي الكثير من المعلومات الدقيقة إن أردت التعمق أكثر في البرنامج. الخطوة الموالية هي تخصيص المظهر ليناسب رغباتك في تطوير مدونة خاصة بك. ترجمة -وبتصرف- لمقال How to Create a Blog with Hexo On Ubuntu 14.04 لصاحبه C.J. Scarlett.

هُناك العديد مِن الخَدَمات التي توفر لك مُدوَنة خاصة بِك. لكن بالمُقابل يحتفظون بمحتواك ويستعملونه في ما يخدمهم. لعلّ الكثير من المدونين -قد تكون أنت منهم- يريدون الخروج من هذا القيْد، ويحبذّون إدارة محتواهم بأنفسهم والتحكم به على مَوْقِعهم الخاص. إن كنت كذلك، فتنصيبُ مُدَونة تَملِك أنتَ مُحتواها ومَفَاتيحَها يُعدُّ خيارًا أفضلَ بكثير. هذا مِن أحد فوائد إنتهاج أسلوب DIY (اختصار لـ Do It Yourself أو أقم شأنك بنفسك) حيث ستتكفل أنت بنفسك من خلال متابعة هذا الدرس، ببناء، نشر واستضافة مدونتك الخاصة والتحكم بزِمَام أمورها عِوضًا عن تفويض أمرها لأحد خدمات التدوين. وسنبدأ من خلال الجزء الأول من هذا الدرس بكيفية تنصيب، تعديل قالب يَرُوقُ لَك ونَشر مُدونة خاصة بك باستعمال Jekyll. فهرس الجزء الأول من هذا الدرس: التخطيط اختيار منصّة التعريف بـ Jekyll. إعداد بيئة التطوير الخاصة بك إنشاء تنسيقات المدونة (layouts) كتابة منشور على المدونة إنشاء صفحات قائمة بذاتها أوراق الأنماط المتتالية (CSS) باستخدام SASS البناء فوق إطار عمل الناتج النهائي (بالتقريب) لما ستتحصل عليه بعد متابعة كامل الدرس: يُكن أيضا معاينة الناتج النهائي مُباشرة من هنا. التخطيطما نفصده هنا من إنشاء مُدونة أمرٌ بسيطٌ للغاية، وحبّذا يكون شيئا يمكننا تحسينه وتمديد مزاياه مع مرور الوقت. أبسط ما يُمكن أن تكون عليه مُدونة هو مكانٌ لعرض قائمة المنشورات، صفحة لقراءة كل منشور، التعليقات، وطريقة ما لكتابة المنشورات. إلى جانب هذا، لا نُريد أن نقضي فيها الكثير من الوقت من أجل تنصيبها وإدارتها، لذلك فحبذا لو تكون قليلة الصيانة. اختيار منصةباعتبار متطلباتنا هذه، فقد ننظر في الخيارات الاعتيادية المتاحة أمامنا. Wordpress والتي يُفضلها الكثير، تُعتبر مِنصّة قوية يُصاحبها إضافات غزيرة. لكن تصميم وتطوير قالب خاص لها وتخصيصها قد يأخذ منك الكثير من الوقت. يمكننا اختيار قالب جاهز، فقد قمت بذلك مُسبقا، لكن وجدت نفسي عادة أقضي وقتا أطول في تخصيص القالب لأجعله في المظهر الذي يروق لي. زيادة على ذلك، فهي تحتاج إلى متابعة تحديثاتها (خاصة المتعلقة بالثغرات الخطيرة التي تلحق بها أو بأحد إضافاتها)، تنصيب قاعدة بيانات، وخادوم مُجهز بـ PHP، في حين قد لا نحتاج كل هذا من أجل مُدونة شخصية. Jekyll خيارٌ بمنظور آخر. مدونتي الشخصية تستعمل Jekyll وأنا على دراية بكيفية عمله. التعريف بـ JekyllJekyll جوهرة (Gem) من جواهر لغة البرمجة Ruby يلعب دور خادوم محلي على حاسوبك. وهو ذو "ذِهنِية مُدوناتية"، أي أنه مُوجَّه خِصّيصا للمساعدة في توليد مُدونة، وذلك عن طريق توليد مجموعة من ملفات HTML ثابتة يُمكن رفعها مباشرة واستضافتها في أي مكان. Jekyll أيضا مدعوم من طرف Github. إن كنت ممن يَسْتَودِعُ شِفرته البرمجية هناك، يُمكنك أيضا دفع شفرة موقع Jekyll خاصتك وسيقوم Github باستضافة موقعك هناك. إعداد بيئة التطوير الخاصة بكأول خطوة هي تنصيب Jekyll. إعدادات التنصيب تشرح الأساسيات، وإن كنت تستعمل Windows، يمكنك تنصيبه بهذه الطريقة. بعد تنصيب Jekyll، تحتاج إلى إحدى القوالب للبدء. مثلا قالب بداية Necolas، يمكنك تحميله عبر Git بكتابة هذا الأمر في سطر الأوامر: git clone git@github.com:necolas/jekyll-boilerplate.git YourFolderNameيمكن أيضا تحميل الشفرة النهائية لهذا الدرس من هنا. تنبيه: إن لم يعمل الأمر أعلاه، تأكد من أن Git منصّب على جهازك. غيّر "YourFolderName” بالاسم الذي تريده لمُجلّد العمل، سيقوم الأمر أعلاه بنسخ الشفرة البرمجية إلى مجلد العمل الجديد. يمكنك حينئذٍ تشغيل الأمرين التاليين، كلٌ على حِدى: cd YourFolderName jekyll serve –watchبتنفيذ الأمرين أعلاه، ستُخبر حاسوبك بالتنقل إلى مجلد العمل وتشغيل خادوم Jekyll هُناك.. يمكنك حينها تصفح العنوان التالي:localhost:4000 على متصفحك وسترى نسختك الخاصة من المدونة! إنشاء تنسيقات المدونة (layouts)ضمن مجلد المدونة خاصتك ستجد مجلدًا آخرَ باسم “layouts_”. بداخلهِ تجد كلا من ملفي default.html و post.html، هذين هما ملفا التنسيق المُستخدم لاحتواء مُحتوى موقعك. 1. لغة التوصيف Liquidيستعمل Jekyll لغة التوصيف Liquid (أو Liquid Markup) للقوالب، وهي طريقة بسيطة ولكن فعّالة لإضافة بعض من المنطق إلى ملفات التنسيق، كما تسمح لنا بإنشاء حلقات (loops) توّلد ملفات HTML ثابتة. عند إعداد نسق ما، فعادة ما أبدأ بضبط شفرة HTML التي يحتويها النسق أوّلا، ثم بتزيين التنسيق لاحقا. الخطوة الأولى هي إنشاء صفحة التنسيق العامة، ولهذا سنستعمل ملف default.html. ملف default.html يلعب دور حاوية لمُحتوى الصفحة. يمكنه احتواء أي شيء يتكرر في كل صفحة، مثل الرأسية (header)، القائمة الجانبية (sidebar) ومُحتوى التذييل (footer). كما أنه يحتوى على عنصر head التابع لـ HTML وجميع الوسوم الدلالية (meta tags) وملفات CSS التابعة له. داخل هذا الملف، يجب أن تجد تعليمة {{ content }}. وهي موضع محتوى كل صفحة. يُمكن أيضا تمرير متغيرات أخرى إلى النسق ثم فحصها على هذا النحو: <title> {% if page.title %} {{ page.title }} {% endif %} | blog.example.com </title>في هذه الحالة، يمكن لأي صفحة تعيين قيمة title الخاصة بها، ويمكن الوصول لهذه القيمة ضمن القالب عبر كائن page. 2. قالب المنشوراتبوجود حاوية للمحتوى، فإن الخطوة التالية هي إعداد قالب لمنشورات المدونة. ملف post.html يحتوي على شفرة HTML المستعملة في كل صفحة منشور. مُحتوى هذا الملف يتم وضعه تلقائيا مكان تعليمة {{ content }} في ملف التنسيق default.html. عند رأس ملف post.html ستجد نَصَّا مُمَاثلا لهذا: --- layout: default ---هذا الجزء من الملف يتم استعماله من قِبل Jekyll، واسمه frontmatter. وهو مكان يسمح لك بتعيين قِيَم مُتغيرات يُمكن استعمالها في القوالب. في مثالنا أعلاه، قمنا بتعيين متغير "layout" بقيمة "default". سيُخبر هذا Jekyll بمُعالجة الملف باستعمال ملف التنسيق default.html. إذا كانت لديك ملفات تنسيق أخرى، فإن تغيير القيمة هنا كفيل بأن يُعلم Jekyll باستعمال الملف المحدد في القيمة الجديدة. كتابة منشور على المدونةكل منشورات مدونة Jekyll يتم حفظها في مجلد "posts_". كتابة منشور جديد عبارة عن إنشاء ملف Markdown جديد ضمن هذا المجلد، اسم الملف نفسه يحدد تاريخ ووقت نشر الموضوع كذلك يُحدّد المسار اللطيف (slug) لعنوان المنشور على الويب (URL). من مزايا هذه الطريقة أنها تُغنيك عن استعمال أي نوع من قواعد البيانات لأن جميع منشوراتك محفوظة في ملفات نصية في مكان واحد. وهذا يُسَهّل من عملية النسخ الاحتياطي لهم، كما أنه يفتح المجال لتخصيص عملية النشر بطُرق مُثيرة للاهتمام، من ذلك مثلا النشر عن طريق Dropbox. لمُعاينة كيفية كتابة المنشورات، يمكنك البدء عن طريق إنشاء ملف جديد داخل مجلد "posts_": 2015-02-01-my-great-post.markdownمن المنوط بهذا المنشور أن يتم نشره يوم 27 فبراير 2015، وعنوانه على الويب سيكون شيئا مشابها لـ yourblog.com/my-great-post (يتغير هذا حسب قيمة permalink داخل ملف config.yml_ الخاص بك). بوجود هذا، يمكنك إضافة بعض المعلومات عن طريق زيادة متغيرات من نوع YAML frontmatter عند رأس ملف المنشور الجديد: --- layout: post title: "عنوان المنشور" description: "وصف المنشور" tags: [العديد, من, الوسوم] published: true ---سيُخبر هذا Jekyll باستعمال تنسيق قالب post.html وإضافة بعض من الوسوم الدلالية المفيدة للمنشور الجديد. بمُجرد وضع هذا، يُمكنك البدء في كتابة محتوى منشورك. حول MarkdownMarkdown تُعتبر أداة جميلة لتحويل تنسيق نصي مُتعارف عليه إلى HTML، وهي طريقة مشهورة لكتابة المحتوى دون الحاجة لإدخال عناصر ووسوم لغة HTML. والناتج هو طريقة سريعة وأكثر مقروئية لكتابة المحتوى بالمقارنة بالشفرة المَحْضَة لـ HTML. ستجد العديد من الأمثلة في توثيق الأداة في الرابط المشار إليه أعلاه. إنشاء صفحات قائمة بذاتهايُمكنك إنشاء صفحات قائمة بذاتها من أجل موقعك فقط عبر إنشاء ملفات HTML. إذا أضمنت مُحتوى نص الإعداد عند رأس الملف، يقوم Jekyll تلقائيا عندها بأخذ محتوى ملف HTML الجديد ووضعه ضمن القالب المناسب. لرؤية هذا، افتح ملف index.html. هذا الملف عبارة عن الصفحة الرئيسية للمدونة، وبالتالي فهو يحتوى على حلقة (loop) تدور حول جميع منشورات المدونة. يُمكنها احتواء أي محتوى HTML نريده. لاحظ نص frontmatter في أعلى الملف: --- layout: default title: "مدونتي الرائعة" bodyTag: home ---سيُخبر هذا Jekyll باستعمال default.html كملف تنسيق، وعرض العنوان كـ "مدونتي الرائعة". يمكنك إنشاء صفحات دون لاحقة .html ظاهر في مسار الويب خاصتها (URL). للقيام بذلك، يكفي إنشاء مجلد باسم الصفحة المرجوة، ووضع ملف index.html داخله. مثلا، يمكن إنشاء مجلد about ووضع ملف index.html داخله. سيكون عندها مسار الصفحة على الويب من الشكل: yoursite.com/about. أوراق الأنماط المتتالية (CSS) باستخدام SASSبوجود ملف التنسيق، فإن مدونتك تحتاج لبعض من التزيين باستخدام لغة "أوراق الأنماط المتتالية" أو CSS لجعلها تبدو في شكل أفضل. أُفضّل كتابة شفرة CSS باستخدام SASS مع Compass، قد تُفضّل أنت طريقة أخرى أو الطريقة الكلاسيكية لكتابة CSS. يُعتبر SASS طريقا بديلا لكتابة CSS حيث يزيد على تعبير اللغة بعض الميزات الإضافية مثل المتغيرات، الوظائف (functions أو mixins) كما يسمح لك بكتابة CSS دون الحاجة لكتابة الفاصلة المنقوطة (;) أو الأقواس المعقوفة {}. أما Compass فهو إطار عمل لـ SASS يجلب معه بعض الوظائف المفيدة (mixins) المُعرّفة مُسبقا لجعل كتابة شفرة CSS أسهل، مع إمكانية رصد تغيّرات الملفات تلقائيا لإعادة تجميعها. عند تشغيل Compass، سيقوم برصد مشروعك وتوليد ملفات CSS بناءًا على ما تقوم بكتابته في ملفات SASS. للقيام بذلك، يقوم Compass بالنظر في ملف تحت اسم config.rb ضمن ملفات مشروعك، هذا الأخير، يُخبر Compass عن مسار المجلدات التي تحتوي ملفات SASS، ومسار المجلد الذي تريده أن يحوي ملفات CSS الناتجة (المُولّدة). إن اخترت استعمال SASS مع Compass، ستحتاج أولا إلى تنصيب Compass، عندها يمكنك أن تجعله يَرصُد تغيرات ملفات SASS الخاصة بمشروعك. لتشغيل Compass وجعله يَرصُد ملفات مشروعك، يكفي التصفح إلى مجلد مشروعك ثم تنفيذ الأمر التالي: compass watchهناك عدة طرق ومعالجات لكتابة أو توليد ملفات CSS، أنت حرُّ في اختيار ما يناسبك أكثر أو ما اعتدت عليه. البناء فوق إطار عملعند بناء المدونة، احتجت للخروج بتصميم مُتجاوب وسهل التطوير. اختصارا للوقت، اخترت أن أستعمل إحدى أُطر عمل CSS الموجودة. في الواقع، يوجد العديد من أُطر عمل CSS متاحة على الخيار، كنت قد جربتُ سريعا بعضًا مِنهم، لكني توقفت عند إطار عمل Bootstrap. فهو إطار عمل واسع الانتشار وله مجتمع نشط ومحتوى غزير. بما أني أستعمل SASS لإدارة CSS خاصتي اخترت استعمالBootstrap SASS. بالنظر إلى مُجلد sass/vendor، ستجد ملف bootstrap.scss. هذا الملف بدوره يتم استراده من طرف ملف base.scss_ حتى يجلب فيه مُختلف أدوات ووظائف Bootstrap. بالإضافة للتنسيقات الإفتراضية الذي يأتي بها Bootstrap، فإنه يجلب معه أيضا نظام تنسيق شبكي ومُتجاوب (grid-based layout system) عند الشروع في تنصيب مدونتي، قمت باستعمال هذا الهيكل الشبكي والاستفادة منه لتحديد أعمدة المدونة على هذا النحو: <div class="container"> <section class="row"> <section class="col-md-8"> ... </section> <aside class="col-md-4"> ... </aside> </section> </div>نظام الأعمدة في Bootstrap يوفر 12 عمودًا، في المثال أعلاه، قمت بإعطاء 8 أعمدة كعرض للعُنصر <section> ثم 4 أعمدة كعرض لعنصر aside أما الحاوية التي بها سمة .row فهي لضمان أن كلا العنصرين التي تحويهما سيُحاذون بعضهما جنبا إلى جنب وأنّ أي محتوى إضافي يأتي بعدهما سيُدفع به إلى أسفلهما. دليل الشروع في البدء الخاص بـ Bootstrap يُعتبر مكانا جيدا للاطلاع على ما يُمكن لـ Bootstrap توفيره. في الجزء الثاني من هذا الدرس، سنتعرف على كيفية إضافة لمساتنا الخاصة ونشر المدونة على الويب. ترجمة -وبتصرف- للمقال Your Own Blog لصاحبه Donovan Hutchinson.

في الجزء الأول من هذا الدرس، قمنا بتغطية كيفية إعداد بيئة تطوير محلية خاصة بك، استعمال إطار عمل CSS وإنشاء منشورات للمدونة. في هذا الجزء سنضيف بعض اللمسات النهائية للصفحة الرئيسية، إضافة شيء من التفاعل، وأخيرًا، نشر المدونة على الويب. فهرس الجزء الثاني من هذا الدرس: مدى التقدّم لحد الآن التصفيح (pagination) التعليقات الأيقونات صفحة 404 المشاركة والشبكات الاجتماعية إحصائيات الزوار الخروج للعلن سَير عمل مُتواصل الناتج النهائي (بالتقريب) لما ستتحصل عليه بعد متابعة كامل الدرس: يُكن أيضا معاينة الناتج النهائي مُباشرة من هنا. مدى التقدم لحد الآنلتلخيص ما تم تغطيته لحد الآن، فيجدر بنا حاليا أن يكون لدينا مدونة Jekyll تشتغل بشكل جيد على حاسوبنا المحلي. مع تنسيق للصفحة الرئيسية، وتنسيق آخر خاص بصفحة المنشور، كذلك يجدر بنا أن نكون الآن قادرين على إنشاء منشور جديد وكتابة محتوى له. هذه المنشورات تُعرض على الصفحة الرئيسية، كلٌ له رابط يصل إلى صفحة المنشور الخاصة به. في ما يلي سنُحسن قليلا من الصفحة الرئيسية لإضافة التصفيح (pagination). التصفيح (pagination)يأتي Jekyll بآلية تصفيح بسيطة يُمكن استعمالها للتحكم بعدد المنشورات التي يجب عرضها على الصفحة الرئيسية في كل مرة. الخطوة الأولى لإضافة التصفيح هي زيادة خيار لملف config.yml_ بالشكل التالي: paginate: 5سيُخبر هذا Jekyll بعرض 5 منشورات فقط في كل مرة. قد تحتاج لإعادة تشغيل Jekyll من خلال سطر الأوامر خاصتك، وذلك عبر إيقافه (Ctrl+c) ثم إعادة تشغيله مُجَدَدًا عبر تنفيذ: Jekyll serve --watchكذلك سيُمرر خيار paginate بعض المعلومات الإضافية لقوالب Liquid التي تستعملها صفحاتنا. يمكننا الاستفادة من هذه المعلومات لإنشاء روابط "التالي" و "السابق" . افتح ملف index.html (الصفحة الرئيسية) وأضف الشفرة التالية في الموضع التي تريد أن تظهر فيه تلك الروابط: <!-- Pagination links --> <nav class="pagination"> {% if paginator.previous_page %} {% if paginator.previous_page == 1 %} <a href="/" class="previous">&laquo;</a> {% else %} <a href="/page" class="previous">&laquo;</a> {% endif %} {% endif %} {% if paginator.next_page %} <a href="/page" class="next ">&raquo;</a> {% endif %} </nav>آلية عمل الشفرة أعلاه بسيطة، فهي فقط تفحص عنصر التصفيح إن كان يحتوي على صفحة تالية أو سابقة، ثم إظهار روابط "السابق" أو "التالي" حسب نتيجة الفحص. يمكن استعمال الشفرة أعلاه في أي صفحة تريد أن تعرض فيها قائمة المنشورات. أما حلقة قائمة المنشورات فهي كالتالي: {% for post in paginator.posts %} ... شفرة قائمة المنشورات ... {% endfor %}باستعمال هذه الحلقة، يمكنك الوصول إلى معلومات المنشور عن طريق post.value حيث value عبارة عن أحد متغيرات frontmatter التي قمنا بتعيينها في أعلى ملف المنشور . مزيد من المعلومات حول Frontmatter. التعليقاتمنصات التدوين مثل Wordpress تأتي بنظام تعليقات ضمني، بما أن المدونة التي نعمل عليها عبارة عن صفحات HTML ثابتة، فليس لدينا هذه الخاصية. لكن هناك بعض الخدمات الرائعة التي تعتمد على Javascript. من أشهر الحلول، نظام تعليقات Disqus. فهو سهل التنصيب، ومُجهّز بأدوات إدارية كاملة للتحكم بالتعليقات، والأروع أنه مجاني. يكفي فقط زيارة موقع الخدمة والنقر على "Add Disqus to your site” ثم تسجيل موقعك. عند إتمام عملية التسجيل ستعطيك الخدمة قُصاصة لشفرة Javascript يمكنك وضعها في أي مكان تريد أن يظهر فيه نظام التعليقات في ملف posts.html، وانتهى الأمر. الأيقوناتإلى هنا، أنهينا الأمور المتعلقة بالمُحتوى وتنسيقه، وقد حان الوقت الآن للاعتناء ببعض التفاصيل الصغيرة التي تُبدي بها مدى اعتنائك بمُدونتك. من ذلك أيقونة المدونة favicon التي تَظهر بجانب العنوان على ألسنة المتصفح أو عند إضافة أحدهم موقعك لمُفضلته. عند إنشاء أيقونة favicon فيجب أن تأخذ في الحسبان أنها أيقونة صغيرة جدا، اختر شيئا يُبرز هوية المدونة، قد يكون ذلك شعار المُدونة أو أحد رُموزها. اسم ملف الأيقونة favicon.ico وهي ذو أبعاد 16 على 16 بكسل. يُمكنك البدء عن طريق إنشاء مُربع صغير على برنامج فوتوشوب أو محررك المُفضل. عادة، من السهل البدء بمُربع أكبر من 16 بكسل (أقترح 500 على 500 بكسل) ثم تصغيره لاحقا. بمُجرد تجميعك لصورة مُعينة، فإن أسرع طريقة لتوليد أيقونة favicon هي عبر رفع التصميم إلى موقع Iconifier. سيقوم الموقع بتصغير الملف المرفوع إلى 16 بكسل وتوليد ملف favicon.ico تلقائيا. ضع هذا الملف في جذر مُجلد مشروع مُدونتك. بعدها، أضف السطر التالي في قسم head لشفرة HTML خاصتك، سيُخبر المتصفح بمكان الأيقونة لجلبها: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">أيقونات أُخرى من مزايا موقع Iconifier أيضا أنه سيُولد لنا أيقونات أخرى، منها ما هو خاص بأجهزة Apple التي تظهر عند إضافة أحدهم موقعك لشاشة هاتفه مثلا. ستجد أن هناك العديد من أحجام الأيقونات لمختلف الاحتياجات مثل iPad، iPhone .. الخ، هذه الملفات توضع في جذر مُجلد المدونة. صفحة 404قُمنا بتغطية جميع الصفحات المهمة على المدونة لحد الآن، لكن هناك صفحة لا يجب نسيانها، إنها صفحة "صفحة غير موجودة"! يتم عرض هذه الصفحة عندما يكتب أحدهم عنوانا خاطئا على مدونتك أو في حال تم نقل المُحتوى إلى مكان آخر. هدف هذه الصفحة هو مساعدة الزائر وإعلامه أنه وقع على مكان ليس به مُحتوى، واقتراح أمكنة أخرى قد تُهمه أكثر. أنشئ ملفا باسم 404.html في جذر مجلد المدونة. سيقوم Jekyll تلقائيا بعرض هذه الصفحة عندما يزور أحدهم عنوانا خاطئًا. مُحتوى ملف 404.html من الشكل التالي: --- layout: default title: صفحة غير موجودة --- <article> <header id="404"> <h1>صفحة غير موجودة</h1> </header> <section class="entry"> <p>عفوا، لكن يبدو أن هذه الصفحة غير موجودة <a href="/">توجّه إلى الصفحة الرئيسية</a>. </p> </section> </article>بعضهم قد يختار وضع صفحات مَرِحَة أو مُضحكة، أنت حر في تعديل شفرة HTML أعلاه وتخصيصها بما يُناسبك. المُشاركة والشبكات الاجتماعيةيعتمد هذا على رغباتك، لكن قد تود وضع روابط لحساباتك على الشبكات الاجتماعية أو أزرار مشاركة المنشورات، إن كنت تريد كذلك، فقد تودّ الاعتماد على أحد الخدمات المتوفرة مُسبقا، من ذلك خدمة AddThis. سيُتيح لك موقع AddThis تخصيص أزرار الشبكات الاجتماعية وكيفية عرضها، ثم يعطيك قُصاصة شفرة Javascript لزرعها في موقعك، في هذه الحالة، يُمكنك وضعها في ملف default.html مثلا كي تظهر الأزرار في جميع أنحاء المُدونة! إحصائيات الزوارعادة قبل نشر أي موقع، أقوم بإضافة Google Analytics. فهي خدمة جيدة للاطلاع على نسبة الزوار، موقعهم الجغرافي ووقت الزيارة. ستساعدك الخدمة أيضا في معرفة أي من المنشورات لاقى رواجا. لاستعمال Google Analytics يكفي أن يكون لديك حساب Google عبر التسجيل بالموقع، ثم وضع قصاصة شفرة Javascript في قسم head أو في ذيل شفرة HTML. وضع شفرة Google Analytics في قسم head قد يُعيق عملية رسم الصفحة، لذلك أفضّل وضعها أسفل المحتوى، قبل غلق عنصر <body/> حتى يتسنّى للمتصفح تحميل المحتوى أولا وعرضه ثم تحميل Google Analytics تبعا. من المُحبذ أيضا وضع الشفرة في ملف default.html حتى تعمل خوارزمية التعقّب على جميع صفحات المُدونة. الخروج للعلنإذا وصلت لهذا الحد، فأنت مُستعد الآن للكشف عن مدونتك في العلن، ستحتاج -على الخيار- إلى اسم نطاق. إن لم تكن تملك أحدها، قد ترغب في شراء اسم نطاق من أحد مزودي أسماء النطاقات المعتمدين كـ name.com أو hover.com. بعد اختيار اسم نطاق، ستحتاج إلى مكان لتستضيف فيه المُدونة. بما أن Jekyll تم تطوير من طرف أحد مؤسسي موقع Github، يُمكنك استضافة مُدونة Jekyll مجانا على Github pages. و هو الخيار الذي سنعتمد عليه في درسنا هذا. قبل نشر مُدونتك على Github pages، ستحتاج إلى إنشاء ملف باسم CNAME. هذا الملف سيُخبر Github باسم النطاق الذي اخترته للمدونة أو اسم النطاق الفرعي على Github الذي تريده كعنوان ويب للمدونة. بمُجرد إنشاء هذا الملف ووضعه في جذر مجلد العمل، فأنت جاهز الآن لدفع مدونتك لاستضافة Github pages. دفع الملفات إلى Githubستحتاج إلى حساب بموقع Github، بعد تسجيلك في الموقع، أنقر على زر + ثم على خيار "New repository". إذا كانت هذه أول مرة تُنشئ فيها Github page، فإن أبسط طريقة هي أن تسمي مُستودعك (repository) باسم username.github.io حيث username هو اسم المستخدم لحسابك على github. ضع وصفا على الخيار، واترك خيار "public”، لن تحتاج بالضرورة إلى ملف Readme. سيقوم بعدها Github بعرض بعض الإرشادات حول كيفية دفع مشروعك، لكن قبل ذلك، أقترح أن تذهب أولا إلى مجلد مشروعك وحذف مُجلد .git الذي بداخله لمسح مُخلفات Git التي يمكن أن تكون عالقة هناك بسبب استعمالنا قالب بداية Necolas. يمكنك فعل ذلك مباشرة من الطرفية عبر تنفيذ الأمر التالي في مجلد العمل: rm -rf ./.gitيمكنك بعدها اتباع إرشادات Github الخاصة بإنشاء مستودع جديد (initialising new Git repository)، إضافة الخادوم البعيد (remote) للدفع إليه، ثم عمل إيداع. ستحتاج بعدها إلى إضافة جميع ملفات المشروع إلى مستدوع git عبر تنفيذ الأوامر التالية: git add --all git commit -am "Adding all the files" git push origin masterسيُضيف هذا جميع ملفاتك ويدفعها إلى خادوم Github. توجيه اسم النطاق إلى مدونتكبعد إنشاء مستودع Github، سنحتاج إلى توجيه اسم نطاقك إلى مكان استضافة المدونة. ستحتاج إلى إنشاء سِجِل (record) من صنف "A” عند مزود اسم النطاق الخاص بك. Github لديه دليل خاص بهذا لإرشادك حول كيفية ضبط إعدادات DNS. بعد توجيه اسم النطاق ستحتاج إلى مدة انتظار لا تتجاوز 48 ساعة (غالبا ما تكون ساعة أو ساعتين) لتتم عملية الربط بين استضافتك واسم نطاقك، بعدها سيكون لديك مُدونة على الهواء مُباشرة! سير عمل مُتواصلبمُجرد مواصلة عملك على المدونة، يكفي دفع التغيرات التي تجريها إلى Github وستظهر مباشرة على موقع المدونة. سير عمل git قد يحتاج منك بعض الوقت حتى تألفه وتعتاد عليه، لكنه يستحق ذلك. عند انتهائك من ضبط مدونتك وهيكلتها، إضافة منشور جديد ما هو إلا عبارة عن إضافة ملف جديد في مجلد posts_، إضافة معلومات frontmatter ، كتابة مُحتوىً رائع، ثم إضافة الملف الجديد في git ودفعه إلى Github! إلى هنا نصل إلى نهاية كامل الدرس، مُبارك عليك مدونة آمنة، ثابنة، سريعة، قليلة الصيانة، فقط ركزّ على المحتوى! ترجمة -وبتصرف- للمقال Your Own Blog لصاحبه Donovan Hutchinson.