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

هُناك العديد مِن الخَدَمات التي توفر لك مُدوَنة خاصة بِك. لكن بالمُقابل يحتفظون بمحتواك ويستعملونه في ما يخدمهم. لعلّ الكثير من المدونين -قد تكون أنت منهم- يريدون الخروج من هذا القيْد، ويحبذّون إدارة محتواهم بأنفسهم والتحكم به على مَوْقِعهم الخاص. إن كنت كذلك، فتنصيبُ مُدَونة تَملِك أنتَ مُحتواها ومَفَاتيحَها يُعدُّ خيارًا أفضلَ بكثير. هذا مِن أحد فوائد إنتهاج أسلوب 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.