GitHub Pages: বিনামূল্যে ওয়েবসাইট হোস্টিং, ধাপে ধাপে কীভাবে প্রকাশ করবেন

GitHub Pages কী

GitHub Pages হলো GitHub-এ তৈরি বিনামূল্যের স্ট্যাটিক ওয়েবসাইট হোস্টিং। ওয়েবসাইটের ফাইলগুলো একটি সাধারণ Git repository-তে থাকে, আর GitHub সেগুলো HTTPS-এর মাধ্যমে সরাসরি পরিবেশন করে। যে branch-এ আপনি git push করেন, সেখানকার প্রতিটি পরিবর্তন সাইটকে আপডেট করে, তাই আলাদা FTP, হোস্টিং প্যানেল বা হাতে ফাইল আপলোডের দরকার নেই।

বাংলা ও ইংরেজি খোঁজে এই সেবাকে "গিটহাব পেজেস", "github pages কী" বা "github hosting" নামে খোঁজা হয়। সঠিক নাম GitHub Pages: এটি GitHub-এর সুবিধা, Git-এর নয়। Git নিজে কিছু প্রকাশ করে না, সে শুধু পরিবর্তনের ইতিহাস রাখে।

GitHub Pages-এ সাধারণত প্রজেক্টের ডকুমেন্টেশন, ব্যক্তিগত পেজ ও portfolio, blog, landing page, শেখার প্রজেক্ট এবং React, Vue বা Svelte দিয়ে build করা frontend demo রাখা হয়।

Git pages স্ট্যাটিক হোস্টিং

মূল শব্দ স্ট্যাটিক। GitHub Pages browser-কে তৈরি ফাইল দেয়: HTML, CSS, JavaScript, ছবি, font, JSON। সার্ভারে কোড চালানো তার কাজ নয়: PHP, Python বা Node.js-এর server-side কোড এবং ডেটাবেস এখানে চলে না। সাইটের যদি registration, cart বা ডেটাবেসভিত্তিক admin panel লাগে, তবে সাধারণ হোস্টিং বা cloud platform দরকার।

তবু browser-এ JavaScript স্বাভাবিকভাবে চলে। Single-page application বাইরের API-র সঙ্গে কথা বলতে পারে, forms তৃতীয় পক্ষের সেবায় পাঠানো যায়, এবং সাইটের ভেতরের অনুসন্ধান browser-এই করা যায়।

GitHub Pages-এর সাইটের ধরন

GitHub Pages-এ তিন ধরনের সাইট আছে, এবং ধরন অনুযায়ী ঠিকানা বদলায়।

এক অ্যাকাউন্টে ব্যবহারকারী বা প্রতিষ্ঠানের সাইট একটিই হতে পারে, আর প্রজেক্ট সাইট যত খুশি, প্রতিটি repository-র জন্য একটি করে। ব্যক্তিগত সাইটের repository-র নাম আপনার GitHub login-এর সঙ্গে হুবহু মিলতে হবে: login যদি ivan-petrov হয়, তবে repository-র নাম হবে ivan-petrov.github.io।

পাবলিক repository-র জন্য Pages বিনামূল্যের plan-এ পাওয়া যায়। প্রাইভেট repository থেকে সাইট প্রকাশের জন্য GitHub-এর পেইড plan লাগে; তবু প্রকাশিত সাইট ইন্টারনেটে সবার জন্য দৃশ্যমান।

GitHub Pages-এ সাইট ধাপে ধাপে কীভাবে প্রকাশ করবেন

সবচেয়ে সরল পথ: তৈরি HTML ফাইল এবং branch থেকে প্রকাশ। আপনার GitHub অ্যাকাউন্ট ও ইনস্টল করা Git লাগবে।

ধাপ ১. repository বানান

GitHub-এ একটি নতুন পাবলিক repository বানান। ব্যক্তিগত সাইটের জন্য এর নাম username.github.io রাখুন, প্রজেক্ট সাইটের জন্য যেকোনো নাম চলবে। তারপর এটি clone করে প্রধান পাতা যোগ করুন:

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>নমস্কার, GitHub Pages</h1>" > index.html

প্রধান পাতার নাম অবশ্যই index.html হতে হবে (অথবা index.md, বা README.md, এগুলোকেও GitHub প্রধান পাতা বানায়)। ছোট-বড় হাতের অক্ষর গুরুত্বপূর্ণ: Index.html চলবে না।

ধাপ ২. ফাইল GitHub-এ পাঠান

git add index.html
git commit -m "সাইটের প্রথম পাতা"
git push origin main

প্রথমবার push-এর সময় Git login ও পাসওয়ার্ড চাইলে personal access token বা browser দিয়ে লগইন ব্যবহার করুন: HTTPS-এ git push-এর জন্য অ্যাকাউন্টের সাধারণ পাসওয়ার্ড গ্রহণ করা হয় না।

ধাপ ৩. Settings-এ Pages চালু করুন

Repository খুলুন, Settings-এ যান এবং বাঁ দিকের মেনু থেকে Pages বেছে নিন। Build and deployment অংশে Source-এর জন্য Deploy from a branch বেছে নিন। নিচে branch (সাধারণত main) এবং ফোল্ডার ঠিক করুন: মূল / (root) বা /docs। Save চাপুন।

/docs ফোল্ডার তখন সুবিধাজনক, যখন repository-তে প্রজেক্টের code থাকে এবং ডকুমেন্টেশন-সাইট তার পাশে আলাদা ফোল্ডারে থাকে।

ধাপ ৪. প্রকাশের জন্য অপেক্ষা করুন

প্রকাশে কয়েক সেকেন্ড থেকে কয়েক মিনিট লাগে; GitHub জানায় প্রথমবার ১০ মিনিট পর্যন্ত লাগতে পারে। Build-এর অগ্রগতি Actions ট্যাবে "pages build and deployment" প্রক্রিয়া হিসেবে দেখা যায়। সেটি সবুজ চিহ্নসহ শেষ হলে Settings → Pages-এ সাইটের ঠিকানা দেখা যায়।

এরপর শুধু ফাইল বদলান, commit করুন এবং git push করুন; সাইট নিজে থেকেই আপডেট হয়।

GitHub Actions দিয়ে প্রকাশ

Branch থেকে প্রকাশ তখন ভালো, যখন repository-তে তৈরি ফাইল থাকে। সাইটকে আগে build করতে হলে, যেমন Vite, React বা Hugo-র মতো generator দিয়ে বানানো সাইট, তবে Source-এ GitHub Actions বেছে নেওয়া ভালো। Settings → Pages-এর Source-এ GitHub Actions বেছে নিন, এবং GitHub তৈরি workflow template প্রস্তাব করবে।

Build-এর পর dist ফোল্ডারের স্ট্যাটিক ফাইল প্রকাশ করার ন্যূনতম workflow এরকম দেখায়:

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

ফাইলটি .github/workflows/pages.yml-এ রাখা হয়। git push-এর পর Actions dependencies ইনস্টল করে, প্রজেক্ট build করে এবং dist-এর বিষয়বস্তু প্রকাশ করে। এর সুবিধা: repository-তে শুধু source code থাকে, এবং build-এর ফাইল commit-এর ইতিহাস ভরায় না।

প্রজেক্ট সাইটের সাধারণ সমস্যা পথ (path) নিয়ে। সাইট /repository-name/ ঠিকানায় খোলে, কিন্তু builder-এর ডিফল্ট লিংক শুরু হয় / থেকে। ফল: পাতা style ও script ছাড়া লোড হয়। সমাধান base path সেট করা: Vite-এ base: '/repository-name/', এবং অন্য builder-এ তার সমতুল্য বিকল্প।

Jekyll ও স্ট্যাটিক generator

Branch থেকে প্রকাশে GitHub ডিফল্টভাবে ফাইলগুলো Jekyll-এর মধ্য দিয়ে নেয়, যা Ruby-তে লেখা স্ট্যাটিক সাইট generator। তাই আপনি পাতা Markdown-এ লিখতে পারেন, theme ও template যুক্ত করতে পারেন, এবং GitHub সেগুলো HTML-এ রূপান্তর করে। Blog বা ডকুমেন্টেশনের জন্য এটি সুবিধাজনক: আপনি .md ফাইল লেখেন, আর চেহারা দেখে theme।

এর একটি প্রভাব: Jekyll সেইসব ফাইল ও ফোল্ডার বাদ দেয় যাদের নাম আন্ডারস্কোর (_) দিয়ে শুরু, যেমন _next বা _assets। সাইট যদি অন্য টুলে তৈরি হয় এবং এমন ফোল্ডার লাগে, তবে মূল ফোল্ডারে একটি খালি .nojekyll ফাইল রাখুন:

touch .nojekyll
git add .nojekyll
git commit -m "Jekyll বন্ধ করা"
git push

Hugo, Astro, Eleventy, MkDocs ও Docusaurus-এর মতো অন্য generator গুলো GitHub Actions-এর মাধ্যমে চলে: workflow-তে build, তারপর তৈরি ফোল্ডার প্রকাশ। GitHub Pages এসব generator-এর কিছু জানে না; তার দরকার শুধু চূড়ান্ত ফাইল।

GitHub Pages-এ নিজের domain কীভাবে যুক্ত করবেন

username.github.io ঠিকানা শেখার প্রজেক্টের জন্য ঠিক আছে, কিন্তু portfolio বা প্রজেক্টের জন্য নিজের domain ভালো। এটি দুই জায়গায় যুক্ত হয়: domain registrar-এর DNS-এ এবং repository-র সেটিংসে।

DNS সেটিং

www.example.com বা blog.example.com-এর মতো subdomain-এর জন্য একটি CNAME record বানান, যা username.github.io-এর দিকে নির্দেশ করে। মূল domain example.com-এর জন্য GitHub Pages-এর IP ঠিকানায় A records বানান:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

IPv6-এর জন্য AAAA records-সহ হালনাগাদ তালিকা GitHub-এর ডকুমেন্টেশনে আছে, সেটআপের আগে সেখানে দেখে নিন। মূল domain ও www দুটোই সেট করা ভালো: তখন GitHub এক ঠিকানা থেকে অন্যটিতে redirect করে।

Repository-তে সেটিং

Settings → Pages-এর Custom domain ঘরে domain লিখে save করুন। Branch থেকে প্রকাশে GitHub repository-তে CNAME ফাইল বানায়, যাতে domain-এর নাম থাকে। Actions থেকে প্রকাশে CNAME ফাইল লাগে না, domain সেটিংসেই থাকে।

GitHub পরামর্শ দেয় যে অ্যাকাউন্টের সেটিংসে (profile settings-এর Pages অংশে) আপনি নিজের domain verify করুন: এতে অন্য কেউ আপনার domain তার repository-র সঙ্গে যুক্ত করতে পারবে না, যখন DNS GitHub-এর দিকে নির্দেশ করে। DNS পরিবর্তন একদিন পর্যন্ত লাগতে পারে, তাই domain সঙ্গে সঙ্গে কাজ না করলে অপেক্ষা করুন।

GitHub Pages-এ HTTPS

*.github.io ঠিকানায় HTTPS সবসময় চালু থাকে। নিজের domain-এর জন্য DNS ঠিক থাকলে GitHub নিজে থেকেই Let's Encrypt-এর certificate দেয়। এরপর Settings → Pages-এ Enforce HTTPS বিকল্প আসে: সেটি চালু করুন, যাতে HTTP-এর সব অনুরোধ HTTPS-এ পাঠানো হয়।

বিকল্পটি ধূসর থাকলে certificate এখনও দেওয়া হয়নি: DNS records যাচাই করুন এবং অপেক্ষা করুন। কখনও Custom domain ঘর থেকে domain মুছে আবার যোগ করলে certificate নতুন করে জারি হয়। এটাও দেখুন, সাইট ছবি বা script http://-এ আনছে কি না: browser এমন বিষয়বস্তুকে mixed content ধরে আটকে দেয়।

GitHub Pages-এর সীমাবদ্ধতা

হোস্টিং বিনামূল্যে, কিন্তু তার সীমা আছে। সেগুলো GitHub-এর ডকুমেন্টেশনে লেখা, এবং অধিকাংশ ব্যক্তিগত ও শেখার সাইটের জন্য তা যথেষ্টের চেয়ে বেশি।

প্রযুক্তিগত সীমার বাইরে ব্যবহারের নিয়মও আছে: GitHub Pages অনলাইন দোকান ও SaaS-এর মতো বাণিজ্যিক সেবার জন্য নয়, এবং বড় ফাইল বিতরণের জন্যও নয়। Portfolio, ডকুমেন্টেশন, blog ও প্রজেক্টের landing page-এর জন্য এটি ঠিক আছে।

আরেকটি সীমা: সার্ভারের সেটিং নেই। নিজের redirects, response headers বা .htaccess-এর মতো নিয়ম এখানে চলে না। শুধু মূলে একটি 404.html রাখা যায়, যা না-থাকা ঠিকানায় দেখানো হয়।

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

GitHub Pages-এ 404 ত্রুটি

সবচেয়ে সাধারণ কারণ: Source-এ যে ফোল্ডার বেছে নেওয়া হয়েছে, সেখানে index.html নেই। সঠিক branch ও ফোল্ডার (/ (root) বা /docs) বেছেছেন কি না এবং ফাইলের নাম ঠিক index.html (ছোট অক্ষরে) কি না দেখুন। দ্বিতীয় কারণ: সাইট এখনও প্রকাশ হয়নি। Actions ট্যাব দেখুন এবং build শেষ হওয়ার জন্য অপেক্ষা করুন।

Single-page application-এর ভেতরের পাতায় refresh দিলে যদি 404 আসে, তবে সমস্যা routing-এ: সার্ভার /about চেনে না, কারণ এমন কোনো ফাইল নেই। সমাধান: hash routing (/#/about), অথবা index.html-এর একটি কপি 404.html নামে রাখা।

সাইট আপডেট হচ্ছে না

প্রথমে নিশ্চিত হোন বদলগুলো সত্যিই GitHub-এ পৌঁছেছে: git status ও git log origin/main --oneline -3 চালান। তারপর Actions ট্যাব খুলুন: build ব্যর্থ হলে সেখানে লাল চিহ্ন ও error log থাকবে, যেমন Jekyll ফাইলে syntax ভুল বা workflow-এ গলদ।

Build সফল হয়েছে কিন্তু browser-এ পুরনো সাইট দেখা যাচ্ছে, তবে দোষ cache-এর: GitHub Pages কয়েক মিনিট ফাইল cache করে, browser-ও করে। Cache পরিষ্কার করে পাতা রিলোড করুন (Ctrl+F5 বা Cmd+Shift+R), অথবা private window-তে খুলুন।

Styles ও ছবি লোড হচ্ছে না

প্রায় সবসময় পথ (path) ভুল থাকে। প্রজেক্ট সাইটে /style.css লিংক username.github.io-এর মূলে যায়, repository-র ফোল্ডারে নয়। আপেক্ষিক পথ ব্যবহার করুন (style.css, ./img/logo.png), অথবা builder-এ base path সেট করুন। ফাইলের নামে ছোট-বড় হাতের অক্ষরও যাচাই করুন: GitHub-এর সার্ভার Logo.PNG ও logo.png-কে আলাদা ধরে, যদিও Windows-এ স্থানীয়ভাবে সব চলছিল।

আন্ডারস্কোরযুক্ত ফোল্ডার নেই

এটি Jekyll-এর কাজ: সে _app-এর মতো ফোল্ডার প্রকাশ করে না। মূলে .nojekyll ফাইল যোগ করুন, অথবা GitHub Actions দিয়ে প্রকাশে যান।

উপসংহার

GitHub Pages স্ট্যাটিক সাইট বিনামূল্যে প্রকাশের সবচেয়ে দ্রুত উপায়: একটি repository, একটি index.html ফাইল, এবং Settings → Pages-এ source; কয়েক মিনিটের মধ্যে সাইট username.github.io-এ খুলে যায়। Build-নির্ভর সাইটের জন্য GitHub Actions, আর নিজের domain-এর জন্য DNS records ও Enforce HTTPS। সীমাবদ্ধতা মনে রাখুন: শুধু স্ট্যাটিক বিষয়বস্তু, এবং আকার ও ট্র্যাফিকে সীমা। GitHub-এর সঙ্গে কাজ, push ও স্বয়ংক্রিয়করণ এই কোর্সে বাস্তবে শেখানো হয়েছে।