আজকে লেখব আন্ডার-রেটেড একটা টপিক নিয়ে- Static Site Generator, চলেন চেক করে দেখি, আপনি কোন দলে সেটা টিক চিহ্ন দিয়ে জানান-
- আমি Static Site Generator নিয়ে কাজ করেছি
- আমি Static Site Generator সম্পর্কে শুনেছি, কাজ করিনি
- আমি Static Site Generator সম্পর্কে জানতাম না
[১] সবাই মার্ন-বার্ন-সার্ন, ল্যারাভেল-মার্ভেল স্ট্যাক নিয়ে ব্যস্ত, কিন্তু দুনিয়াতে আরও অনেক কিছু আছে এগুলা ছাড়া, এবং ব্যক্তিগতভাবে আমার মনে হয়, ‘বেসিক HTML, CSS, JS’ শেখার পর এই SSG বা Static Site Generator-গুলো নিয়ে কাজ করলে ক্যারিয়ারে এবং কাজের অভিজ্ঞতায় একটা নতুন স্বাদ আসবে। অনেকটা ভুনা খিচুড়িতে আচার বা ভর্তার মত।
এখানে স্রেফ বলার জন্য আচারের সাথে তুলনা করলাম, কিন্তু চাইলে শুধু এই SSG দিয়েও ক্যারিয়ার করা সম্ভব এবং ফুল টাইম জবও করা সম্ভব, থিমফরেস্টে Jamstack ক্যাটাগরিতে পাবেন এই ধরনের টেম্পলেট/থিমগুলো। আর পপুলার SSG-গুলোর প্রায় সবগুলোর নিজস্ব মার্কেটপ্লেস আছে। Upwork টাইপের যে জব মার্কেটপ্লেসগুলো সেখানেও এদের চাহিদা আছে।
অনেকে Next বা Nuxt-কেও SSG বলে, বললে বলা যায়। মানে এদেরকে SSG হিসেবে চাইলে ব্যবহার করা যায়। কিন্তু সাধারণত ফুল-স্কেল এ্যাপ বানানোর জন্যই এদের ব্যবহার। SSG হিসেবে এদের ব্যবহার সাধারণত দেখা যায় না। আর আজকের আলোচনাটা হলো যারা ‘বেসিক HTML, CSS, JS শিখেছে’ তাদের জন্য।
[২] তো চলেন যারা ‘বেসিক HTML, CSS, JS শিখেছে’ তাদের জন্য Static Site Generator এর একটা সহজ ছবি আঁকার চেষ্টা করি-
- আপনি একটা টেম্পলেটের কাজ করছেন, সব কাজ শেষ হওয়ার পর দেখলেন মেন্যু আইটেমগুলোতে পেইজ লিংক করা হয় নাই
এখন আবার সবগুলা পেইজে গিয়ে এই কাজটা করতে হবে। - অথবা সব পেইজ হইছে, কিন্তু ঐ যে header এর টপ-রাইট সাইডে Contact us বাটনে একটা আইকন চেঞ্জ করা লাগবে, একইভাবে সব পেইজে আবারও একটা শিক্ষা-সফর দিতে হবে।
এখানে শুধু দুইটা উদাহরণ দিলাম, এ ধরনের দাঁতে দাঁত চেপে মাড়ি-ভাঙ্গা শিক্ষা-সফর আমরা অনেকেই দিছি। উপরে দেখানো দুইটা উদাহরণের মত আরও অনেক কারনে এমন হয়।
কিন্তু যদি এর একটা সহজ সমাধান থাকতো, যেমন,
- মেন্যুটা যদি এক জাগায় থাকত, চেঞ্জ করা লাগলে সেই এক জাগায় করলে সেটা সব জাগায় চেঞ্জ হয়ে যেত!
- যদি ফুটার আলাদা একটা ফাইলে রাখা যেত, যেন মাত্র এক জায়গা থেকে সেটা আপডেট করা যেত, সব জাগায় না করা লাগত!
- একইভাবে
page-header-সহ আরও যে সব কম্পোন্যান্ট এবং সেকশান রিপিট করা হয়, সেগুলোকে এক জাগায় রেখে দেয়া যেত, যখন যেখানে দরকার ব্যবহার করা যেত এবং এডিট ও আপডেট করা যেত এক জায়গা থেকে!
Static Site Generator এ এই কাজটা খুব সহজেই করা যায়। আরও অনেক অনেক এবং আরও অনেক অনেক এবং আরও অনেক অনেক সুবিধা আছে, এটা মাত্র একটা, খুবই গুরুত্বপূর্ণ, তাই এটা দিয়েই ছবিটা আঁকার চেষ্টা করলাম।
[৩] এখন প্রশ্ন করতে পারেন যে, ভাই, খুবই সুন্দর বিষয়, অনেক সুবিধা এবং অনেক সুন্দর। কিন্তু -
- আমি তো কাজ করি HTML Template নিয়া, এই জিনিস দিয়ে আমি কিভাবে কাজ করবো?
- টীম লিডার তো ভাই HTML Template চেক করবে, উনি তো এগুলা চেক করবে না!
- ক্লায়েন্ট তো ভাই HTML Template চাইছে, এডি চায় নাই।
এর উত্তর হলো-
- Static Site Generator এ কাজ শেষ করে আপনি প্রতিটা পেইজের HTML কোড পেইজ সোর্স (View page source অথবা Ctrl+U) থেকে নিতে পারবেন।
- তারপর অনলাইনে যে কোন একটা ভাল HTML formatter/beautifier দিয়ে সেই কোডটুকু ঠিকঠাক করে আপনি HTML পেইজগুলো তৈরি করে ফেলতে পারেন একটা একটা করে।
- এসেট ফোল্ডার সব যার যার জায়গা অনুযায়ী রাখতে পারেন।
- ইমেজ সোর্স, বিভিন্ন
jsএবংcssএসেট এর লিংক একটু পরিবর্তন করা লাগতে পারেন, এ ক্ষেত্রে VS Code Editor এর বাল্ক এডিট এবং রিপ্লেস অপশনটা অনেক কাজে লাগবে।
এটা তো গেল শুধু HTML টেম্পলেট কিভাবে সহজে তৈরি করা যায় সেই কথা। এটা ছাড়া এগুলোর নিজস্ব মার্কেটপ্লেস আছে, থিমফরেস্টে Jamstack-এর কথা তো উপরেই বললাম, তারপর আছে জব মার্কেটগুলোতে এগুলোর কাজ। তাছাড়া আপনি এগুলোর ছোটখাট সার্ভিস অফার করতে পারেন, এই অফারে একটা আকর্ষণ এমন হতে পারে যে, ক্লায়েন্টের কোন সার্ভার লাগবে না ব্লগিং করতে বা পোর্টফোলিও ইত্যাদির ডাটা রাখতে।
[৪] শুরুটা করতে পারেন Astro দিয়ে। কারন এটা তুলনামূলক সহজ অন্যগুলোর চেয়ে। এর চাহিদা এবং রিসোর্সও অনেক, অন্যদিকে বাকি SSG-গুলোর চাহিদা থাকলেও রিসোর্স Astro -এর মত না। Astro নিয়ে সার্চ দিলেই দেখবেন ভাল ভাল এবং আপডেটেড রিসোর্স আছে, সহজেই শিখতে পারবেন।
এটার পর Hugo বা Jekyll ধরতে পারেন। এর আগে মার্কডাউন এবং লিকুইড এই দুইটা শিখার জন্য একটু সময় ব্যয় করতে পারেন। SSG একটা দুইটা শিখলে বাকিগুলা আর এত সময় লাগবে না, আর সত্যি বলতে এগুলো খুবই সহজ, এদের যে অফিসিয়াল ডকগুলো থাকে শুধু সেগুলোই যথেষ্ট। Hugo-এর তুলনায় Jekyll এর রিসোর্স একটু কম বলতে হবে, তবে সবগুলাই মজার, প্রতিটারই কিছু মৌলিক বিষয় আছে যেগুলো এক, আবার কিছু ইউনিক ফিচার আছে যেগুলো ভিন্ন। শিখার পর নিজেই বুঝতে পারবেন কখন কোনটা ব্যবহার করা লাগবে।
এই লেখার মূল উদ্দেশ্য হইল এই Static Site Generator-গুলোর ব্যাপারে আমাদের মধ্যে আরও সচেতনতা তৈরি করা, 'বেসিক HTML, CSS, JS শিখা’র পর এই ফিল্ডে কাজ করাটা তুলনামূলক সহজ, এই বিষয়ে ফোকাস করা।
আজকে এ পর্যন্তই, আল্লাহ হাফেজ, হ্যাপি কোডিং 
কিছু Static Site Generator এর নাম-
আরওকিছু Static Site Generator এর নামের লিস্ট-