সব ব্লগ দেখুন
ওয়েব ডেভেলপমেন্ট10 মিনিট পড়ার সময়8 বার দেখা হয়েছে

কীভাবে GitHub Pages দিয়ে ফ্রিতে পোর্টফোলিও ওয়েবসাইট বানাবেন: বাংলাদেশি ডেভেলপারদের জন্য ধাপে ধাপে গাইড

আজকের গাইডে আমরা শিখবো কীভাবে GitHub Pages ব্যবহার করে আপনার পোর্টফোলিও ওয়েবসাইট সম্পূর্ণ ফ্রিতে ডিপ্লয় করবেন। ধাপে ধাপে, সহজ ভাষায়, বাংলাদেশি ডেভেলপারদের জন্য উপযোগী করে সাজানো হয়েছে এই টিউটোরিয়ালটি।

NonAcademy Team

NonAcademy Team

৩১ আগস্ট, ২০২৬

কীভাবে GitHub Pages দিয়ে ফ্রিতে পোর্টফোলিও ওয়েবসাইট বানাবেন: বাংলাদেশি ডেভেলপারদের জন্য ধাপে ধাপে গাইড

আপনি কি একজন বাংলাদেশি ডেভেলপার? আপনার কি একটি সুন্দর পোর্টফোলিও ওয়েবসাইট দরকার, কিন্তু হোস্টিং খরচ নিয়ে চিন্তিত? চিন্তা নেই! GitHub Pages আপনার জন্য নিখুঁত সমাধান। এটি সম্পূর্ণ ফ্রি, দ্রুত, এবং আপনার কোডবেসের সাথেই সংযুক্ত থাকে। এই গাইডে আমি আপনাকে দেখাবো কীভাবে GitHub Pages ব্যবহার করে ফ্রিতে আপনার পোর্টফোলিও হোস্ট করবেন — একদম শুরু থেকে শেষ পর্যন্ত। আপনি যদি HTML, CSS, বা JavaScript জানেন, তাহলে তো কথাই নেই। আর না জানলেও সমস্যা নেই, আমরা একসাথে সহজভাবে শিখে ফেলবো।

GitHub Pages কী এবং কেন এটি ব্যবহার করবেন?

GitHub Pages হলো GitHub-এর একটি ফ্রি হোস্টিং সার্ভিস। এটি আপনার GitHub রিপোজিটরির ফাইলগুলো সরাসরি একটি ওয়েবসাইট হিসেবে প্রকাশ করে। আপনি যখন আপনার কোড পুশ করেন, তখন GitHub স্বয়ংক্রিয়ভাবে সেটিকে একটি লাইভ ওয়েবসাইটে রূপান্তরিত করে। এটি স্ট্যাটিক সাইটের জন্য আদর্শ — যেমন পোর্টফোলিও, ব্যক্তিগত ব্লগ, বা প্রকল্পের ডকুমেন্টেশন।

কেন এটি বাংলাদেশি ডেভেলপারদের জন্য দারুণ? প্রথমত, এটি সম্পূর্ণ ফ্রি — কোনো ক্রেডিট কার্ড লাগে না। দ্বিতীয়ত, এটি দ্রুত এবং নির্ভরযোগ্য — GitHub-এর গ্লোবাল CDN আপনার সাইটকে বিশ্বের যেকোনো প্রান্তে দ্রুত লোড করতে সাহায্য করে। তৃতীয়ত, এটি আপনার কোডিং দক্ষতা দেখানোর একটি দুর্দান্ত উপায় — নিয়োগকর্তারা আপনার কোড এবং লাইভ সাইট দুটোই দেখতে পারেন।

বাংলাদেশে ইন্টারনেটের গতি এবং হোস্টিং খরচের কথা চিন্তা করলে, GitHub Pages একটি সাশ্রয়ী সমাধান। আপনি চাইলে আপনার নিজের ডোমেইনও যুক্ত করতে পারেন, যদিও ডিফল্টভাবে এটি username.github.io ঠিকানায় পাওয়া যায়।

ধাপ ১: GitHub অ্যাকাউন্ট তৈরি ও রিপোজিটরি সেটআপ

প্রথমে আপনার একটি GitHub অ্যাকাউন্ট লাগবে। যদি না থাকে, তাহলে github.com-এ গিয়ে সাইন আপ করুন। এটি সম্পূর্ণ ফ্রি। সাইন আপ করার সময় একটি ইউজারনেম নিন — মনে রাখবেন, আপনার পোর্টফোলিও সাইটের ঠিকানা হবে username.github.io

এবার একটি নতুন রিপোজিটরি তৈরি করুন। রিপোজিটরির নাম দিতে হবে username.github.io — যেখানে username আপনার GitHub ইউজারনেম। উদাহরণস্বরূপ, আমার ইউজারনেম যদি rahim হয়, তাহলে রিপোজিটরির নাম হবে rahim.github.io। এই নামটি অবশ্যই সঠিক হতে হবে, নাহলে কাজ করবে না।

রিপোজিটরি তৈরি করার সময় 'Public' সিলেক্ট করুন (ফ্রি হোস্টিংয়ের জন্য এটি প্রয়োজন)। 'Initialize this repository with a README' চেকবক্সে টিক দিন — এতে করে একটি README ফাইল তৈরি হবে। তারপর 'Create repository' বাটনে ক্লিক করুন।

এখন আপনার রিপোজিটরি তৈরি। পরের ধাপে আমরা এতে আপনার পোর্টফোলিওর ফাইলগুলো যোগ করবো।

ধাপ ২: আপনার পোর্টফোলিও ওয়েবসাইট তৈরি করুন

এখন আপনার পোর্টফোলিওর ফাইলগুলো দরকার। আপনি যদি আগে থেকে তৈরি করে থাকেন, তাহলে সরাসরি পরের ধাপে যান। যদি না থাকে, তাহলে চিন্তা নেই — আমি একটি সহজ HTML টেমপ্লেট দিচ্ছি যা আপনি ব্যবহার করতে পারেন।

প্রথমে একটি ফোল্ডার তৈরি করুন, যেমন my-portfolio। এর ভিতরে index.html নামে একটি ফাইল তৈরি করুন। নিচের কোডটি কপি করে সেখানে পেস্ট করুন:

<!DOCTYPE html>
<html lang='bn'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>আমার পোর্টফোলিও</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; }
        header { background: #2c3e50; color: white; padding: 20px; text-align: center; }
        section { padding: 20px; }
        .project { border: 1px solid #ddd; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <header>
        <h1>সালাম, আমি রাহিম</h1>
        <p>ওয়েব ডেভেলপার</p>
    </header>
    <section>
        <h2>আমার প্রকল্প</h2>
        <div class='project'>
            <h3>প্রকল্প ১: ই-কমার্স সাইট</h3>
            <p>একটি সম্পূর্ণ ই-কমার্স সাইট যা React দিয়ে তৈরি।</p>
        </div>
        <div class='project'>
            <h3>প্রকল্প ২: ব্লগ প্ল্যাটফর্ম</h3>
            <p>Django দিয়ে তৈরি একটি ব্লগ প্ল্যাটফর্ম।</p>
        </div>
    </section>
</body>
</html>

এই কোডটি একটি সাধারণ পোর্টফোলিও পেজ তৈরি করবে। আপনি চাইলে CSS, JavaScript, বা ছবি যোগ করতে পারেন। মনে রাখবেন, GitHub Pages শুধুমাত্র স্ট্যাটিক ফাইল হোস্ট করে — সার্ভার-সাইড কোড (PHP, Node.js) কাজ করবে না।

ধাপ ৩: ফাইলগুলো GitHub-এ আপলোড করুন

এখন আপনার ফাইলগুলো GitHub রিপোজিটরিতে আপলোড করতে হবে। দুটি উপায় আছে: GitHub ওয়েবসাইট থেকে সরাসরি আপলোড, অথবা Git কমান্ড ব্যবহার করে।

৩.১: ওয়েবসাইট থেকে আপলোড

সবচেয়ে সহজ উপায় হলো GitHub ওয়েবসাইট থেকে। আপনার রিপোজিটরিতে গিয়ে 'Add file' বাটনে ক্লিক করুন, তারপর 'Upload files' সিলেক্ট করুন। আপনার ফাইলগুলো ড্র্যাগ অ্যান্ড ড্রপ করুন এবং 'Commit changes' বাটনে ক্লিক করুন।

৩.২: Git কমান্ড ব্যবহার করে (প্রফেশনাল উপায়)

আপনি যদি Git ব্যবহারে স্বাচ্ছন্দ্যবোধ করেন, তাহলে নিচের কমান্ডগুলো ব্যবহার করুন:

git init
git add .
git commit -m 'Initial commit'
git branch -M main
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main

এখানে username আপনার ইউজারনেম দিয়ে বদলে দিন। প্রথমবার পুশ করার সময় GitHub আপনার ইউজারনেম এবং পাসওয়ার্ড (বা টোকেন) চাইবে।

ধাপ ৪: GitHub Pages সক্রিয় করুন

ফাইল আপলোড করার পর GitHub Pages সক্রিয় করতে হবে। আপনার রিপোজিটরির 'Settings' ট্যাবে যান। বাম সাইডবার থেকে 'Pages' মেনুতে ক্লিক করুন। 'Source' সেকশনে 'Deploy from a branch' সিলেক্ট করুন, তারপর 'Branch' হিসেবে main নির্বাচন করুন এবং 'Save' চাপুন।

কয়েক সেকেন্ড পরে, আপনার সাইট https://username.github.io ঠিকানায় লাইভ হয়ে যাবে। GitHub সাধারণত একটি নোটিফিকেশন দেয় যখন ডিপ্লয় সম্পন্ন হয়। আপনি চাইলে 'Actions' ট্যাবে গিয়ে ডিপ্লয়ের অবস্থা দেখতে পারেন।

ব্যস! আপনার পোর্টফোলিও এখন বিশ্বের যেকোনো প্রান্ত থেকে দেখা যাবে।

ধাপ ৫: কাস্টম ডোমেইন যুক্ত করুন (ঐচ্ছিক)

আপনার নিজের ডোমেইন থাকলে (যেমন rahim.com) সেটি GitHub Pages-এর সাথে যুক্ত করতে পারেন। এটি আপনার পোর্টফোলিওকে আরও প্রফেশনাল দেখাবে।

প্রথমে আপনার ডোমেইন প্রোভাইডারের DNS সেটিংসে একটি CNAME রেকর্ড যোগ করুন, যা username.github.io-এর দিকে পয়েন্ট করবে। তারপর GitHub রিপোজিটরির Settings → Pages-এ গিয়ে 'Custom domain' ফিল্ডে আপনার ডোমেইন লিখে 'Save' করুন। GitHub স্বয়ংক্রিয়ভাবে SSL সার্টিফিকেট তৈরি করবে।

মনে রাখবেন, ডোমেইন রেজিস্ট্রেশন খরচ সাপেক্ষ (বছরে প্রায় ৮০০-১২০০ টাকা), কিন্তু হোস্টিং এখনও ফ্রি।

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

কিছু সাধারণ সমস্যা হতে পারে, যেমন সাইট লোড না হওয়া বা 404 এরর। নিচে কয়েকটি সমাধান দেওয়া হলো:

  • রিপোজিটরির নাম ভুল: নিশ্চিত করুন রিপোজিটরির নাম username.github.io — বানান এবং কেস সঠিক আছে কিনা।
  • ফাইল না পাওয়া: নিশ্চিত করুন index.html ফাইলটি রিপোজিটরির রুটে আছে। GitHub Pages ডিফল্টভাবে এই ফাইলটি খোঁজে।
  • ক্যাশ সমস্যা: ব্রাউজার ক্যাশ ক্লিয়ার করুন অথবা ইনকগনিটো মোডে খুলুন।
  • ডিপ্লয় ব্যর্থ: GitHub Actions ট্যাবে গিয়ে এরর লগ দেখুন। সাধারণত ফাইলের নামে স্পেস বা বাংলা নাম থাকলে সমস্যা হয় — ইংরেজি ছোট হাতের অক্ষরে ফাইল রাখুন।

আপনি যদি আরও জানতে চান, তাহলে GitHub-এর অফিসিয়াল ডকুমেন্টেশন দেখতে পারেন। তবে এই গাইডের ধাপগুলো অনুসরণ করলেই ৯০% সমস্যার সমাধান হয়ে যাবে।

সাধারণ প্রশ্নোত্তর

GitHub Pages কি সত্যিই ফ্রি?

হ্যাঁ, সম্পূর্ণ ফ্রি। GitHub Pages-এর জন্য কোনো চার্জ নেই, এমনকি প্রাইভেট রিপোজিটরির জন্যও (যদিও প্রাইভেট রিপোজিটরির জন্য পেইড প্ল্যান লাগে, কিন্তু পাবলিক রিপোজিটরি ফ্রি)। আপনি চাইলে একাধিক প্রজেক্ট সাইটও তৈরি করতে পারেন — প্রতিটির জন্য আলাদা রিপোজিটরি।

GitHub Pages-এ কি ডাটাবেস ব্যবহার করা যায়?

না, GitHub Pages শুধুমাত্র স্ট্যাটিক ফাইল হোস্ট করে। ডাটাবেস বা সার্ভার-সাইড অ্যাপ্লিকেশন চালানো যাবে না। তবে আপনি চাইলে ফর্ম সাবমিশনের জন্য ফর্ম স্প্রে বা অন্য থার্ড-পার্টি সার্ভিস ব্যবহার করতে পারেন।

আমার পোর্টফোলিওতে কি WordPress ব্যবহার করতে পারি?

না, WordPress PHP-ভিত্তিক, যা GitHub Pages-এ চলে না। তবে আপনি Hugo, Jekyll, বা Gatsby-এর মতো স্ট্যাটিক সাইট জেনারেটর ব্যবহার করতে পারেন, যা GitHub Pages-এ ভালো কাজ করে।

কাস্টম ডোমেইন যুক্ত করতে কত খরচ পড়ে?

ডোমেইন রেজিস্ট্রেশন খরচ ছাড়া কিছু লাগে না। GitHub Pages-এ কাস্টম ডোমেইন যুক্ত করা সম্পূর্ণ ফ্রি, এবং SSL সার্টিফিকেটও ফ্রি।

শেষ কথা

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

আপনি যদি আরও শিখতে আগ্রহী হন, তাহলে আমাদের কোর্সসমূহ দেখতে পারেন, যেখানে ওয়েব ডেভেলপমেন্টের অনেক বিষয় কভার করা আছে। আর যদি কোনো প্রশ্ন থাকে, তাহলে আমাদের কমিউনিটি-তে জয়েন করুন। শুভকামনা!

শেয়ার করুন:
NonAcademy Team

লেখক

NonAcademy Team