শূন্য থেকে ফ্রি ওয়েবসাইট বানানোর সম্পূর্ণ গাইড

নিজের নামে একটা ওয়েবসাইট — পোর্টফোলিও, পরিচিতি পেজ, ছোট ব্যবসার পেজ বা এই ব্লগের মতো টুলস সাইট — বানানো আজকাল একদম টাকা ছাড়া সম্ভব। হোস্টিং ফ্রি দেয় GitHub Pages, Netlify ও Cloudflare Pages; কোড লেখা শেখা যায় ফ্রি রিসোর্সেই। এই পোস্টে শূন্য থেকে শুরু করে লাইভ ওয়েবসাইট পর্যন্ত পুরো পথটা ধাপে ধাপে বর্ণনা করছি — যেভাবে আপনি এখন যে সাইটটি পড়ছেন, সেটিও একই পদ্ধতিতে তৈরি।

ধাপ ১: তিনটি ফাইল দিয়েই শুরু

যেকোনো ওয়েবসাইটের মূল তিনটি জিনিস: HTML (কী থাকবে), CSS (কেমন দেখাবে) আর JavaScript (কী কাজ করবে)। নিজের কম্পিউটারে একটি ফোল্ডার বানান, তার ভেতরে Notepad/VS Code-এ ফাইল খুলে লিখুন:

• index.html — হোমপেজ
• style.css — রঙ, ফন্ট, লেআউট
• script.js — বাটনের কাজ, ক্যালকুলেশন

সবচেয়ে ছোট হোমপেজটি এরকম:

<!DOCTYPE html>
<html lang="bn">
<head> <meta charset="UTF-8"> <title>আমার সাইট</title> <link rel="stylesheet" href="style.css"> </head>
<body> <h1>হ্যালো বিশ্ব!</h1> <script src="script.js"></script> </body>
</html>

ফাইলটি ডাবল-ক্লিক করে ব্রাউজারে খুললেই আপনার প্রথম পেজ চলছে — এটাই প্রথম জয়। এরপর w3schools.com বা MDN Web Docs-এ ধাপে ধাপে ট্যাগ ও স্টাইল শিখুন।

ধাপ ২: ফ্রি হোস্টিং — GitHub Pages

কম্পিউটারে চলছে মানে বিশ্ব দেখছে না। সাইট অনলাইনে দিতে হলে ফাইলগুলো একটি সার্ভারে রাখতে হয় — এটাই হোস্টিং। GitHub Pages সম্পূর্ণ ফ্রি:

1. github.com-এ ফ্রি অ্যাকাউন্ট খুলুন।
2. "New repository" তৈরি করুন — নাম দিন username.github.io (username আপনার অ্যাকাউন্টের নাম)।
3. "uploading an existing file" লিংকে ক্লিক করে আপনার ফোল্ডারের সব ফাইল ড্র্যাগ করে ছাড়ুন, তারপর "Commit changes"।
4. ২ মিনিটের মধ্যে https://username.github.io ঠিকানায় সাইট লাইভ!

ধাপ ৩: আরও সহজ বিকল্প — Netlify Drop

গিটহাবে ধরতে না পারলে আরও সহজ রাস্তা আছে: app.netlify.com/drop খুলুন, আপনার পুরো ফোল্ডারটি ব্রাউজারে ড্র্যাগ করে ছাড়ুন — সঙ্গে সঙ্গে একটি লাইভ লিংক (যেমন random-name.netlify.app) পেয়ে যাবেন। কোনো কমান্ড, কোনো কনফিগ লাগে না। পরে ফ্রি অ্যাকাউন্টে সাইন আপ করে লিংকটি পরিবর্তনও করা যায়।

ধাপ ৪: কাস্টম ডোমেইন (ঐচ্ছিক)

username.github.io চলতে না চলুক, তবে নিজের নামের ডোমেইন (যেমন yourname.com) কিনতে বছরে সামান্য খরচ হয় (দেশি প্রোভাইডারে .com ডোমেইন সাধারণত ১২০০–১৬০০ টাকা/বছর)। ডোমেইন কিনে GitHub Pages বা Netlify-র সেটিংসে DNS রেকর্ড যোগ করলেই আপনার সাইট নিজের নামে চলবে। ফ্রি হোস্টিং থাকবেই — শুধু নামের জন্য খরচ।

ধাপ ৫: সাইটকে দ্রুত ও প্রফেশনাল করুন

• ছবি কম্প্রেস করুন: সাইট ধীর হওয়ার প্রধান কারণ বড় ছবি। আমাদের ইমেজ কম্প্রেসর দিয়ে আপলোডের আগেই ছবি ছোট করে নিন। বিস্তারিত: ছবি কম্প্রেস গাইড।
• মোবাইল টেস্ট করুন: দর্শকের বেশিরভাগই মোবাইল থেকে আসবে — ফোনে খুলে দেখুন সব ঠিক দেখায় কি না। CSS-এ media query শিখুন।
• ফন্ট: Google Fonts থেকে Hind Siliguri বা Noto Sans Bengali যোগ করলে বাংলা লেখা সুন্দর দেখাবে।
• বেসিক SEO: প্রতি পেজে <title> ও <meta name="description"> দিন — গুগলে দেখাতে এটাই প্রথম ধাপ।

কমন ভুল ও সমাধান

• পেজ খালি দেখাচ্ছে: ফাইলের নাম হুবহু index.html কিনা দেখুন (Index.html/Index.HTML নয়)।
• CSS কাজ করছে না: href="style.css" স্পেলিং ও ফাইল একই ফোল্ডারে আছে কি না মিলিয়ে নিন।
• ছবি দেখাচ্ছে না: লোকাল পাথ (C:/Users/...) নয়, রিলেটিভ পাথ (images/photo.jpg) ব্যবহার করুন।
• আপডেট দেখাচ্ছে না: ব্রাউজার ক্যাশ — Ctrl+Shift+R দিয়ে হার্ড রিফ্রেশ করুন।

পরের গন্তব্য

বেসিক সাইট চলতে শুরু করলে এরপর শিখুন: ফর্ম (যোগাযোগের মেসেজ), ডার্ক মোড, আর চাইলে একটি ফ্রেমওয়ার্ক (Tailwind CSS বা React)। মনে রাখবেন — শেখার সেরা উপায় বানানো। আজ হ্যালো-ওয়ার্ল্ড পেজ, আগামী মাসে হয়তো আপনার নিজের টুলস সাইট!