আপনি HTML, CSS, JavaScript দিয়ে একটা অপূর্ব কাজ করে ফেলেছেন। সেটা ছড়িয়ে দেবার জন্য Github-এ একটা রেপোযিটরিও করে ফেলেছেন এবং সেখানে আপলোডও করে দিয়েছেন। লোকজন এখন চাইলেই আপনার রোপোযিটরিটা ফর্ক করতে পারছেন, ক্লোন করতে পারছেন, ডাউনলোডও করতে পারছেন। কিন্তু একটা ব্যাপারে ঠিক মন ভরছে না – যদি কাজটার একটা ডেমো দেখানো যেত অনলাইনেই? তাহলে তো সোনায় সোহাগা হতো।

আমরা এখানে জানবো: কিভাবে গিটহাবে একটা স্ট্যাটিক ডেমো সাইট তৈরি করা যায়।

একটু বলে রাখি, বারবার স্ট্যাটিক সাইট কথাটা কেন বলছি? স্ট্যাটিক সাইটে সার্ভার সাইড কোনো কোড থাকছে না, পিওর এইচটিএমএল, সিএসএস আর জাভাস্ক্রিপ্ট দিয়ে আপনি সাইটটা তৈরি করছেন, আর দেখাচ্ছেন। কারণ ডাটাবেজ স্টোর করার মতো কোনো জায়গা আমরা পাচ্ছি না।

যা যা জানা থাকা লাগবে

অন্তত একটা HTML ফাইল বানানো জানা লাগবে। এছাড়া, যখন যা জানার দরকার পড়বে, একটু ঢু মেরে সেটা জেনে নিলেই চলবে।

কিভাবে কী করতে হয়?

প্রথম ধাপ: গিটহাবে কোড ডিপ্লয়

কাজটা খুবই সহজ।

ধরে নিচ্ছি আপনার একটা স্ট্যাটিক সাইট আগে থেকেই বানানো আছে যেখানে একটা index.html আছে। (যেমন আমরা একটা স্ট্যাটিক সাইট বানিয়ে রেখেছি)

এই ডিরেক্টরিটিকে এবারে একটা গিট রিপো বানিয়ে ফেলি। গিট কিভাবে ব্যবহার করতে হয়, জানা না থাকলে চট করে একটা ঢু মেরে শিখে ফেলা যাক:

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১

এবারে git bash-এ কমান্ড লিখি:

git init
git add -A
git commit -m "Initial Commit"

এবারে গিটহাবে প্রোজেক্টটা তুলে দিতে হলে গিটহাবে গিয়ে একটা ফাঁকা রিপো তৈরি করে নিই: New Repository-তে গিয়ে শুধু একটা নাম দেই, আর কিচ্ছু দেয়া লাগবে না। এবারে Create Repository-তে ক্লিক করলে আপনাকে ইন্সট্রাকশন দিবে কী করা লাগবে। সেখান থেকে এই লাইনটা লেখা যাক গিট ব্যাশ-এ:

git remote add origin https://github.com/{username}/{repository-path}.git

বুঝতেই পারছেন, এখানে {username} আর {repository-path} আপনার পাথ আর ইউযারনেম দিয়ে পূরণ করবেন। এতে গিটহাবের ঐ রিপোযিটোরিটা আমরা রিমোট হিসেবে যোগ হয়ে যাবে। ব্যাস, এবার আপনার কোডগুলো গিটহাবে তুলে দিন:

git push origin master

শেষ ধাপ: গিট পেজ তৈরি করা

পদ্ধতি ১ : মাস্টার ব্রাঞ্চকেই ব্যবহার করা

যেহেতু আমরা আমাদের master ব্রাঞ্চে যা যা আছে, সেটাকেই Demo আকারে দেখাতে চাচ্ছি, আমাদের জন্য কাজটা খুব সহজ। গিটহাবে আপনার রেপোযিটোরি’র Settings পাতায় যান (ইউআরএলটা এরকম হবে: https://github.com/{username}/{repository-name}/settings)

এবারে নিচের দিকে Github Pages ব্লকের Source অংশের None লেখা ড্রপডাউন থেকে বাছাই করে দিন master branch। তারপর Save বোতাম চাপুন। কাজ শেষ।

আপনার Demo সাইটটা আপনার master ব্রাঞ্চের তথ্য (index.html) নিয়ে তৈরি হয়ে গেছে। দেখা যাবে এরকম একটা পাথে:

https://{username}.github.io/{repository-name}/

কাজ শেষ। 🙂

পদ্ধতি ২ : ব্রাঞ্চ করে নেয়া

যদি আপনি চান যে, ডেমো পাতাটা সম্পূর্ণ অন্যভাবে করতে, মূল কোডের সাথে মিল না রাখতে, কিংবা কিছুটা ভিন্ন রাখতে, তাহলে আলাদা একটি ব্রাঞ্চ তৈরি করে সেখানে দেখিয়ে দেয়াটাই উত্তম হবে। এমতাবস্থায় আমরা গিট রিপোযিটোরিতে একটা ব্রাঞ্চ তৈরি করবো। যদি গিটে ব্রাঞ্চিং কিভাবে করতে হয়, জানা না থাকে, চট করে শিখে নেয়া যাক:

গিট দিয়ে ভার্ষন নিয়ন্ত্রণ – git branch

এই ব্রাঞ্চটা দিয়ে গিটহাবে Git Pages কাজ করে, আর ব্রাঞ্চের নামটাও নির্ধারিত gh-pages। সুতরাং চট করে গিট ব্যাশে লিখে ফেলুন:

git checkout -b gh-pages

হলো কী – gh-pages নামে একটা গিট ব্রাঞ্চ তৈরি হয়ে গেলো আর আমরা সেই ব্রাঞ্চে চলেও এলাম। যদি গিট ব্রাঞ্চ আমরা বুঝে থাকি, তাহলে জানি, master ব্রাঞ্চে যা আছে এই নতুন ব্রাঞ্চেও এখন তা তা আছে। অর্থাৎ আমাদের index.html ফাইলটাও এখানে আছে। এই ব্রাঞ্চে আপনি যেমন যেমন চাচ্ছেন, তেমন তেমন ইচ্ছেমতো পরিবর্তন করে নিন, আপনার ডেমো সাইটটা। তারপর গিট অ্যাড আর গিট কমিট করে গিট পুশ করে দিন নতুন ব্রাঞ্চটা:

git push origin gh-pages

এটা স্বয়ংক্রীয়ভাবেই নিম্নোক্ত পাথে আপনার ডেমো সাইটটা তৈরি করে দিবে:

https://{username}.github.io/{repository-name}/

বাড়তি তথ্য

• ডেমো সাইটের জন্য gh-pages ব্রাঞ্চটা যে বাধ্যতামূলক (ম্যান্ডেটরি) না, সেটা আশা করি বুঝে ফেলেছেন। সেক্ষেত্রে যে ব্রাঞ্চ থেকেই ডেমো দেখান না কেন, তা Settings পাতায় বাছাই করে দিলেই কাজ শেষ।
• আপনি যদি চান নিজস্ব ডোমেইন থেকেও ডেমো পাতাটি দেখা যাক, যেমন: example.com লিখে এন্টার করলেও যেন এই সাইটটা দেখা যাকে, তাহলে সেটাও করতে পারবেন: Custom domain অংশে http://example.com লিখে দিতে হবে। কিন্তু শর্ত হচ্ছে ঐ ডোমেইনের CNAME রেকর্ডে বলে দিতে হবে যে, এই হোস্টটা ব্রাউজ করতে হবে।
• আপনি যদি Jekyll^ কিংবা অন্য কোনো স্ট্যাটিক সাইট জেনারেটরে অভ্যস্থ হন, তাহলে নিশ্চিন্তে আপনি সেসব সাইটও গিটহাব পেজেস-এ ডিপ্লয় করতে পারেন। এছাড়া গিটহাবেই Automatic Page Generator রয়েছে, সেটা দিয়েও আপনি Markdown সিনট্যাক্সে আপনার স্ট্যাটিক সাইট বানিয়ে নিতে পারেন।

উপসংহার

সুতরাং আশা করি এখন থেকে আপনার করা HTML, CSS, JavaScript-এর স্ট্যাটিক কাজগুলোর একটা ডেমো আমরা অনায়াসে দেখতে পারবো ইনশাল্লাহ।

আমাদের স্ট্যাটিক সাইটের ডেমোটা দেখা যাক:

https://tuts.local-nano-github-pages/