পর্ব 7 — ভার্সেল (Vercel) দিয়ে ফ্রিতে ওয়েবসাইট লাইভ ও ডিপ্লয়মেন্ট

আগের পর্বে আমরা দেখেছি কীভাবে খুব সহজে আমাদের পোর্টফোলিও ওয়েবসাইটের কোডগুলো গিটহাবে আপলোড করতে হয়। যারা পর্ব 6 মিস করেছেন, তারা আগে গিটহাবের কাজটুকু শেষ করে নিন। আজ আমাদের এআই দিয়ে কোডিং ছাড়া নিজের পোর্টফোলিও ওয়েবসাইট তৈরি সিরিজের শেষ এবং সবচেয়ে রোমাঞ্চকর পর্ব!

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

তাহলে আর দেরি না করে চলুন শুরু করা যাক!

ভার্সেল (Vercel) কী এবং কেন এটি ব্যবহার করব?

সহজ কথায়, Vercel হলো এমন একটি হোস্টিং প্ল্যাটফর্ম যা আপনার কোডকে সরাসরি একটি লাইভ লিংকে রূপান্তর করে। প্রথাগত হোস্টিং বা সিপ্যানেলের (cPanel) মতো এখানে ফাইল আপলোড করার জন্য কোনো জটিল সেটিংস করতে হয় না।

আমরা কেন পোর্টফোলিওর জন্য ভার্সেল বেছে নিলাম, তা নিচের টেবিলটি দেখলেই বুঝতে পারবেন:

সংক্ষেপে বলতে গেলে, এটি অত্যন্ত দ্রুতগতির এবং আপনার ওয়েবসাইট কখনো ডাউন হবে না।

গিটহাব অ্যাকাউন্টের সাথে ভার্সেল কানেক্ট করার সহজ উপায়

আমাদের প্রথম কাজ হলো ভার্সেলের সাথে আমাদের গিটহাব অ্যাকাউন্টটি যুক্ত করা। এতে করে ভার্সেল আমাদের গিটহাব রিপোজিটরি থেকে সরাসরি ফাইলগুলো নিয়ে ওয়েবসাইট তৈরি করে নিতে পারবে।

১. প্রথমে আপনার ব্রাউজারে Vercel ওয়েবসাইটটিতে যান।

২. ডানদিকের উপরে থাকা Sign Up বাটনে ক্লিক করুন।

৩. এখানে আপনি বেশ কয়েকটি অপশন দেখতে পাবেন। আমরা সরাসরি [Continue](/oss/continue) with GitHub অপশনটিতে ক্লিক করব।

৪. আপনার ব্রাউজারে যদি গিটহাব লগইন করা থাকে, তবে একটি অথোরাইজেশন পপ-আপ আসবে। সেখানে Authorize Vercel বাটনে ক্লিক করে পারমিশন দিয়ে দিন।

৫. আপনার মোবাইল নাম্বার ভেরিফাই করতে বলতে পারে। আপনার সচল মোবাইল নাম্বারটি দিয়ে ওটিপি (OTP) কোডটি বসিয়ে দিন।

ব্যাস! আপনার ভার্সেল অ্যাকাউন্ট তৈরি এবং এটি সরাসরি আপনার গিটহাবের সাথে যুক্ত হয়ে গেছে। এখন আপনি আপনার ড্যাশবোর্ড দেখতে পাবেন।

আপনার প্রথম ওয়েবসাইট ডিপ্লয় করার ধাপসমূহ

এবার আমাদের আসল ম্যাজিক দেখার পালা। আমরা গিটহাবে যে কোডটি আপলোড করে রেখেছিলাম, সেটিকে লাইভ করব।

১. ভার্সেল ড্যাশবোর্ডে প্রবেশের পর স্ক্রিনের ডানদিকের কোণায় Add New... লেখা একটি ড্রপডাউন বাটন পাবেন। সেখানে ক্লিক করে Project সিলেক্ট করুন।

২. এবার আপনার সামনে Import Git Repository নামে একটি অপশন আসবে। যেহেতু আপনার গিটহাব অ্যাকাউন্টটি অলরেডি কানেক্টেড, তাই আপনি আপনার তৈরি করা পোর্টফোলিও প্রজেক্টের রিপোজিটরিটি স্ক্রিনে দেখতে পাবেন।

৩. প্রজেক্টের নামের পাশে থাকা Import বাটনে ক্লিক করুন।

৪. এখন আপনার সামনে Configure Project নামের একটি পেজ আসবে। এখানে ভড়কে যাওয়ার কিছু নেই। যেহেতু আমরা নো-কোড এআই দিয়ে পিওর এইচটিএমএল/সিএসএস/জেএস কোড বানিয়েছি, তাই কোনো সেটিংসে হাত দেওয়ার প্রয়োজন নেই।

৫. ফ্রেমওয়ার্ক প্রিসেট (Framework Preset) অপশনটি Other রাখা থাকবে।

৬. এবার জাস্ট নিচের দিকে থাকা নীল রঙের Deploy বাটনে ক্লিক করুন।

ডিপ্লয় বাটনে ক্লিক করার পর ভার্সেল ব্যাকগ্রাউন্ডে আপনার কোডগুলো প্রসেস করা শুরু করবে। সাধারণত ৩০ থেকে ৫০ সেকেন্ডের মধ্যেই এটি সম্পন্ন হয়ে যায়। কাজ শেষ হওয়ার সাথে সাথে স্ক্রিনে চমৎকার কনফেটি (Confetti) বা রঙিন কাগজ ওড়ার অ্যানিমেশন দেখতে পাবেন এবং লেখা উঠবে Congratulations!।

সেখানেই আপনার ওয়েবসাইটের একটি প্রিভিউ ইমেজ এবং নিচে লাইভ লিঙ্ক দেখতে পাবেন। লিঙ্কে ক্লিক করলেই আপনার সাধের পোর্টফোলিও ওয়েবসাইটটি বিশ্ববাসীর সামনে ওপেন হয়ে যাবে!

কাস্টম ডোমেইন যুক্ত করার নিয়ম (ঐচ্ছিক কিন্তু পেশাদার)

ভার্সেল আপনাকে ফ্রিতে একটি সাবডোমেন দেয়, যা দেখতে অনেকটা `yourname.vercel.app` এমন হয়। এটি দিয়েও আপনি যেকোনো ক্লায়েন্ট বা ইন্টারভিউ বোর্ডে নিজের ওয়েবসাইট শেয়ার করতে পারবেন। তবে আপনি যদি আরও প্রফেশনাল লুক দিতে চান, তবে নিজের নামে একটি কাস্টম ডোমেইন (যেমন: `yourname.com`) কিনে সেটি এখানে ফ্রিতে যুক্ত করতে পারেন।

কাস্টম ডোমেইন যুক্ত করার নিয়ম নিচে দেওয়া হলো:

১. আপনার প্রজেক্ট ড্যাশবোর্ডে গিয়ে উপর থেকে Settings ট্যাবে ক্লিক করুন।

২. বামদিকের মেনু থেকে Domains অপশনে যান।

৩. টেক্সট বক্সে আপনার কেনা ডোমেইন নামটি (যেমন: `www.mydomain.com`) লিখে Add বাটনে ক্লিক করুন।

৪. ভার্সেল আপনাকে কিছু DNS রেকর্ড (A Record বা CNAME) দেখাবে।

৫. আপনি যেখান থেকে ডোমেইন কিনেছেন (যেমন: Namecheap বা GoDaddy), সেখানকার কাস্টমার পোর্টালে গিয়ে এই রেকর্ডগুলো আপডেট করে দিলেই কিছুক্ষণের মধ্যে আপনার কাস্টম ডোমেইনে ওয়েবসাইটটি চালু হয়ে যাবে।

ওয়েবসাইট আপডেট করার জাদুকরী পদ্ধতি (অটোমেটিক ডিপ্লয়মেন্ট)

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

সব কাজ হবে অটোমেটিক!

ধরা যাক, আপনি আপনার পোর্টফোলিওর হিরো সেকশনের সাবটাইটেল পরিবর্তন করতে চান। সেজন্য আপনি আবার ChatGPT বা আমাদের পূর্বে ব্যবহৃত এআই টুলের কাছে গিয়ে প্রম্পট দিলেন:

আমি আমার পোর্টফোলিওর হিরো সেকশনের সাবটাইটেল পরিবর্তন করতে চাই। আমার বর্তমান কোডটি নিচে দেওয়া হলো...

কোড পরিবর্তন করার পর:

১. আপনার GitHub রিপোজিটরিতে গিয়ে `index.html` ফাইলটি এডিট করে নতুন কোডটি পেস্ট করে সেভ (Commit) করুন।

২. আর কিচ্ছু করতে হবে না! গিটহাবে কোড সেভ হওয়ার সাথে সাথে ভার্সেল নিজে থেকেই ব্যাকগ্রাউন্ডে নতুন কোডটি নিয়ে মাত্র কয়েক সেকেন্ডের মধ্যে ওয়েবসাইট আপডেট করে দেবে।

আপনাকে কোনো রিলোড বা ম্যানুয়াল আপলোডের ঝামেলাই পোহাতে হবে না।

আমাদের এআই পোর্টফোলিও জার্নির সমাপ্তি ও পরবর্তী পথচলা

অভিনন্দন! আপনি সফলভাবে আপনার কোডিং ছাড়া এআই দিয়ে তৈরি প্রথম পোর্টফোলিও ওয়েবসাইটটি ইন্টারনেটে লাইভ করে ফেলেছেন।

একবার ভেবে দেখুন, মাত্র ৭টি পর্বের এই যাত্রায় আমরা কী কী অর্জন করেছি:

• ক্লোড (Claude) দিয়ে আমরা আমাদের পোর্টফোলিওর কন্টেন্ট ও আইডিয়া প্ল্যান করেছি।
• v0.dev ব্যবহার করে কোনো কোডিং না জেনেই আধুনিক ইন্টারফেস তৈরি করেছি।
• ডার্ক মোড এবং ইন্টারেক্টিভ কন্টাক্ট ফর্ম যুক্ত করেছি।
• গিটহাবে আমাদের কাজগুলো সুরক্ষিত রাখতে শিখেছি।
• এবং সবশেষে ভার্সেল দিয়ে ফ্রিতে ওয়েবসাইটটি লাইভ করেছি।

এখন আপনার এই নতুন পোর্টফোলিও ওয়েবসাইটটির লিংকটি আপনার সিভি, লিঙ্কডইন প্রোফাইল এবং সোশ্যাল মিডিয়ায় শেয়ার করুন। প্রযুক্তির এই নতুন যুগে আপনি নিজেকে এক ধাপ এগিয়ে রাখলেন। নতুন নতুন এআই টুল ব্যবহার করে আপনার এই পোর্টফোলিওকে আরও কীভাবে সাজানো যায়, তা নিয়ে প্রতিনিয়ত এক্সপেরিমেন্ট করতে থাকুন। শুভকামনা আপনার ক্যারিয়ারের জন্য!