وبلاگ جکیل روی دامنه شخصی

جمعه ۲۸ آذر ۱۳۹۳
۷ دقیقه مطالعه

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

در قسمت اول از این مقاله شرح دادیم که مزایای یک وبسایت ایستا در مقایسه با یک وبسایت پویا چیست و چه کاربردهایی دارد و دیگر اینکه ما می خواهیم با امکانات موجود در اینترنت و با حداقل هزینه وبسایت بسازیم. در قسمت قبلی در مورد گیت‌هاب صحبت کردیم و اینکه چگونه باید مخزن لازم برای وبسایتمان را آنجا بسازیم و چطور آنرا تغییر و برزورسانی کنیم و در نهایت وبسایت خودمان را تحت دامنه 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 برای صفحه اصلی. زبان استفاده شده در این فایل‌ها liquid6 نام دارد. با مقداری دقت می‌توانیم ساختار 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 

  3. Layout 

  4. Front Matter 

  5. Liquid 

  6. Pagination 

سورس

نظرات خوانندگان

aasiaeet   ۰۶ بهمن ۱۳۹۵

سلام مهدی جان، آقا ممنون از به اشتراک گذاشتن مطالب خوبت. من با تمپلیت شما یه وبلاگ جکیل زدم ولی هنوز در دو مورد گیر داره: تگ ها و دیسکاس. قیافه تگ ها درست هست صفحه های مربوط به تگ ها هم درست میشه و در فولدر tag قرار میگیره ولی متاسفانه لینک تگ ها به صفحه ها اشتباه هست و 404 میده. مشکل در مرود دیسکاس هم این هست که وقتی می خواد لود بشه کروم میگه که محتواش امن نیست و باید کاربر بره بالا تایید کنه که محتوا نشون داده بشه ولی تو بلاگ شما به نظر نمیاد این لازم باشه. دو تا نکته دیگه راجع به دیسکاس: ویجت برای من انگلیسی میاد (مثلا اینجا نوشته پیشنهاد ولی برای من کامنت) این رو کجا باید تنظیم کرد؟ دوم اینکه شنیدم دیسکاس ایران فیلتر شده، اگر بله چه چیز دیگه ای جایگزین پیشنهاد می کنی؟ پیشاپیش ممنون از جوابت.

Mehdi Sadeghi   ۰۶ بهمن ۱۳۹۵

سلام، مشکلی که در مورد تگ گفتی من اواخر برام پیش اومد. جکیل آپدیت شده به ورژن سه و جم تگ مثل اینکه هنوز توی ریپازیتوری روبی آپدیت نشده. اینجا رو ببین: https://github.com/pattex/j… در مورد دیسکاس والا در صفحه خود دیسکاس سایت رو تنظیم کردم فکر کنم زبان رو هم اونجا ست کرده باشم ولی الان حضور ذهن ندارم. به عنوان جایگزین یکی دیسکورس https://www.discourse.org/ رو می‌تونم پیشنهاد کنم که اوپن سورس هم هست ولی فکر می‌کنم زیادیه واسه فقط یک وبسایت. دیگری هم یه برنامه ساده است که باید خودت هاست کنی بنام «ایسو» https://posativ.org/isso/.

aasiaeet   ۰۷ بهمن ۱۳۹۵

سلام مجدد، ممنون از پاسخت. فقط من به جایی که اشاره کرده بودی برای تگ رفتم ولی با پیشنهادهای اونا مشکلم حل نشد. ولی به نظر میرسه بلاگ شما کار می کنه. شما دقیقا کدوم راه رو استفاده کردی؟ برای جایگزین های دیسکاس هم ممنون بررسیشون می کنم.

Mehdi Sadeghi   ۰۸ بهمن ۱۳۹۵

خب پس احتمالا مشکلت اصلا اون نیست. تنها چیزی که الان به ذهنم می‌رسه کنترل دقیق کانفیگ فایل‌هاست و اینکه مسیرهایی که ست کردی آخرش اسلش داره یا نه. این trailing slash سردردهای ناجور درست می‌کنه دیدنش هم سخته.

aasiaeet   ۱۱ بهمن ۱۳۹۵

اقا دستت درد نکنه. مشکل تگ ها حل شد اینجا می ذارم شاید به درد کسی بخوره: مشکل من این بود که صفحات مربوط به تگ ساخته می شد، در فولدر درست هم قرار می گرفت ولی لینک ها خراب بود. من هنوز نمی دونم چرا ولی این مشکل فقط روی لوکالم بود و وقتی پوش می کردم روی گیت هاب لینک ها درست میشد. خیلی طول کشید تا این رو متوجه بشم :) چون فقط رو لوکال چک می کردم. مشکل بعدی این بود که صفحه ی تگ کلاود درست نمی شد و به دلیلی که مهدی جان گفت ارور می داد و لینکی که داد بالاتر کارساز بود. من به طور خاص این کار رو کردم: I have added this line in my ext.rb in plugins folder: Liquid::Template.register_filter(Jekyll::Filters) تنظیمات دیسکاس برای فارسی کردنش رو هم توی سایت دیسکاس میشه پیدا کرد. ولی هنوز نتونستم مشکل اینکه میگه unsafe to load رو حل بکنم. بازم ممنون

Mehdi Sadeghi   ۱۱ بهمن ۱۳۹۵

خوشحالم که مشکل رو حل کردی و ممنون بابت اطلاع‌رسانی!

Mehdi Sadeghi   ۱۱ بهمن ۱۳۹۵

راستی در مورد مشکل «unsafe to load» بیشتر توضیح بده. اگر منظورت اینکه که براوزر، مثلا کروم، این خطا رو می‌ده مربوطه به لود اسکریپت‌هایی که کروم فکر می‌کنه خطرناکند. مثلا اواخر من این ارور رو روی یک وبسایتی که اداره می‌کنم می‌گرفتم متوجه شدم که واقعا سایت هک شده و کسی انتهای تمپلیت‌های سایت یه خط اسکریپت برای لود کردن تبلیغات اضافه کرده. یعنی به هیچی دست نزده بودند و فقط یک خط اسکریپت گذاشته بودن که تبلیغی رو لود کنه که حتی در سایت نمایش داده نمی‌شد. گوگل یک ایمیل هشدار برام فرستاد و من اون اسکریپت رو حذف کردم و درست شد.

Mahdi Pourghasem   ۲۱ بهمن ۱۳۹۵

سلام دوست عزیز، بابت این پست خیلی ممنونم من پروژه رو فورک کردم اسمش رو به فرم username.github.io تغییر دادم ولی ارور Page build failed دریافت میکنم ممنون میشم اگه بتونید کمکم کنید. itsmahdi.github.io

Mehdi Sadeghi   ۲۱ بهمن ۱۳۹۵

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

Mahdi Pourghasem   ۲۱ بهمن ۱۳۹۵

آهان، ممنونم از راهنمایی، راستش فقط نیاز داشتم که وبلاگم راست به چپ باشه چطور میتونم فقط از افزونه هاRTL شما استفاده کنم تا یه بلاگ توی گیتهابم با اسم یوزرنیم خودم بسازم؟

Mehdi Sadeghi   ۲۱ بهمن ۱۳۹۵

شما از هیچ افزونه‌ای روی گیت‌هاب نمی‌تونی استفاده کنی. اگر فقط راست به چپ احتیاج داری که یک dir=rtl تو تگ html بذار همه چی راست به چپ می‌شه. اگر از چیزی بیشتر از افزونه‌های پیش‌فرض گیت‌هاب می‌خوای استفاده کنی باید از یک بیلد خاص استفاده کنی. کل داستان اینجا هم همینه.