Bengali (বাংলা) translation by Bint Salim (you can also view the original English article)
পূর্ববর্তী পোস্টে, আমি গিটহাব পেজ গুলো সম্পর্কে কথা বলেছিলাম এবং আপনার গিটহাব সংগ্রহশালায় এটা কিভাবে সেট করা যায় সে সম্পর্কে আলোচনা করেছি। আমরা সাইট জেনারেটরের মাধ্যমে শুরু করেছি এবং আমি পূর্বেই বলেছি যে গিটহাব পেইজও Jekyll সাপোর্ট করে।
এই পোস্টে, আমি Jekyll সম্পর্কে বলবো এবং আপনাকে দেখাবো যে, কিভাবে আপনি এটা আপনার প্রজেক্টে সেটআপ করবেন। আমি একটি উদাহরণ প্রকল্প তৈরি করেছি যা আপনি নামিয়ে নিতে পারেন এবং অনুসরণ করতে পারেন।
Jekyll কি?
Jekyll আসলে কি? এখানে তাদের ওয়েবসাইটে প্রদত্ত বর্ণনা দেয়া হলো:
Jekyll হচ্ছে একটি সাধারণ, ব্লগ-সুবিধা সম্পন্ন, স্ট্যাটিক সাইট জেনারেটর।
এটি সম্পূর্ণরূপে কন্টেন্ট চালিত এবং Markdown -ও সমর্থন করে। লেআউটের জন্য এটা Liquid ব্যবহার করে, তাই আপনি আপনার হেড, হেডার এবং ফুটার পুনরায় ব্যবহার করতে পারবেন। এটা আপনার নির্ধারিত কনটেন্ট ও লে আউটের উপর ভিত্তি করে স্ট্যাটিক পেইজ জেনারেট করবে।
এটা ব্লগ সুবিধা সম্পন্ন, তাই ওয়ার্ডপ্রেস বা অন্যান্য সিএমএসের পরিবর্তে ব্যবহার করা সম্ভব।
সম্ভবত সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো, Jekyll এ, পারমালিঙ্ক, ক্যাটাগরি, পেজ, পোস্ট এবং কাস্টম লেআউট সবগুলোই হলো প্রথম শ্রেণীর বিষয়।
আপনি অবশ্য সেইসাথে আপনার সাইটটি আপনার লোকাল কম্পিউটারেও জেনারেট করতে এবং দেখতে পারবেন।
ইন্সটলেশন
Jekyll রুবির উপর ভিত্তি করে তৈরি, তাই সবচেয়ে সহজ পন্থা হচ্ছে RubyGems ব্যবহার করে ইন্সটল করা। আপনি যদি ম্যাক বা লিনাক্সে থাকেন, তাহলে gem install jekyll কমান্ড লাইনের মাধ্যমে Jekyll ইনস্টল করতে পারেন। ইন্সটল করার সময় কোন সমস্যা হলে ইন্সটলেশন গাইড চেক করে দেখুন।
আপনি যদি উইন্ডোজ ব্যবহার করে থাকেন, তাহলে উইন্ডোজের জন্য আলাদা একটি পেইজ আছে যা অনুসরন করতে হবে।
কনফিগারেশন
প্রথমে আপনাকে যা করতে হবে, তা হচ্ছে কনফিগারেশন ফাইল সেটআপ করা। এজন্য আপনার প্রজেক্টের রুটে একটি _config.yml ফাইল যোগ করুন। প্রসঙ্গত রুট হচ্ছে মূল ফোল্ডার যেখানে ওয়েবসাইটের ফাইলগুলো রাখা হয়েছে। এখানে বেশ কিছু কনফিগারেশন অপশন আছে যা আপনি যোগ করতে পারেন। এই উদাহরণের জন্য আমি তাদের একটি উপসেট ব্যবহার করবো। তাই, এগিয়ে যান এবং আপনার _config.yml ফাইলে নীচের কোডগুলো যুক্ত করুন।
1 |
# Dependencies |
2 |
markdown: rdiscount |
3 |
pygments: true |
4 |
|
5 |
# Permalinks |
6 |
permalink: pretty |
7 |
|
8 |
# Server |
9 |
destination: _gh_pages |
10 |
host: 0.0.0.0 |
11 |
port: 9001 |
12 |
baseurl: / |
13 |
encoding: UTF-8 |
কনফিগারেশন ফাইল যোগ করা হলো, চলুন এবার প্রজেক্ট কাঠামো সেটআপ করি।
প্রজেক্ট স্ট্রাকচার
এখানে একটি নির্দিষ্ট গঠন আছে, যা Jekyll- ভিত্তিক সাইট তৈরি করার সময় অনুসরণ করার প্রয়োজন। সঠিকভাবে আপনার সাইট তৈরি করার জন্য এই কাঠামো অনুসরণ করা গুরুত্বপূর্ণ। এটা দেখতে এমন হবে,
_layouts
এখান থেকে আপনি আপনার পেইজের জন্য ভিন্ন ভিন্ন লেআউট নির্বাচন করতে পারেন। এটাকে অনেকটা ওয়ার্ডপ্রেস পেইজ টেম্পলেটের মতই ভাবতে পারেন। আপনি সম্ভবত আপনার ডিফল্ট লেআউটে একটি সাইডবার এবং আরেকটি লেআউট এমন চাইবেন যাতে কোনও সাইডবার থাকবে না। ফাইলের নামের উপর ভিত্তি করে আপনি আপনার কন্টেন্টে এই লেআউটগুলিকে উল্লেখ করবেন।
আরও এগিয়ে যান এবং আপনার প্রজেক্টের মূল বা রুট ফোল্ডারে একটি _layouts ফোল্ডার তৈরি করুন। এবার চলুন ডিফল্ট লেআউটটি তৈরি করা যাক। _layouts ফোল্ডারের ভিতর তাহলে এবার একটি default.html ফাইল তৈরি করি। এভাবে আপনি অন্যান্য পেইজেও আপনার ডিফল্ট লেআউটটির রেফারেন্স ব্যবহার করতে পারবেন।
কয়েকটি জিনিস আছে যা সম্ভবত আপনি আপনার প্রতিটি লেআউট ফাইলে যোগ করতে চান, যেমন পেইজের শিরোনাম ও বিষয়বস্তু। আপনি যদি আপনার পৃষ্ঠার শিরোনামটি প্রদর্শন করতে চান, তাহলে নিম্নোক্ত সিনট্যাক্স ব্যবহার করে এটি আপনার লেআউটটিতে যোগ করতে হবে:
<h1>{{ page.title }}</h1>
আপনি সম্ভবত লে-আউটের মধ্যে প্রতিটি পৃষ্ঠার বিষয়বস্তু কোথায় বসবে তাও নির্দিষ্ট করে দিতে চান। এটি করার জন্য, আপনাকে নিম্নলিখিত সিনট্যাক্স ব্যবহার করতে হবে:
{{ content }}
এটা উদাহরণ প্রকল্পের default.html এ ব্যবহৃত হয়েছে।
আপনি সম্ভবত এমন কিছু বিষয় অন্তর্ভুক্ত করতে চান যা হেডার, ফুটার, নেভিগেশন এবং অন্যান্য বিষয়ের মতো প্রতিটি পৃষ্ঠায় পুনঃব্যবহার করা হবে। তাই, আপনি _includes ফোল্ডারে এইসব যোগ করতে পারেন।
_includes
includes হচ্ছে ঐ সমস্ত বিষয় যেগুলো আপনি বিভিন্ন পৃষ্ঠায় পুনরায় ব্যবহার করতে চান, যেমনটা আমি উপরে উল্লেখ করেছি। আপনি নিশ্চয়ই এবার পুনর্বার ব্যবহৃত বিষয়গুলো _includes ফোল্ডারে রাখতে চান। এজন্য আপনার প্রজেক্টের রুটে একটি _includes ফোল্ডার তৈরি করুন।
ধরা যাক, আপনি ডকুমেন্টের হেডটি একটি include হিসেবে ব্যবহার করবেন। এজন্য আপনাকে প্রথমে _includes ফোল্ডারে একটি head.html ফাইল যোগ করতে হবে। এরপর আপনি ডকুমেন্ট হেডের জন্য প্রয়োজনীয় অন্যান্য জিনিসও যোগ করতে পারেন। যেমন, doctype, meta data, scripts ইত্যাদি।
এরপর head.html ফাইলটি default.html লেআউট ফাইলে উল্লেখ করা প্রয়োজন। আপনি এটা নীচের syntax ব্যবহার করে করতে পারেন:
{% include head.html %}
উদাহরণ প্রকল্প চেক করে দেখতে পারেন যে, ইতিমধ্যেই default.html ফাইলে এটা ব্যবহার করা হয়েছে।
হেডার এবং ফুটারের মতো পৃষ্ঠার মধ্যে পুনঃব্যবহার করতে চান এমন যে কোনও কিছুর জন্যও একই কাজ করবেন। অবশ্য _includes ফোল্ডারের ভিতর সাব-ফোল্ডার তৈরি করে সেগুলোর উল্লেখ করে দেয়া যেতে পারে। এটা করে একটি পেইজের বিভিন্ন সেকশন সুসংগঠিত রাখা যায়, যদি তাতে অনেকগুলো বিষয়বস্তু থাকে।
পেজগুলো সেটাপ করে নিন
ইতিমধ্যেই, আমরা একটি ডিফল্ট লেআউট পেয়েছি, চলুন এবার প্রথম পৃষ্ঠাটি তৈরি করা যাক। এগিয়ে যান এবং আপনার প্রজেক্টের রুট ফোল্ডারে একটি index.html ফাইল তৈরি করুন। চিন্তিত হবেন না। যদি আপনি এটাকে ডকুমেণ্ট হিসেবে ওয়ার্ডপ্রেস থিমেও ব্যবহার করেন, তবে এটা আপনার থিমের index.php ফাইলকে অগ্রাহ্য করবে না।
প্রত্যক ফাইলের উপরে আপনাকে পেইজের জন্য কিছু বিষয় নির্দিষ্ট করে দিতে হবে। এগুলো হচ্ছে সেসব বিষয়, যেগুলো jekyll প্রত্যেকটা পেইজ তৈরির আগে উল্লেখ করবে। এখান বেশ কিছু বিষয় আছে, যেগুলো আপনি সেট করতে পারেন, কিন্তু আমি এদের মাত্র কয়েকটি বিষয়ের উপর আলোকপাত করতে যাচ্ছি:
- layout - যেই লেআউটটি আপনি এই পেইজে ব্যবহার করতে চান।
- title - পেইজ এর শিরোনাম
- slug - পেইজ এর জন্য সুন্দর পারমালিংক
এখানে একটি উদাহরণ দেয়া হলো যা আপনার index.html ফাইলের উপরে যোগ করতে হবে:
1 |
--- |
2 |
layout: default |
3 |
title: Tuts+ GitHub Pages |
4 |
slug: tuts-github-pages |
5 |
--- |
আমাদের পেইজ সেটআপ করা হলো, এখন যা করতে হবে তা হচ্ছে কন্টেন্ট যুক্ত করা। সহজভাবে আপনি আপনার পেইজে দেখতে চান এমন সব HTML যোগ করুন।
পেজগুলো বিল্ড ও সার্ভ করা
পৃষ্ঠা তৈরি এবং পরিবেশন কমান্ড লাইনের মাধ্যমে সম্পন্ন করা হয়। এজন্য আপনার পছন্দমত কমান্ড লাইন টুলটি খুলুন। ভিতরে jekyll serve টাইপ করুন ও এণ্টার কী চাপুন। আপনি নীচের আউটপুটটি দেখতে পাবেন:
আপনি যদি সঠিকভাবে আউটপুট দেখতে পান, তাহলে আপনার পেইজটি তৈরি হয়েছে এবং প্রদর্শনের জন্য প্রস্তুত। এখন আপনি http://localhost:9001 এ গিয়ে, অথবা যেই পোর্ট আপনার _config.yml ফাইলে দেয়া হয়েছে তাতে গিয়ে আপনার ওয়েবসাইটটি দেখতে পাবেন। আপনার পছন্দের যেকোনো ব্রাউজারেই এটা দেখতে পাবেন।
পরিশেষ
এই প্রকল্পের সাথে সাথে আমি আপনাকে Jekyll ব্যবহারের মূলসুত্র গুলো দেখিয়েছি। আমি দেখিয়েছি কিভাবে কনফিগারেশন ফাইল ও প্রকল্পের গঠন তৈরি করতে হয়। কিভাবে আপনার পৃষ্ঠাগুলি নির্মাণ এবং পরিবেশন করতে পারেন সে সম্পর্কেও আমি বলেছি। যদি আপনি সবকিছু একসাথে দেখতে চান, তাহলে এই উদাহরণ প্রকল্পটি দেখতে পারেন।
পরবর্তী পোস্টে, কিভাবে পৃষ্ঠাগুলিকে গিটহাব পেজে পরিবেশন করবেন এবং আপনার ওয়ার্ডপ্রেস থিম বা প্লাগইনে বিতরণ করবেন সে সম্পর্কে আলোচনা করব।
রিসোর্স সমূহ
