ChatGPT দিয়ে ওয়েবসাইট বানাবেন যেভাবে: কাজ করে এমন তিনটি উপায়

ChatGPT দিয়ে ওয়েবসাইট বানাতে আপনি তিনটি উপায়ে এগোতে পারেন: সাইটের HTML ও CSS লিখিয়ে নিয়ে নিজে সেগুলো কোনো হোস্টিং সেবায় বসানো; ওয়েবসাইট বিল্ডারে বসানোর আগে পেজের পরিকল্পনা ও লেখা তৈরি করানো; অথবা ChatGPT-এর ভেতরে Mythex-এর মতো একটি AI বিল্ডার যুক্ত করা, যাতে একই চ্যাট থেকেই সাইটটি বানানো, হোস্ট করা ও প্রকাশ করা যায়। প্রথম উপায়টি বিনামূল্যে এবং একটি পেজের সাইটের জন্য যথেষ্ট; সাইটে যখন ডেটা সংরক্ষণকারী ফর্ম, লগইন বা নিয়মিত আপডেট দরকার হয়, তখন তৃতীয় উপায়টি বেশি উপযোগী। এই গাইডে প্রতিটি পদ্ধতি প্রম্পটসহ দেখানো হয়েছে এবং কোথায় কোন পদ্ধতি থেমে যায়, তাও স্পষ্ট করা হয়েছে।

ChatGPT নিজে কী করতে পারে এবং কী পারে না

ChatGPT লেখালেখিতে খুব ভালো: কোড, শিরোনাম, পেজের লেখা ও পরিকল্পনা, সবই সে লিখতে পারে। তবে সে নিজে কোনো হোস্টিং কোম্পানি নয়। সে আপনার সাইটের জন্য কোনো পাবলিক ঠিকানা দেয় না, ডেটাবেস চালায় না, এবং একটি বিল্ডার যেভাবে প্রজেক্টের ফাইল রেখে দেয়, সেভাবে প্রজেক্টের মধ্যে সাইটের ফাইল ধরে রাখে না। নিচের প্রতিটি পদ্ধতি এই ফাঁক পূরণের ভিন্ন একটি উপায়।

পদ্ধতি ১: ChatGPT কোড লেখে, আপনি হোস্ট করেন

এটি চিরাচরিত পদ্ধতি এবং একটি সাধারণ স্ট্যাটিক সাইটের জন্য ভালো কাজ করে: যেমন পোর্টফোলিও, ল্যান্ডিং পেজ বা বিয়ের পেজ।

ধাপ ১: একটি সম্পূর্ণ, এক-ফাইলের পেজ চান

কনটেন্ট ও লেআউট সম্পর্কে নির্দিষ্ট হোন:

আমার জন্য CSS সহ একটি সম্পূর্ণ এক-পেজের ওয়েবসাইট লেখো, যা একটি একক HTML ফাইল হবে এবং CSS থাকবে একটি style ট্যাগের ভেতরে। এটি আম্মানের একজন ফ্রিল্যান্স চিত্রশিল্পী Maya Haddad-এর জন্য। অংশগুলো: নাম ও "Books and brands-এর জন্য ইলাস্ট্রেশন" লেখাসহ একটি হেডার, ছয়টি পোর্টফোলিও ছবির একটি গ্রিড (আমি বদলাতে পারি এমন প্লেসহোল্ডার ছবির পথ ব্যবহার করো), একটি ছোট about অনুচ্ছেদ, শুরুর দামসহ তিনটি সেবার তালিকা, এবং তার ইমেইলের mailto লিংকসহ একটি যোগাযোগ অংশ। পরিষ্কার, আধুনিক ডিজাইন, প্রচুর ফাঁকা জায়গা, ফোনে ভালো দেখায়। কোনো JavaScript framework নয়।

একটিমাত্র ফাইল চাইলে সেটি সংরক্ষণ ও আপলোড করা সহজ হয়।

ধাপ ২: সংরক্ষণ করুন ও খুলুন

কোডটি একটি টেক্সট এডিটরে কপি করে index.html নামে সংরক্ষণ করুন এবং ব্রাউজারে খুলুন। কিছু ঠিক না লাগলে ChatGPT-কে বর্ণনা দিন, যেমন: "ডেস্কটপে ছবির গ্রিড এক কলামে আসছে; ৯০০px-এর বেশি প্রস্থে তিন কলাম করো।"

ধাপ ৩: প্লেসহোল্ডার বদলান

প্লেসহোল্ডার ছবিগুলো নিজের ছবি দিয়ে বদলান এবং ChatGPT যে লেখা বানিয়েছে তা প্রতিস্থাপন করুন। দাম, ইমেইল ও নাম সতর্কভাবে যাচাই করুন; AI ফাঁক ভরাট করে আত্মবিশ্বাসের সঙ্গে, তাই ভুল থাকলেও তা ধরা কঠিন।

ধাপ ৪: অনলাইনে আনুন

ফাইলটি GitHub Pages-এর মতো একটি বিনামূল্যের স্ট্যাটিক হোস্টে, অথবা আপনি আগে থেকেই যে ওয়েব হোস্টের জন্য টাকা দেন সেখানে আপলোড করুন। একটি পাবলিক ঠিকানা পাবেন। নিজের ডোমেইন ব্যবহার করতে চাইলে হোস্টের নির্দেশনা অনুসরণ করুন; DNS অংশটি বোঝার জন্য আমাদের কাস্টম ডোমেইন যুক্ত করার গাইডটি দেখুন।

পদ্ধতি ১ যেখানে থেমে যায়

• ডেটা সংরক্ষণকারী ফর্ম। যোগাযোগ ফর্মের জমা দেওয়া তথ্য কোথাও পাঠাতে হয়। এর জন্য একটি ফর্ম সেবা বা একটি সার্ভার লাগবে।
• লগইন ও সদস্যদের এলাকা। এর জন্য ব্যাকএন্ড ও ডেটাবেস লাগে।
• অনেক পেজ। হাতে বসানো দশটি ফাইলে হেডার ও মেনু একই রাখা বিরক্তিকর হয়ে ওঠে।
• আপডেট। প্রতিটি পরিবর্তনের জন্য নতুন কোড চাইতে হয়, সেটি বসাতে হয় এবং আবার আপলোড করতে হয়।

পদ্ধতি ২: ChatGPT পরিকল্পনা করে, বিল্ডার বানায়

এখানে ChatGPT চিন্তা ও লেখার কাজ করে, আর একটি ওয়েবসাইট বিল্ডার সাইট বানানো ও হোস্ট করার কাজ করে।

ধাপ ১: ChatGPT দিয়ে সাইটের পরিকল্পনা করুন

আমি ম্যানচেস্টারে একটি ছোট পারিবারিক বেকারি চালাই, যেখানে কেকের অর্ডার নেওয়া হয়। আমার ওয়েবসাইটের কোন কোন পেজ লাগবে, প্রতিটি পেজে কী লেখা উচিত এবং প্রতিটি পেজে দর্শক কোন একটি কাজ করুক সেটি বলো। পাঁচটি বা তার কম পেজ রাখো।

ধাপ ২: লেখা তৈরি করান

প্রতিটি পেজের লেখা চান, তারপর নিজের ভাষায় বদলান। যেসব আসল তথ্য ChatGPT জানতে পারে না তা যোগ করুন: খোলার সময়, দাম, ডেলিভারির এলাকা, আপনার কেক কেন আলাদা।

ধাপ ৩: একটি বিল্ডারে বানান

পরিকল্পনা ও লেখা একটি ওয়েবসাইট বিল্ডারে বসান। ড্র্যাগ-অ্যান্ড-ড্রপ টুলে লেখাটি একটি টেমপ্লেটে বসাতে হয়। একটি AI বিল্ডারে পুরো পরিকল্পনাটি একটি বার্তায় দিলেই সে পেজগুলো বানিয়ে দেয়; যেমন Mythex ওয়েবসাইট বিল্ডারে:

এই পরিকল্পনা ও লেখা ব্যবহার করে ম্যানচেস্টারের একটি পারিবারিক বেকারির জন্য ওয়েবসাইট বানাও: [এখানে পেস্ট করুন]। একটি অর্ডার অনুরোধ ফর্ম যোগ করো, যা প্রতিটি অনুরোধ (নাম, ফোন, কেকের ধরন, কবে লাগবে, বার্তা) সংরক্ষণ করবে যাতে আমি শুধু আমার লগইন করা একটি অ্যাডমিন পেজে সেগুলো দেখতে পারি। উষ্ণ ও ঘরোয়া ডিজাইন, ফোনে ভালো চলে।

এখানে অর্ডার ফর্মটি একটি আসল ডেটাবেসে সংরক্ষিত হয়, যা একটি পেস্ট করা HTML ফাইল পারত না। এই পথের আরও তথ্যের জন্য দেখুন AI দিয়ে ওয়েবসাইট কীভাবে বানাবেন।

পদ্ধতি ৩: ChatGPT-এর ভেতর থেকে বানিয়ে প্রকাশ করুন

সবচেয়ে নতুন উপায় হলো একটি বিল্ডারকে ChatGPT-এর সঙ্গে যুক্ত করা, যাতে ChatGPT সরাসরি সেই বিল্ডারের টুল ব্যবহার করতে পারে। আপনি ChatGPT-এর চ্যাটেই থাকেন; প্রজেক্ট, প্রিভিউ, ডেটাবেস ও হোস্টিং দেয় বিল্ডার।

Mythex এভাবেই কাজ করে তার ChatGPT অ্যাপের (একটি MCP কানেক্টর) মাধ্যমে। Mythex-এর Account settings থেকে এটি যুক্ত করেন; যুক্ত করা যেকোনো প্ল্যানে কাজ করে, তবে আপনার প্রজেক্টের স্যান্ডবক্স চালায় যে টুলগুলো, সেগুলোর জন্য Pro লাগে। যুক্ত হলে আপনি ChatGPT-কে এমন কিছু বলতে পারেন:

Mythex ব্যবহার করে আমার বেকারির জন্য একটি নতুন ওয়েবসাইট বানাও, যাতে একটি হোম পেজ, কেক ও দামসহ একটি মেনু পেজ, এবং একটি অর্ডার অনুরোধ ফর্ম থাকে যা ডেটাবেসে সংরক্ষণ হবে। প্রিভিউ দেখাও, আর আমি ঠিক আছে বললে প্রকাশ করো।

এরপর ChatGPT প্রজেক্ট তৈরি করে, কোড লেখে, সেটি চালায় এবং আপনি অনুমোদন দিলে একটি পাবলিক URL-এ প্রকাশ করে। পরিবর্তনগুলো একই চ্যাটে নতুন বার্তা হিসেবেই দেওয়া যায়। একই কানেক্টর পদ্ধতি Claude, Cursor ও Codex থেকেও কাজ করে। কীভাবে এটি কাজ করে এবং কোন বিল্ডার এটি সমর্থন করে, সে সম্পর্কে জানতে দেখুন MCP সহ AI অ্যাপ বিল্ডার।

কোন পদ্ধতি বেছে নেবেন?

সব পদ্ধতিতে কাজে লাগে এমন প্রম্পটের টিপস

• শুরুতেই আসল তথ্য দিন। নাম, অবস্থান, সেবা, দাম, যোগাযোগের তথ্য। বানোয়াট তথ্য কম থাকলে পরে পরিষ্কার করতে কম সময় লাগে।
• দর্শক ও লক্ষ্য বর্ণনা করুন। "একজন অভিভাবক যিনি জন্মদিনের কেক খুঁজছেন এবং যিনি শেষে একটি অর্ডার অনুরোধ পাঠাবেন।"
• ফোন-প্রথম লেআউট চান। বেশিরভাগ দর্শক ফোন ব্যবহার করেন।
• প্রথম সংস্করণ হয়ে গেলে একবারে একটি জিনিস বদলান।
• SEO-র মূল বিষয়গুলো স্পষ্টভাবে চান: প্রতিটি পেজের আলাদা শিরোনাম ও বিবরণ, সঠিক হেডিং, ছবিতে alt টেক্সট। দেখুন AI দিয়ে বানানো ওয়েবসাইটের SEO।

AI অ্যাপ বিল্ডারের জন্য প্রম্পট লেখার আরও ধরন পেতে আমাদের AI অ্যাপ বিল্ডারের প্রম্পট লেখা গাইডটি দেখুন।

সাধারণ সমস্যা ও সমাধান

• ডিজাইন সাধারণ লাগছে। একটি উদাহরণ দিন: "শান্ত স্ক্যান্ডিনেভিয়ান ক্যাফের মতো, বেশিরভাগ সাদা আর একটি হালকা সবুজ রং"।
• কোড মাঝপথে কেটে গেছে। ChatGPT-কে শেষ লাইন থেকে চালিয়ে যেতে বলুন, অথবা পেজটিকে কয়েকটি অংশে ভাগ করে একবারে একটি অংশ দিতে বলুন।
• এটি সাক্ষ্য বা পরিসংখ্যান বানিয়ে ফেলেছে। সেগুলো মুছে ফেলুন। ভুয়া রিভিউ আস্থা নষ্ট করে এবং অনেক জায়গায় তা ভোক্তা সুরক্ষা আইনের পরিপন্থী।
• একটি পরিবর্তনের পর সাইট ভেঙে গেছে। নতুন কোড বসানোর আগে শেষ কার্যকর সংস্করণের একটি কপি রাখুন। Mythex-এর মতো বিল্ডার চেকপয়েন্ট রাখে, যাতে আপনি আগের অবস্থায় ফিরে যেতে পারেন।

প্রকাশের আগে

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

প্রশ্নোত্তর