مهدی صادقی

منتشر شده در شماره سه ماهنامه سلام‌دنیا -- این مقاله قسمت دوم راهنمای ساخت وبلاگ با جکیل و گیت‌هاب است که برای سلام‌دنیا نوشتم و اینجا با مقداری تغییرات منتشر می‌کنم.

در قسمت اول از این مقاله شرح دادیم که مزایای یک وبسایت ایستا در مقایسه با یک وبسایت پویا چیست و چه کاربردهایی دارد و دیگر اینکه ما می خواهیم با امکانات موجود در اینترنت و با حداقل هزینه وبسایت بسازیم. در قسمت قبلی در مورد گیت‌هاب صحبت کردیم و اینکه چگونه باید مخزن لازم برای وبسایتمان را آنجا بسازیم و چطور آنرا تغییر و برزورسانی کنیم و در نهایت وبسایت خودمان را تحت دامنه github.io منتشر کردیم. چیزهایی که تا اینجا کفتیم در حقیقت اسکلت اصلی وبسایت‌سازی با گیت‌هاب بود اما هنوز در مورد ابزار اصلی اینکار که Jekyll است صحبتی نکرده‌ایم بنابراین در این بخش به آن می‌پردازیم.

صفحات‌گیت‌هاب علاوه بر پشتیبانی از فایل‌های HTML عادی، از Jekyll که یک مولّد صفحات ایستا‍[^1] است نیز پیشتبانی می‌کند یعنی می‌تواند ازروی یک پروژه جکیل وبسایت بسازد. جکیل تمام امکانات لازم برای ساخت وب‌سایت‌ را به صورت آفلاین در اختیار شما می‌گذارد، امکاناتی از قبیل تولید هدر و فوتر برای تمامی صفحات وب‌سایت بدون نیاز به تکرار آنها در صفحات مختلف و نیز پیشتبیانی از چند زبان الگو[^2] جهت نوشتن قالب^3 ساخت. جکیل یک پروژه‌ی مستقل از گیت‌هاب است اما وب‌سرور صفحات گیت‌هاب قادر است پروژه‌های جکیل را بفهمد و آنها را به درستی نمایش بدهد.

نکته: در فاصله قسمت اول و این قسمت من وبسایت خودم را با جکیل کامل کردم و در ادامه مطلب از آن در مثال‌ها استفاده خواهم کرد. در صورتی که قصد ساخت یک وبلاگ یا وبسایت فارسی راست به چپ داشته باشید می‌توانید کدها و قالب‌های استفاده شده در مخزن آن را تغییر دهید و برای ساخت وبسایت خودتان از آن استفاده کنید.

برای شروع کار با جکیل پیش از هرچیز باید آنرا روی کامپیوترمان نصب کنیم. از جایی که جکیل با زبان برنامه‌نویسی روبی نوشته شده است،‌ لازم است که روبی هم روی دستگاه ما نصب باشد (ما به نصب روبی نمی‌پردازیم):

~ $ gem install jekyll

نکته: بسته به تنظیمات دستگاه شما ممکن است لازم باشد این دستور را با کاربر root اجرا کنید. بعد از اتمام این مرحله فرمانی بنام jekyll روی دستگاه ما نصب شده است و می‌توانیم از آن استفاده کنیم. لازم است توضیح بدهم که ما از این دستور جهت ایجاد ساختار اولیه یک وبسایت مبتنی بر جکیل و نیز مشاهده خروجی جکیل روی دستگاه خودمان استفاده می‌کنیم در حقیقت ما از این دستور فقط برای ساخت وبسایت استفاده می‌کنیم وگرنه گیت‌هاب قادر است کدهای جکیل را بفهمد.حال مخزنی را که قرار است کدهای وبسایت ما را در خودش نگهداری کند شبیه‌سازی می‌کنیم:

~ $ git clone https://github.com/mehdisadeghi/mehdix.ir
~ $ cd mehdix.ir
~/mehdix.ir $ git checkout -b gh-pages

به کمک دستورات بالا اول مخزن را روی دستگاهمان شبیه‌سازی کردیم (شرح آن در قسمت اول رفت) و بعد به شاخه gh-pages سوئیچ کردیم و حالا ساختار پروژه جکیل را در این مسیر ایجاد می‌کنیم:

~/mehdix.ir $ jekyll new . -- دقت کنید که نقطه جزوی از دستوراست به معنی مسیر جاری
~/mehdix.ir $ jekyll serve

خط اول از فرامین بالا سایت را می‌سازد و خط بعدی نیز باعث می‌شود که جکیل وبسایت را از روی کدهای موجود بسازد و بعد توسط وب‌سرور توکارش آنرا نمایش بدهد. پس از اجرای دستورات بالا وبسایت محلی ما در آدرس ‎‎http://localhost:4000 در دسترس خواهد بود. قبل از اینکه به سراغ مرحله بعدی برویم ساختار و همه فایل‌های تولید شده توسط جکیل را به مخزن گیت‌هابمان اضافه می‌کنیم (باید صریحا به گیت بگوییم که کدام فایل‌ها باید به مخزن اضافه شوند، صرف کپی کردن کافی نیست):

~/mehdix.ir $ git add --all

با دستور بالا فایل‌های تولید شده از این لحظه توسط گیت مدیریت می‌شوند و موقع کامیت می‌توان آنها را هم ثبت کرد. هنگام افزون هر فایل جدید نیز باید آنرا با دستور زیر به گیت اضافه کنیم:

~ $ git add <FILENAME>

نکته گیت برای حرفه‌ای‌ها: در صورتی که برای دریافت مخزن از لینک https استفاده کنید موقع کامیت تغییرات باید کلمه عبور و رمز گیت‌هاب خود را وارد کنید ولی در صورتی که کلید عمومی دستگاه خود را به لیست کلیدهای مورد اعتماد در حساب کاربری گیت‌هاب خودتان اضافه کنید می‌توانید از آن دستگاه خاص بدون وارد کردن اطلاعات حساب کاربری تغییرات خود را در گیت‌هاب ثبت کنید. برای استفاده از این مورد لازم است که مخزن را با لینک ssh دریافت کرده باشید.

حالا تغییرات را ثبت می‌کنیم:

~/mehdix.ir $ git commit -am ”Jekyll basic structure added”
~/mehdix.ir $ git push -- باید کلمه عبور و رمز گیت‌هابمان را وارد کنیم

هر بار که تغییری در سایت می‌دهیم باید به روش بالا آنرا به مخزن محلی خودمان اضافه کنیم و پس از کامیت کردن تغییرات آنها را در مخزن گیت‌هاب پوش کنیم در غیر اینصورت تغییرات فقط روی دستگاه ما قرار خواهند گرفت. ما بیش از این در این مورد توضیح نمی‌دهیم و به سراغ بخش‌های دیگر جکیل می‌رویم.

اگر به ساختار پروژه تولید شده توسط جکیل نگاه کنیم موارد زیر را خواهیم دید:

~/mehdix.ir $ ls
about.md  _config.yml  css  feed.xml  _includes  index.html  _layouts  _posts  _sass  _site

فایل config.yml_ حاوی تنظیمات جکیل است. لیست کاملی از مواردی که می‌توان در این فایل تغییر داد در مستندات جکیل در موجود است. مهمترین موارد شامل نام نویسنده و عنوان و شرح وبسایت و نیز مجوزمطالب می‌باشد. جکیل این موارد را در تگ‌های html صفحات سایت ما قرار خواهد داد.

نکته برای حرفه‌ای‌ها: در صورتی که می‌خواهید روی سرور شخصی وب‌سرور توکار جکیل را اجرا کنید مقدار host را در این فایل تغییر بدهید.

سایر مواردی که باید در مورد ساختار پروژه جکیل بدانیم یکی پوشه _posts است. این پوشه حاوی فایل‌های متنی است که هر کدام یک مطلب وبسایت ما است. هر مطلب جدید در یک فایل جدید قرار می‌گیرد. نام این فایل از یک قالب خاص یپروی می‌کند. تاریخ انتشار مطلب و عنوان مطلب از نام فایل استخراج خواهد شد. به مثال زیر توجه کنید:

2014-11-10-publishing-with-jekyll.md

نام این فایل حاوی تاریخ انتشار است که با خط تیره تفکیک شده است و عنوان مطلب بلافاصله بعد از تاریخ آمده است. پسوند فایل هم نوع زبان نشانه‌گذاری بکاررفته در نوشته را مشخص می‌کند که دراین مورد markdown است. این هم یک راهنمای کوتاه و مفید در این مورد.

لازم است بدانیم که فایل‌هایی از پروژه که دارای سرآمد[^4] YAML باشند به صورت ویژه‌ای پردازش می‌شوند. این سرآمد برای این پست چیزی است شبیه به این:

---
title: پیشگفتار
category: general
tags: وبلاگ جکیل هکر
---

می‌بینیم که مقادیری بین دو جفت خط تیره سه‌گانه تعریف شده‌اند. این مقادیر برای جکیل با معنی هستند. مثلا با title من عنوان مطلب را فارسی کرده‌ام چرا که در غیر اینصورت عنوان از نام فایل استخراج می‌شد که انگلیسی است. برای مطلب دسته و تگ هم تعریف شده است که اختیاری است. بدنه اصلی مطلب هم بعد از این سرآمد در فایل نوشته می‌شود.

بخش مهم بعدی که لازم است با آن آشنا باشید فایل index.html است. این فایل هم دارای سرآمد YAML است که ما در این راهنمای مقدماتی آن را تغییر نمی‌دهیم. فقط کافی است بدانیم که طرح^5 و قالب پیش‌فرضی که محتویات این فایل را در برخواهد گرفت در این سرآمد تعریف شده است:

---
layout: default
---

در صورتی که به محتویات پوشه layouts_ نگاهی کنیم طرح‌های قابل استفاده برای هر نوع محتوا را خواهیم یافت، از جمله post برای هر مطلب و نیز default برای صفحه اصلی. زبان استفاده شده در این فایل‌ها liquid^6 نام دارد. با مقداری دقت می‌توانیم ساختار html صفحات اصلی و صفحه اختصاصی هر مطلب را تغییر بدهیم.

نکته بعدی که حتما به آن نیاز داریم آشنایی با نحوه تغییر استایل وبسایت و شخصی‌سازی آن است. فایل‌های استایل در مسیر sass_ قرار دارند و ما می‌توانیم فایل‌های base.scss_ و layout.scss_ را جهت اعمال تغییرات دلخواه دستکاری کنیم.

مورد بعدی خوراک وبسایت ماست. هربار که مطلبی اضافه می‌کنیم جکیل یک فایل بنام feed.xml در ریشه وبسایت ما ایجاد می‌کند که حاوی مداخل نوشته‌های ماست. ما می‌توانیم آدرس این فایل را به خوراک‌خوان دلخواهمان بدهیم تا مطالب را آنجا دنبال کنیم.

هربار که ما jekyll serve را اجرا می‌کنیم جکیل یک وبسایت استاتیک از روی مطالب ما و تنظیمات ما می‌سازد و در مسیر site_ کپی می‌کند. محتوای این مسیر یک وبسایت کامل است که حتی می‌توانیم در هر سرور دیگری آنرا بارگذاری کنیم اما نیازی نیست آنرا در مخزن وبسایتمان اضافه کنیم چرا که گیت‌هاب این خروجی را از روی فایل‌های پروژه خواهد ساخت.

نکته: پس از تغییر مقادیر این فایل دوباره jekyll serve را اجرا کنید، چرا که جکیل فقط یکبار فایل تنظیمات را می‌خواند اما تغییرات در سایر فایل‌ها را به طور زنده نمایش می‌دهد.

جکیل قابلیت‌های فراوان دیگری دارد که از حوزه این راهنمای ساده خارج است. مواردی همچون افزودن صفحه‌گذاری[^7] و پلاگین‌ها و ساختن مجموعه‌ها و فایل‌های داده و ساخت فایل‌های پیش‌نویس و مانند اینها که خوانندگان علاقه‌مند می‌توانند کاربر برخی از آنها را در وبسایت مثال این مقاله و سایر سایت‌های مشابه پیدا کنند.

در اینجا به دو نکته بعدی می‌پردازیم که قولش را در قسمت اول داده بودیم. یکی بکارگیری دامنه شخصی و دیگری افزودن نظرات بازدید کنندگان. به منظور استفاده از دامنه شخصی دو روش در پیش رو داریم. یکی اینکه وبسایتمان را مستقیما تحت دامنه‌مان منتشر کنیم و دیگر اینکه تحت یک زیردامنه اینکار را انجام بدهیم. برای اینکار یک فایل بنام CNAME به مخزن وبسایتمان اضافه می‌کنیم. این فایل باید فقط دارای یک خط متن باشد که آن هم نام دامنه مورد نظر ما است:

~/mehdix.ir $ echo “mehdix.ir” > CNAME -- یا مثلا blog.mehdix.ir
~/mehdix.ir $ git add CNAME
~/mehdix.ir $ git commit -am”cname file added”
~/mehdix.ir $ git push

حالا کافیست به صفحه مدیریت دامنه خود مراجعه کنیم و تغییرات لازم را اعمال کنیم. برای بکارگیری یک زیردامنه باید بتوانیم یک رکورد CNAME ایجاد کنیم که به username.github.io اشاره کند. باید توجه داشته باشیم که تغییرات DNS مدتی طول می‌کشد که اعمال شود. برای اینکه وبسایت ما مستقیما تحت دامنه اصلی نمایش داده شود باید در صفحه مدیریت دامنه‌مان مقادیر مقابل را برای Name Server وارد کنیم: 192.30.252.153 و 192.30.252.154. لازم است توجه کنیم که این مورد دوم کمی آسیب‌پذیر است به این معنی که ما باید مواظب تغییر در این IPها باشیم. پیشنهاد گیت‌هاب استفاده از یک زیردامنه است چرا که گیت‌هاب می‌تواند به شکل موثرتری وبسایت ما را منتشر کند.

در قسمت آخر این مقاله به افزودن امکان نظر دادن پای مطالب می‌پردازیم. برای اینکار کافیست به یکی از سرویس دهنده‌های رایگان در وب مثل disqus مراجعه و یک حساب کاربری بسازیم. بعد از اینکار دامنه‌مان را به حساب کاربری‌مان اضافه می‌کنیم و پس از طی مراحل اینکار در نهایت کد لازم برای افزودن سرویس مربوطه به وبسایت را دریافت می‌کنیم. مثلا من در disqus ثبت نام کردم و در آن سایت می‌توانم نظرات را مدیریت کنم و همه آنها را یکجا ببینم. من پس از ثبت وبسایتم ‎کد لازم را کپی می‌کنم. حال تنها کافیست این کد را در جایی که دوست داریم نظرات نمایش داده شوند قرار دهیم. به این منظور ما کد دریافتی را در فایل layouts/_posts.html زیر بعد از تگ article کپی می‌کنیم.

در آخر فراموش نکنید که اگر سایتی با جکیل ساختید آنرا به ‬‬لیست سایت‌های نیرو گرفته از جکیل اضافه کنید.

[^1]: Static Site Generator [^2]: Template Language [^4]: [Front Matter](Front Matter - http://jekyllrb.com/docs/frontmatter/)