ساخت وب‌سایت در گیت‌هاب با جکیل

در قسمت اول از این مقاله شرح دادیم که مزایای یک وب‌سایت ایستا در مقایسه با یک وب‌سایت پویا چیست و چه کاربردهایی دارد و دیگر این که ما می‌خواهیم با امکانات موجود در اینترنت و با حداقل هزینه وب‌سایت بسازیم. در قسمت قبلی در مورد گیت‌هاب صحبت کردیم و این که چگونه باید مخزن لازم برای وب سایتمان را آن جا بسازیم و چطور آن را تغییر دهیم و به‌روزرسانی کنیم و در نهایت وب‌سایت خودمان را تحت دامنه github.io منتشر کردیم. چیزهایی که تا این‌جا گفتیم در حقیقت اسکلت اصلی وب‌سایت‌‌سازی با گیت‌هاب بود اما هنوز در مورد ابزار اصلی این کار که Jekyll است صحبتی نکرده‌‌ایم بنابراین در این بخش به آن می‌پردازیم.
صفحات گیت‌هاب علاوه بر پشتیبانی از فایل‌های HTML عادی، از Jekyll که یک مولد صفحات ایستاست نیزپشتیبانی می‌کند. یعنی می‌تواند از روی یک پروژه جکیل، وب‌سایت بسازد. جکیل تمام امکانات لازم برای ساخت وب‌سایت‌ را به صورت آفلاین در اختیار شما می‌گذارد، امکاناتی از قبیل تولید بالای‌صفحه (Header) و پایین صفحه (footer) برای تمامی صفحات وب‌سایت بدون نیاز به تکرار آن‌ها در صفحات مختلف و نیز پشتیبانی از چند زبان الگو جهت نوشتن قالب ساخت. جکیل یک پروژه مستقل از گیت‌هاب است اما وب‌سرور صفحات گیت‌هاب قادر است پروژه‌های جکیل را بفهمد و آن‌ها را به‌درستی نمایش دهد.
نکته: در فاصله قسمت اول و این قسمت من وب‌سایت خودم را با جکیل کامل کردم و در ادامه مطلب از آن در مثال‌ها استفاده خواهم کرد. در صورتی که قصد ساخت یک وبلاگ یا وب‌سایت فارسی راست به چپ داشته باشید، می‌توانید کدها و قالب‌های استفاده شده در مخزن آن را تغییر ‌دهید و برای ساخت وب‌سایت خودتان از آن استفاده کنید.
برای شروع کار با جکیل پیش از هرچیز باید آن را روی کامپیوترمان نصب کنیم. از جایی که جکیل با زبان برنامه‌‌نویسی روبی نوشته شده است،‌ لازم است که روبی هم روی دستگاه ما نصب باشد (ما به نصب روبی نمی‌‌پردازیم):

~ $ 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

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

~/mehdix.ir $ git add --all

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

~ $ git add 

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

~/mehdix.ir $ git commit -am ”Jekyll basic structure added”
~/mehdix.ir $ git push 

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

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

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

فایل config.yml_ حاوی تنظیمات جکیل است. فهرست کاملی از مواردی که می‌توان در این فایل تغییر داد از این لینک در دسترس است.
مهم‌‌‌ترین موارد شامل نام نویسنده و عنوان و شرح وب‌سایت و نیز مجوزمطالب است. جکیل این موارد را در تگ‌های html صفحات سایت ما قرار خواهد داد.
نکته برای حرفه‌ای‌ها: در صورتی که می‌خواهید روی سرور شخصی وب‌سرور توکار جکیل را اجرا کنید مقدار host را در این فایل تغییر دهید.
نکته: پس از تغییر مقادیر این فایل دوباره jekyll serve را اجرا کنید، چرا که جکیل تنها یک بار فایل تنظیمات را می‌خواند اما تغییرات در سایر فایل‌ها را به طور زنده نمایش می‌دهد.
سایر مواردی که باید در مورد ساختار پروژه جکیل بدانیم یکی پوشه posts_ است. این پوشه حاوی فایل‌های متنی است که هر کدام یک مطلب وب‌سایت ماست. هر مطلب جدید در یک فایل جدید قرار می‌گیرد. نام این فایل از یک قالب خاص پیروی می‌کند. تاریخ انتشار مطلب و عنوان مطلب از نام فایل استخراج خواهد شد. به مثال زیر توجه کنید:

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

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

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

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

layout: default
در صورتی که به محتویات پوشه layouts_ نگاهی کنیم طرح‌های قابل استفاده برای هر نوع محتوا را خواهیم یافت، از جمله post برای هر مطلب و نیز default برای صفحه اصلی. زبان استفاده شده در این فایل‌ها liquid نام دارد. با مقداری دقت می‌توانیم ساختار html صفحات اصلی و صفحه اختصاصی هر مطلب را تغییر دهیم.
نکته بعدی که حتما به آن نیاز داریم آشنایی با نحوه تغییر استایل وب‌سایت و شخصی‌‌سازی آن است. فایل‌های استایل در مسیر _sass قرار دارند و ما می‌توانیم فایل‌های base.scss_ و layout.scss_ را جهت اعمال تغییرات دلخواه دستکاری کنیم.
مورد بعدی خوراک وب‌سایت است. هربار که مطلبی اضافه می‌کنیم جکیل یک فایل به نام feed.xml در ریشه وب‌سایت ما ایجاد می‌کند که حاوی مداخل نوشته‌های ماست. ما می‌توانیم آدرس این فایل را به خوراک‌خوان دلخواهمان بدهیم تا مطالب را آن جا دنبال کنیم.
هربار که ما jekyll serve را اجرا می‌کنیم، جکیل یک وب‌سایت ایستا از روی مطالب ما و تنظیمات ما می‌سازد و در مسیر site قرار می‌دهد. محتوای این مسیر یک وب‌سایت کامل است که حتی می‌توانیم در هر سرور دیگری آن را بار‌گذاری کنیم اما نیازی نیست آن را در مخزن وب‌سایتمان اضافه کنیم چرا که گیت‌هاب این خروجی را از روی فایل‌های پروژه خواهد ساخت.
جکیل قابلیت‌های فراوان دیگری دارد که از حوزه این راهنمای ساده خارج است. مواردی همچون صفحه‌‌گذاری ، پلاگین‌ها ،ساختن مجموعه‌ها ، فایل‌های داده ،ساخت فایل‌های پیش‌نویس و مانند این‌ها که خوانندگان علاقه‌مند می‌توانند کاربرد برخی از آن‌ها را در وب‌سایت مثال این مقاله و سایر سایت‌های مشابه پیدا کنند.
در این‌جا به دو نکته‌ای می‌پردازیم که قولش را در قسمت اول داده بودیم. یکی بکارگیری دامنه شخصی و دیگری افزودن نظرات بازدید ‌کنندگان. به منظور استفاده از دامنه شخصی دو روش در پیش رو داریم. یکی این که وب‌سایتمان را مستقیما تحت دامنه‌مان منتشر کنیم و دیگر این که تحت یک زیردامنه این کار را انجام ‌دهیم. برای این منظور یک فایل به نام 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 ثبت نام کردم و در آن سایت می‌توانم نظرات را مدیریت کنم و همه آن‌ها را یک جا ببینم. من پس از ثبت وب‌سایتم از لینک زیر کد لازم را کپی می‌کنم:
https://mehdix.disqus.com/admin/settings/universalcode
حال تنها کافی است این کد را در جایی که دوست داریم نظرات نمایش داده شوند قرار ‌دهیم. به این منظور ما کد دریافتی را در فایل زیر بعد از تگ article کپی می‌کنیم:

_layouts/posts.html