ফ্রিতে ১ বছরের টপ লেভেল সাবডোমেইন (.pro.bd / .bro.bd / .ami.bd / .iam.bd / .apu.bd) + ১ বছরের হোস্টিং নেওয়ার সম্পূর্ণ গাইড
Rafe Uddaraj
@rafeuddaraj
Share this article
অনেকেই নিজের নামে একটি ওয়েবসাইট বানাতে চান। কেউ পোর্টফোলিও বানাবেন, কেউ ছোট একটি ব্লগ চালাবেন, কেউ আবার শুধু শেখার জন্য প্র্যাকটিস করবেন। কিন্তু ডোমেইন আর হোস্টিংয়ের খরচের কারণে অনেক সময় শুরু করাই হয়ে ওঠে না।
এই ব্লগে দেখানো হবে কীভাবে একদম ফ্রিতে ১ বছরের জন্য টপ লেভেল সাবডোমেইন এবং ১ বছরের হোস্টিং নেওয়া যায়। পুরো প্রক্রিয়াটি ধাপে ধাপে ব্যাখ্যা করা হয়েছে, যাতে আপনি সহজেই follow করতে পারেন।
এই অফারে কী কী পাওয়া যাচ্ছে
এই অফারের মাধ্যমে নিচের সাবডোমেইনগুলোর যেকোনো একটি নেওয়া যাবে:
.pro.bd
.bro.bd
.ami.bd
.iam.bd
.apu.bd
এর পাশাপাশি পাওয়া যাবে MetroVPS এর ১ বছরের ফ্রি হোস্টিং। অর্থাৎ আলাদা করে হোস্টিং কেনার কোনো প্রয়োজন নেই।
ব্যবহার সংক্রান্ত গুরুত্বপূর্ণ তথ্য
এই ডোমেইনগুলো শুধুমাত্র পার্সোনাল ব্যবহারের জন্য দেওয়া হয়।
যেসব কাজে ব্যবহার করা যাবে:
ব্যক্তিগত পোর্টফোলিও
পার্সোনাল ব্লগ
শেখার জন্য টেস্ট বা প্র্যাকটিস প্রজেক্ট
শিক্ষামূলক বা নন-প্রফিট কাজ
যেসব কাজে ব্যবহার করা যাবে না:
ই-কমার্স ওয়েবসাইট
ক্লায়েন্টের কাজ
ব্যবসা বা ইনকাম করার উদ্দেশ্যে
কোনো প্রতিষ্ঠানের কমার্শিয়াল সাইট
ডোমেইনের নাম যদি আপনার নিজের নাম বা পার্সোনাল ব্র্যান্ডের সঙ্গে মিল থাকে, তাহলে approval এর সম্ভাবনা বেশি থাকে।
স্টেপ ১: সাবডোমেইন সার্চ করা ও আবেদন
প্রথমে Ready.bd ওয়েবসাইটে প্রবেশ করতে হবে। সেখানে ডোমেইন সার্চ বক্সে আপনার পছন্দের নাম লিখে সার্চ করুন।
যদি ডোমেইনটি Available দেখায়, তাহলে সেটির জন্য আবেদন করা যাবে।
ডোমেইন সিলেক্ট করার পর লগইন অথবা সাইন আপ করতে হবে।
স্টেপ ২: ডোমেইন অ্যাপ্রুভালের জন্য অপেক্ষা
আবেদন করার পর ডোমেইনটি সঙ্গে সঙ্গে Active হয় না। কিছু সময় Pending অবস্থায় থাকে।
ম্যানুয়ালি যাচাই করার পর অ্যাপ্রুভ হলে স্ট্যাটাস Active হয়ে যাবে।
স্টেপ ৩: DNS সেটআপ করা
ডোমেইন Active হলে DNS Records অপশনে যেতে হবে।
সেখানে একটি A Record যোগ করতে হবে অথবা আগের রেকর্ডটি এডিট করতে হবে।
Type: A
IP Address: 103.174.51.100
সবকিছু ঠিকভাবে সেভ করুন।
স্টেপ ৪: MetroVPS হোস্টিং অফার ক্লেইম করা
Ready.bd এর Special Offers সেকশনে গেলে MetroVPS এর অফার দেখা যাবে।
Claim বাটনে ক্লিক করলে অফারটি অ্যাক্টিভ হয়ে যাবে।
সফলভাবে ক্লেইম হলে কনফার্মেশন দেখাবে।
স্টেপ ৫: MetroVPS এ রেজিস্ট্রেশন সম্পন্ন করা
অফার ক্লেইম করার পর আপনার ইমেইলে MetroVPS থেকে একটি মেইল আসবে।
সেই মেইলে Register at MetroVPS নামে একটি অপশন থাকবে। সেখানে ক্লিক করে অ্যাকাউন্ট তৈরি করতে হবে।
স্টেপ ৬: কন্ট্রোল প্যানেলে প্রবেশ করা
MetroVPS এ লগইন করার পর My Service অপশনে গিয়ে Service Information ওপেন করুন।
সেখানে Login to Control Panel অপশনটি থাকবে। সেটিতে ক্লিক করলে সরাসরি কন্ট্রোল প্যানেলে প্রবেশ করা যাবে।
স্টেপ ৭: নতুন ওয়েবসাইট যোগ করা
কন্ট্রোল প্যানেলে গিয়ে Add Website অপশনে ক্লিক করুন।
এরপর Start from Scratch নির্বাচন করুন।
আপনার সম্পূর্ণ সাবডোমেইন লিখে ওয়েবসাইট যোগ করুন।
স্টেপ ৮: public_html ফোল্ডার তৈরি করা
File Manager এ গিয়ে দেখুন public_html ফোল্ডার আছে কিনা।
না থাকলে নতুন করে public_html নামে একটি ফোল্ডার তৈরি করুন।
স্টেপ ৯: index.html ফাইল তৈরি করা
public_html ফোল্ডারের ভেতরে index.html নামে একটি ফাইল তৈরি করুন।
এরপর নিজের HTML কোড লিখে সেভ করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rafe Uddaraj | Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: #f5f7fa;
color: #222;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1000px;
margin: auto;
padding: 40px 20px;
}
header {
background: #fff;
border-bottom: 1px solid #e5e7eb;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 22px;
font-weight: bold;
}
.nav a {
margin-left: 20px;
font-size: 14px;
color: #555;
}
.nav a:hover {
color: #000;
}
.hero {
padding: 80px 20px;
background: #ffffff;
}
.hero h1 {
font-size: 40px;
margin-bottom: 10px;
}
.hero h1 span {
color: #2563eb;
}
.hero p {
max-width: 600px;
color: #555;
margin-bottom: 25px;
}
.buttons a {
display: inline-block;
margin-right: 15px;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
}
.btn-primary {
background: #2563eb;
color: #fff;
}
.btn-secondary {
border: 1px solid #2563eb;
color: #2563eb;
}
section {
margin-top: 60px;
}
h2 {
font-size: 28px;
margin-bottom: 10px;
}
.section-desc {
color: #666;
margin-bottom: 30px;
}
.card {
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
ul {
list-style: none;
}
ul li {
padding: 6px 0;
color: #444;
}
footer {
text-align: center;
padding: 40px 20px;
color: #777;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container nav">
<div class="logo">Rafe Uddaraj</div>
<div>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</div>
</header>
<!-- Hero -->
<div class="hero">
<div class="container">
<h1>Hi, I'm <span>Rafe Uddaraj</span></h1>
<p>
Frontend developer focused on building clean, responsive, and simple websites.
This is a basic HTML + inline CSS portfolio landing page.
</p>
<div class="buttons">
<a href="#projects" class="btn-primary">View Projects</a>
<a href="#contact" class="btn-secondary">Contact Me</a>
</div>
</div>
</div>
<!-- About -->
<section id="about">
<div class="container">
<h2>About Me</h2>
<p class="section-desc">A short introduction.</p>
<div class="card">
<p>
I'm Rafe, a self-driven developer who enjoys creating modern web interfaces.
I focus on clean layouts, readability, and performance.
</p>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills">
<div class="container">
<h2>Skills</h2>
<p class="section-desc">What I work with.</p>
<div class="grid">
<div class="card">
<h3>Frontend</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Responsive Design</li>
</ul>
</div>
<div class="card">
<h3>Tools</h3>
<ul>
<li>Git & GitHub</li>
<li>VS Code</li>
<li>Figma (basic)</li>
</ul>
</div>
<div class="card">
<h3>Learning</h3>
<ul>
<li>JavaScript</li>
<li>UI/UX Basics</li>
<li>Web Performance</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects">
<div class="container">
<h2>Projects</h2>
<p class="section-desc">Some example work.</p>
<div class="card">
<h3>Portfolio Website</h3>
<p>A clean personal portfolio built using HTML and CSS.</p>
</div>
<div class="card">
<h3>Landing Page</h3>
<p>Simple responsive landing page for a product or service.</p>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container">
<h2>Contact</h2>
<p class="section-desc">Get in touch.</p>
<div class="card">
<p>Email: <strong>[email protected]</strong></p>
<p>Location: Dhaka, Bangladesh</p>
</div>
</div>
</section>
<footer>
© 2026 Rafe Uddaraj. All rights reserved.
</footer>
</body>
</html>
স্টেপ ১০: ওয়েবসাইট লাইভ দেখা
সবকিছু ঠিকভাবে সেটআপ হয়ে গেলে ব্রাউজারে আপনার ডোমেইন লিখে ভিজিট করুন।
ওয়েবসাইট লাইভ দেখা গেলে বুঝবেন সেটআপ সফল হয়েছে।
পুরো প্রক্রিয়াটি একবার নিজে করলে দেখবেন আসলে খুব একটা কঠিন না। যারা নতুন করে ওয়েব ডিজাইন বা ডেভেলপমেন্ট শিখছেন, তাদের জন্য এটি একটি ভালো সুযোগ। ফ্রি সার্ভিস হলেও নিয়ম মেনে ব্যবহার করলে কোনো সমস্যা হবে না। নিজের নামে একটি ওয়েবসাইট লাইভ করার অভিজ্ঞতাটা একবার হলেও নেওয়া উচিত।
About Rafe Uddaraj
Author at CST Club - sharing insights on technology, programming, and development.
