شروع کار با Jekyll

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

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

فواید استفاده از Jekyll

ساده بودن

Jekyll واقعا ساده و انعطاف‌پذیر است. شما می‌توانید محتوای‌تان را با استفاده از Markdown، textile، liquid و یا HTML/CSS بنویسید. اصلا مهم نیست و در نهایت همه چیز به شما و ترجیحات‌تان وابسته است.

استاتیک

تمام وبسایت شما به صورت یک وبسایت استاتیک در خواهد آمد. این بدان معناست که تقریبا در هر جایی می‌توانید وبسایت‌تان را میزبانی بکنید. می‌توانید از Github Pages استفاده بکنید و یا آنکه سرویس Amazon S3 را به کار ببرید. همچنین از آنجایی که همه فایل های شما HTML است می‌توانید با استفاده از سرویس‌های CDN کشینگ مناسبی را بوجود بیاورید.

بلاگ

Jekyll از مزیت‌هایی که یک سیستم مدیریت محتوا دارد تا حدی بی بهره نیست. شما تنها نیاز دارید که با شیوه کاری این پلتفرم آشنا شوید. در Jekyll شما قابلیت ایجاد برگه‌ها، پست‌ها، لینک‌های دائمی و بسیاری چیز دیگر را دارید. 

پیش‌نیازهای سیستمی

حال که آشنایی مقدماتی از روبی را پیدا کردیم، می‌توانیم شروع بکنیم.

Jekyll یک دستور اجرایی در محیط متنی را برای‌مان فراهم کرده که از طریق آن می‌توانیم پروژه جدیدی را بسازیم، آن را اجرا بکنیم و… . برای نصب کردن Jekyll ابتدا نیاز است که  پیش‌نیازهایی را نصب بکنیم.

ما اینگونه در نظر می‌گیریم که می‌خواهیم Jekyll را روی اوبونتو نصب بکنیم. با این حال فرایند نصب روی دیگر پلتفرم‌ها بسیار ساده است. برای راهنمایی نصب ویندوز به این لینک و برای مک به این لینک مراجعه کنید. 

ابتدای کار نیاز است که مطمئن شویم روبی و تمام پیش‌نیازهای مربوط به آن را روی سیستم‌مان نصب کرده‌ایم. برای این کار دستور زیر را در ترمینال اجرا نمایید:

sudo apt-get install ruby-full build-essential

از آنجایی که قصد داریم Ruby Gems را به صورت منحصر به فرد برای یک کاربر پیاده‌سازی بکنیم فرایند نصبی بعدی را در فایل /.bashrc انجام می‌دهیم. برای اینکار دستورات زیر را اجرا کنید:

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc

echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc

echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc

source ~/.bashrc

در نهایت نیاز است که bundler را به عنوان یک مدیریت پکیج برای روبی نصب بکنیم.

sudo gem install bundler

نصب کردن Jekyll

حال که تمام پیش‌نیازهای لازم را برای نصب Jekyll در اختیار دارید زمان آن فرا رسیده که Jekyll را نصب کنید. برای این کار کافی‌ست دستور زیر را وارد کنید:

gem install jekyll

اگر با مشکل دسترسی مواجه شدید می‌توانید از دستور زیر استفاده کنید:

sudo gem install jekyll

بعد از اینکار برای آنکه مطمئن شوید Jekyll را به خوبی نصب کرده‌اید کافی‌ست دستور زیر را وارد کنید.

jekyll -v

در صورتی که در خروجی شماره نسخه نمایش داده شد، بدانید که Jekyll را به خوبی نصب کرده‌اید.

شروع کار با Jekyll

قبل از آنکه بیشتر در این مسئله غرق شویم می‌خواهم به شما یک منبع آموزشی خوب را برای یادگیری Jekyll معرفی کنم. می‌توانید در این لینک مستندات Jekyll را دنبال کنید. 

خب بیایید اولین وبلاگ خودمان را با استفاده از Jekyll پیاده‌سازی کنیم. برای اینکار ابتدا  دستور زیر را اجرا کنید:

jekyll new my-blog

دستور new به ما این قابلیت را می‌دهد تا با استفاده از پوسته پیشفرض Jekyll یک وبسایت را راه‌اندازی کنیم. این دستور یک دایرکتوری را با نام my-blog ایجاد می‌کند. 

اگر می‌خواهید از یک پوسته دیگر استفاده کنید کافی‌ست لینک گیت‌هاب آن را کلون کنید:

git clone https://github.com/scotch-io/scotch-io.github.io my-blog

حال بیایید وارد دایرکتوری my-blog شویم و دستور serve را اجرا نماییم:

jekyll serve

Jekyll همراه با یک سرور توسعه داخلی عرضه می‌شود. با شروع این فرایند، Jekyll به دقت به تغییرات سرور شما و فایل‌های آن نگاه می‌کند و یک سرور کوچک را نیز روی پورت ۴۰۰۰ برای‌تان ایجاد می‌کند. برای مشاهده پروژه می‌توانید آدرس Localhost:4000 را در مرورگر وارد کنید.

دستورات

بیایید به صورتی سریع با چند دستور بیشتر از Jekyll آشنا شویم و بدانیم که آن‌ها چگونه کار می‌کنند. از آنجایی که در این پلتفرم خبری از بانک اطلاعاتی نیست شما باید برگه‌ها و نوشته‌های خود را در فایل‌های Markdown, HTML و یا liquid بنویسید. بعد از اینکار Jekyll با استفاده از دستور build وبسایت شما را ایجاد می‌کند و همه چیز را در کنار همدیگر قرار می‌دهد.

دستور serve یا s

همانطور که اشاره شد با استفاده از این دستور می‌توانید یک پروژه را به حالت سرور درآورید و آن را روی پورت ۴۰۰۰ اجرا نمایید. این دستور تغییرات وبسایت شما را نیز دنبال می‌کند. برای متوقف کردن این دستور تنها کافی ست ctrl+c را وارد کنید.

دستور build یا b

به صورت پیشفرض هرگاه که شما یک وبسایت را build می‌کنید، وبسایت در دایرکتوری _site ایجاد می‌شود. می‌توانید وبسایت استاتیک‌تان را با استفاده از دستور زیر اجرا کنید:

jekyll build

اگر بخواهید این فرایند را به صورت خودکار انجام دهید می‌توانید دستور زیر را وارد کنید:

jekyll build –watch

دلیل آنکه ما تمایل داریم از build در بعضی مواقع بجای serve استفاده کنیم این است که ما همیشه نمی‌خواهیم یک سرور محلی را اجرا کنیم. دستور build بسیار سریع‌تر برای ایجاد وبسایت کار می‌کند. 

نگاهی به ساختار دایرکتوری‌ها و فایل‌ها در Jekyll

ما اولین پروژه خودمان را اجرا کردیم و تا حدی با دستورات مقدماتی آشنایی داریم. حال بیایید نگاهی به ساختار و کلیات پروژه بیاندازیم. 

بسیار مهم است که این موضوع را به خوبی درک کنیم چرا که هسته اصلی فریمورک Jekyll از این موارد تشکیل می‌شود.

_config.yml

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

_layouts

این دایرکتوری جایی‌ست که ما قالب اصلی وبسایت‌مان را در آن قرار می‌دهیم. قالب‌ها به ما این امکان را می‌دهند تا ظاهر مطالب و نوشته‌های وبسایت را طراحی کنیم.

_includes

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

_posts

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

YEAR-MONTH-DAY-this-is-my-title.md

_drafts

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

_plugins

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

about.md

پوسته پیشفرض Jekyll شامل این فایل می‌شود که در آن نوشته‌های مربوط به شما به عنوان صاحب وبسایت قرار می‌گیرد. با این حال می‌توانید آن را حذف کنید و یا در دایرکتوری pages قرار دهید.

Index.html

طبیعتا این فایل هم محتویات صفحه اصلی وبسایت شما را در خود دارد. معمولا در این فایل اطلاعات کلی وبسایت‌تان، لینک‌ها، پست‌ها و… قرار می‌گیرد.

_site

این دایرکتوری مربوط به وبسایت ساخته شده شما است. هر بار که وبسایت خودتان را build می‌کنید، اطلاعات داخل این دایرکتوری حذف شده و با مقادیر جدیدی جایگزین می‌شود. 

_data

اینجا جائیست که داده‌های‌تان را قرار می‌دهید. داده‌ها در این دایرکتوری می‌توانند در قالب json، csv و yaml باشند.

_sass

Jekyll به صورت پیشفرض از sass پشتیبانی می‌کند. البته می‌شود این امکان را در پوسته‌های مختلف به صورت متغیر مشاهده بکنید.

پیکربندی

همانطور که پیشتر اشاره شد وبسایت شما از طریق فایل _config.yaml پیکربندی می‌شود. می‌توانید از طریق خط فرمان jekyll به مقادیر این فایل دسترسی داشته باشید.

اگر متوجه شده باشید در این فایل می‌توانید مقادیری مانند email, twitter_username و github_username را مشاهده بکنید. البته این موارد بسته به پوسته‌ای که از آن استفاده می‌کنید می‌تواند متفاوت باشد. 

می‌توانید به اطلاعات داخل این فایل از طریق متغیرهایی که تعیین می‌شود دسترسی داشته باشید. مثال:

{{ site.variable_name }}

قالب‌

قالب سازی در Jekyll واقعا کار ساده‌ای است. اگر با ساختار قالب‌های مدرن آشنایی داشته باشید یادگیری این فرایند مانند آب خوردن خواهد بود.

قالب‌ها معمولا به دو قسمت Front Matter و Liquid Templates تقسیم می‌شوند. 

Front Matter

Front Matter یک فرمت YAML است که در بالای فایل‌های شما برای تعیین متغیرهای قالب استفاده می‌شود. اینجا دقیقا جایی‌ست که زیبایی و قدرت Jekyll نمایان می‌شود. 

یک مثال از این را می‌توانید در زیر مشاهده بکنید:

---

layout: page

title: About

permalink: /about/

---

# {{ page.title }}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

## Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

با این کار Jekyll اطلاعات داده شده را ترجمه کرده و در نهایت یک صفحه را که از طریق /about قابل دسترس است ایجاد می‌کند. مطمئن شوید که نام layout برابر با page قرار بگیرد.

Liquid Templates

Jekyll از زبان قالب‌نویسی Liquid استفاده می‌کند که توسط Shopify نوشته شده است. یادگیری این زبان بسیار ساده است. همچنین قابلیت گسترش بالایی دارد.

می‌توانید در ارتباط با این زبان و قابلیت‌های آن در این صفحه مواردی را مطالعه کنید. 

ایجاد برگه‌ها

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

برای اضافه کردن آن نیاز است که در  _config.yml دستور زیر را قرار دهید:

include: ['_pages']

بعد از آن یک فایل را در دایرکتوری _pages با فرمت md یا html ایجاد کنید. حال باید به صورت زیر محتویاتی که می‌خواهید را در فایل وارد نمایید:

---

layout: inner

title: About

permalink: /about/

---

It doesn't matter what comes, fresh goes better in life, with Mentos fresh and full of Life! Nothing gets to you, stayin' fresh, stayin' cool, with Mentos fresh and full of life! Fresh goes better! Mentos freshness! Fresh goes better with Mentos, fresh and full of life! Mentos! The Freshmaker!

We got a right to pick a little fight, Bonanza! If anyone fights anyone of us, he's gotta fight with me! We're not a one to saddle up and run, Bonanza! Anyone of us who starts a little fuss knows he can count on me! One for four, four for one, this we guarantee. We got a right to pick a little fight, Bonanza! If anyone fights anyone of us he's gotta fight with me!

ایجاد نوشته‌ها

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

YYYY-MM-DD-my-title-is-called-this.md

البته می‌توانید این موضوع را نیز از طریق Front Matter انجام دهید:

---

layout: inner

title: 'My First Post on Jekyll'

date: 2015-08-31 13:26:34

categories: blog development

tags: cats dogs code

custom_var: 'meow meow meow'

---

It doesn't matter what comes, fresh goes better in life, with Mentos fresh and full of Life! Nothing gets to you, stayin' fresh, stayin' cool, with Mentos fresh and full of life! Fresh goes better! Mentos freshness! Fresh goes better with Mentos, fresh and full of life! Mentos! The Freshmaker!

We got a right to pick a little fight, Bonanza! If anyone fights anyone of us, he's gotta fight with me! We're not a one to saddle up and run, Bonanza! Anyone of us who starts a little fuss knows he can count on me! One for four, four for one, this we guarantee. We got a right to pick a little fight, Bonanza! If anyone fights anyone of us he's gotta fight with me!

نمایش پست‌ها

دو راه برای نمایش پست‌ها در صفحه اصلی وجود دارد:

• همراه با صفحه بندی
• بدون صفحه بندی

بدون صفحه بندی به صورت زیر باید عمل بکنید:

{% for post in site.posts %}

    <h2>post.title</h2>

    <div class="content">

        {{ post.content }}

    </div>

{% endfor %}

همراه با صفحه‌بندی:

{% for post in paginator.posts %}

    {% include tile.html %}

{% endfor %}

در پایان

Jekyll واقعا ساده و به همین میزان عالی است. برای افرادی که نمی‌خواهند بانک اطلاعاتی داشته باشند و در وبسایت‌شان از CMSهایی مانند وردپرس و… بهره بگیرند، مطمئنا Jekyll یکی از بهترین‌هاست. 

منبع