--- title: وبلاگ جکیل روی دامنه شخصی tags: جکیل وب uuid: 51c37d6c-cec3-4a94-8310-2690ec53f728 category: جکیل --- # آپدیت دی ۱۳۹۸ / ژانویه ۲۰۲۰ این مطلب خیلی قدیمی است. از وقتی آن را نوشته‌ام تغییرات زیادی در جهان فناوری اتفاق افتاده است و وبسایت‌های استاتیک محبوبیت خیلی بیشتری پیدا کرده‌اند و کلی ابزار و مولد جدید خلق شده است. وبسایت خودم را هم برده‌ام جای دیگری و البته آن را به صورت یک قالب جداگانه هم منتشر کرده‌ام. لطفا پیش از سعی در ساخت یک وبسایت به این طریق مطالب جدیدتر با [تگ جکیل](https://mehdix.ir/tag/%D8%AC%DA%A9%DB%8C%D9%84.html) را ببینید و [README](https://github.com/mehdisadeghi/jekyll-theme-mehdix-rtl/blob/master/README.md) قالب منتشر شده روی گیت‌هاب را هم حتما بخوانید. **منتشر شده در شماره سه ماهنامه سلام‌دنیا** -- این مقاله قسمت دوم راهنمای ساخت وبلاگ با جکیل و گیت‌هاب است که برای سلام‌دنیا نوشتم و اینجا با مقداری تغییرات منتشر می‌کنم. در قسمت اول از این مقاله شرح دادیم که مزایای یک وبسایت ایستا در مقایسه با یک وبسایت پویا چیست و چه کاربردهایی دارد و دیگر اینکه ما می خواهیم با امکانات موجود در اینترنت و با حداقل هزینه وبسایت بسازیم. در قسمت قبلی در مورد گیت‌هاب صحبت کردیم و اینکه چگونه باید مخزن لازم برای وبسایتمان را آنجا بسازیم و چطور آنرا تغییر و برزورسانی کنیم و در نهایت وبسایت خودمان را تحت دامنه *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](http://localhost:4000) در دسترس خواهد بود. قبل از اینکه به سراغ مرحله بعدی برویم ساختار و همه فایل‌های تولید شده توسط جکیل را به مخزن گیت‌هابمان اضافه می‌کنیم (باید صریحا به گیت بگوییم که کدام فایل‌ها باید به مخزن اضافه شوند، صرف کپی کردن کافی نیست): ~/mehdix.ir $ git add --all با دستور بالا فایل‌های تولید شده از این لحظه توسط گیت مدیریت می‌شوند و موقع کامیت می‌توان آنها را هم ثبت کرد. هنگام افزون هر فایل جدید نیز باید آنرا با دستور زیر به گیت اضافه کنیم: ~ $ git add > نکته گیت برای حرفه‌ای‌ها: در صورتی که برای دریافت مخزن از لینک 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_* حاوی تنظیمات جکیل است. لیست کاملی از مواردی که می‌توان در این فایل تغییر داد در [مستندات جکیل](http://jekyllrb.com/docs/configuration/) در موجود است. مهمترین موارد شامل نام نویسنده و عنوان و شرح وبسایت و نیز مجوزمطالب می‌باشد. جکیل این موارد را در تگ‌های `html` صفحات سایت ما قرار خواهد داد. > نکته برای حرفه‌ای‌ها: در صورتی که می‌خواهید روی سرور شخصی وب‌سرور توکار جکیل را اجرا کنید مقدار host را در این فایل تغییر بدهید. سایر مواردی که باید در مورد ساختار پروژه جکیل بدانیم یکی پوشه *_posts* است. این پوشه حاوی فایل‌های متنی است که هر کدام یک مطلب وبسایت ما است. هر مطلب جدید در یک فایل جدید قرار می‌گیرد. نام این فایل از یک قالب خاص یپروی می‌کند. تاریخ انتشار مطلب و عنوان مطلب از نام فایل استخراج خواهد شد. به مثال زیر توجه کنید: 2014-11-10-publishing-with-jekyll.md نام این فایل حاوی تاریخ انتشار است که با خط تیره تفکیک شده است و عنوان مطلب بلافاصله بعد از تاریخ آمده است. پسوند فایل هم نوع زبان نشانه‌گذاری بکاررفته در نوشته را مشخص می‌کند که دراین مورد *markdown* است. این هم [یک راهنمای کوتاه و مفید](https://help.github.com/articles/markdown-basics/) در این مورد. لازم است بدانیم که فایل‌هایی از پروژه که دارای سرآمد[^4] YAML باشند به صورت ویژه‌ای پردازش می‌شوند. این سرآمد برای این پست چیزی است شبیه به این: ~~~~yaml --- title: پیشگفتار category: general tags: وبلاگ جکیل هکر --- ~~~~ می‌بینیم که مقادیری بین دو جفت خط تیره سه‌گانه تعریف شده‌اند. این مقادیر برای جکیل با معنی هستند. مثلا با `title` من عنوان مطلب را فارسی کرده‌ام چرا که در غیر اینصورت عنوان از نام فایل استخراج می‌شد که انگلیسی است. برای مطلب دسته و تگ هم تعریف شده است که اختیاری است. بدنه اصلی مطلب هم بعد از این سرآمد در فایل نوشته می‌شود. بخش مهم بعدی که لازم است با آن آشنا باشید فایل *index.html* است. این فایل هم دارای سرآمد **YAML** است که ما در این راهنمای مقدماتی آن را تغییر نمی‌دهیم. فقط کافی است بدانیم که طرح[^5] و قالب پیش‌فرضی که محتویات این فایل را در برخواهد گرفت در این سرآمد تعریف شده است: ~~~~yaml --- 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* ثبت نام کردم و در آن سایت می‌توانم نظرات را مدیریت کنم و همه آنها را یکجا ببینم. من پس از ثبت وبسایتم ‎[کد لازم](https://mehdix.disqus.com/admin/settings/universalcode/) را کپی می‌کنم. حال تنها کافیست این کد را در جایی که دوست داریم نظرات نمایش داده شوند قرار دهیم. به این منظور ما کد دریافتی را در فایل *layouts/_posts.html* زیر بعد از تگ `article` کپی می‌کنیم. در آخر فراموش نکنید که اگر سایتی با جکیل ساختید آنرا به ‬‬[لیست سایت‌های نیرو گرفته از جکیل](https://github.com/jekyll/jekyll/wiki/Sites) اضافه کنید. [^1]: Static Site Generator [^2]: Template Language [^3]: Layout [^4]: [Front Matter](http://jekyllrb.com/docs/frontmatter/) [^5]: [Liquid](https://github.com/Shopify/liquid/wiki) [^6]: Pagination