Git, GitHub আর ওয়েবসাইট প্রকাশ — GitHub Pages, Netlify আর cPanel

১ · “final_final2.html” সমস্যা — কেন version control

সাবরিনা একটি ছোট অনলাইন দোকানের সাইট বানাচ্ছেন — রাজশাহীর নকশিকাঁথা বিক্রি হবে। এক সপ্তাহ পরে তাঁর প্রজেক্ট ফোল্ডারের চেহারা এমন:

nakshi-shop/
├── index.html
├── index-old.html
├── index-final.html
├── index-final-final.html
├── index_final_final2 (ক্লায়েন্টের পছন্দ).html
├── style.css
├── style-backup-jan.css
└── style NEW use this.css

কোনটা আসল? মেনুর বাগটা কোন দিন ঢুকেছিল? ক্লায়েন্ট বললেন, “গত মঙ্গলবারের ডিজাইনটাই ভালো ছিল” — কোন ফাইলটা মঙ্গলবারের? সমস্যাটা অলসতার নয় — ফাইলের নাম দিয়ে ইতিহাস রাখার পদ্ধতিটাই ভাঙা।

এর সমাধান version control — একটি টুল, যা আপনার প্রজেক্টের প্রতিটি সংরক্ষিত অবস্থার হিসাব রাখে: কে, কখন, কী বদলেছেন, আর কেন। ফাইল একটাই থাকে — index.html — আর তার পুরো ইতিহাস থাকে আলাদা একটি খাতায়। আজকের দুনিয়ায় সেই টুলের নাম প্রায় সব জায়গায় একটাই: Git.

Version control শুধু “ব্যাকআপ” নয়। এটি আপনাকে চারটি ক্ষমতা দেয়, যা ফাইল কপি করে কখনো পাওয়া যায় না:

২ · Git-এর ভিত্তি — ইনস্টল, init আর তিন জায়গার খেলা

ইনস্টল আর প্রথমবারের সেটিং

sudo apt install git

ইনস্টলের পর একবার আপনার নাম আর ইমেইল জানিয়ে দিন — প্রতিটি commit-এ এগুলো লেখকের পরিচয় হিসেবে বসবে। আর নতুন repository-র মূল শাখার নাম main রাখার সেটিংটিও এখনই দিয়ে রাখুন (GitHub-ও এই নামই ব্যবহার করে):

git --version
git config --global user.name "Sabrina Akter"
git config --global user.email "sabrina@example.com"
git config --global init.defaultBranch main

# যা দেখার কথা (প্রথম লাইনের পর; নম্বর আলাদা হতে পারে)
git version 2.x.x
# config কমান্ডগুলো চুপচাপ কাজ সারে — কিছু না দেখানো মানেই সফল

প্রথম repository

এবার প্রজেক্ট ফোল্ডারে গিয়ে Git-কে বলুন, “এই ফোল্ডারের হিসাব রাখা শুরু করো।” এই একটি কমান্ডেই ফোল্ডারটি একটি repository হয়ে যায়:

cd nakshi-shop
git init

# যা দেখার কথা
Initialized empty Git repository in C:/Users/Sabrina/nakshi-shop/.git/

Git ফোল্ডারের ভেতরে একটি লুকানো .git ফোল্ডার বানিয়েছে — পুরো ইতিহাস থাকবে ওখানেই। এটি কখনো হাতে বদলাবেন না, আর মুছে ফেললে ইতিহাসও মুছে যাবে (ফাইলগুলো থেকে যাবে)। Git Bash-এ ls -a, PowerShell-এ ls -Force লিখলে লুকানো ফোল্ডারটি দেখা যায়।

ফোল্ডারে আমাদের প্রথম ফাইলটি এই — ছোট একটি দোকানের প্রথম পাতা। নিচের লেখা বদলে দেখুন; ঠিক এভাবে আপনি প্রতিদিন যা লেখেন, Git-এর ভাষায় সেটাই working directory-র পরিবর্তন:

<header>
  <h1>সাবরিনার নকশিকাঁথা</h1>
  <p>রাজশাহীর হাতে সেলাই করা কাঁথা — সারা দেশে ডেলিভারি</p>
</header>
<main>
  <h2>এই সপ্তাহের কাঁথা</h2>
  <ul>
    <li>লাল-সবুজ ফুলের নকশা — ২,৮০০ টাকা</li>
    <li>নীল পাখির নকশা — ৩,২০০ টাকা</li>
  </ul>
  <p><a href="contact.html">অর্ডার করতে যোগাযোগ করুন</a></p>
</main>

তিন জায়গা — Git-এর সবচেয়ে গুরুত্বপূর্ণ ধারণা

নতুনরা সবচেয়ে বেশি গুলিয়ে ফেলেন এখানে: “সেভ তো করলাম, তবু commit হয়নি কেন?” কারণ Git-এর চোখে প্রতিটি পরিবর্তন তিনটি জায়গার কোনো একটিতে থাকে। পোস্ট অফিসের কথা ভাবুন — চিঠি লেখা (টেবিলে), খামে ভরে কাউন্টারে দেওয়া (ঠিক কোন চিঠিগুলো যাবে, বাছাই), আর সিল মেরে রেজিস্ট্রি খাতায় তোলা (চিরস্থায়ী রেকর্ড)। “পরে” চাপুন:

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        index.html

nothing added to commit but untracked files present (use "git add" to track)

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.html

[main (root-commit) 3f2a1b7] Add home page with product list
 1 file changed, 12 insertions(+)
 create mode 100644 index.html

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

9c41e0d (HEAD -> main) Update prices for winter collection
3f2a1b7 Add home page with product list

৩ · ইতিহাস পড়া আর ভালো commit message

commit করার আসল লাভ পাওয়া যায় পরে — যখন ইতিহাস পড়তে হয়। দুটি কমান্ড সবচেয়ে বেশি কাজে লাগে: git log (কবে কী হলো) আর git diff (ঠিক কী বদলাল)।

git log --oneline        # প্রতিটি commit এক লাইনে
git diff                 # এখনো stage হয়নি এমন বদল
git diff --staged        # stage হয়েছে, commit হয়নি এমন বদল
git show 3f2a1b7         # একটি নির্দিষ্ট commit-এ কী বদলেছিল

দাম বদলের পর git diff চালালে এমন কিছু দেখবেন। - চিহ্নের লাইন মুছে গেছে, + চিহ্নের লাইন নতুন এসেছে — একে বলে diff:

# যা দেখার কথা (সংক্ষেপে)
diff --git a/index.html b/index.html
--- a/index.html
+++ b/index.html
@@ -7,3 +7,3 @@
   <ul>
-    <li>লাল-সবুজ ফুলের নকশা — ২,৮০০ টাকা</li>
+    <li>লাল-সবুজ ফুলের নকশা — ৩,০০০ টাকা</li>
     <li>নীল পাখির নকশা — ৩,২০০ টাকা</li>

ভালো commit message — ভবিষ্যতের আপনার জন্য চিঠি

ছয় মাস পরে আপনি বা আপনার সহকর্মী যখন git log পড়বেন, তখন কোড খুলে দেখার আগে শুধু message-গুলোই পড়বেন। “update”, “fix”, “changes” — এগুলো সেই সময় কিছুই বলে না। পেশাদার দলগুলো মোটামুটি এই নিয়মগুলো মানে:

• প্রথম লাইন ছোট — মোটামুটি ৫০ অক্ষরের মধ্যে, শেষে দাঁড়ি বা ফুলস্টপ নয়। দরকার হলে একটি ফাঁকা লাইন দিয়ে নিচে বিস্তারিত (প্রতি লাইন ৭২ অক্ষরের মধ্যে) — একে প্রায়ই “৫০/৭২ নিয়ম” বলা হয়।
• আদেশের ভঙ্গিতে, কী করে তা বলুন — “Add contact form”, “Fix broken logo path” — যেন বাক্যটি “এই commit প্রয়োগ করলে এটি…”-এর পরে বসে। Git নিজেও এভাবেই লেখে: Merge branch …, Revert ….
• এক commit, এক উদ্দেশ্য — মেনুর বাগ আর নতুন পাতা আলাদা commit-এ। তাহলে একটিকে বাতিল করতে হলে অন্যটি অক্ষত থাকে।
• “কেন”-টা লিখুন — কী বদলেছে diff-ই বলে দেয়; কেন বদলেছে, সেটা শুধু আপনিই জানেন।

বাংলায় message লেখা যায় (Git UTF-8 সামলায়), তবে দলে আর ওপেন-সোর্সে ইংরেজিই প্রচলিত। নিচের ছোট স্ক্রিপ্টটি একটি নকল git log --oneline ছাপে আর প্রতিটি message-কে ওপরের নিয়মে যাচাই করে:

// একটি নকল "git log --oneline" — আর প্রতিটি message-এর মান যাচাই
const commits = [
  { id: 'a1c9f02', msg: 'Add contact form with accessible labels' },
  { id: '7d3e4b1', msg: 'update' },
  { id: '5b2f8c9', msg: 'Fix broken logo path on about page' },
  { id: '3f2a1b7', msg: 'final changes done, fixed everything and also new css.' },
];

commits.forEach((c, i) => {
  const head = i === 0 ? ' (HEAD -> main)' : '';
  console.log(c.id + head + ' ' + c.msg);

  const problems = [];
  if (c.msg.length > 50) problems.push('too long (' + c.msg.length + ' chars)');
  if (c.msg.endsWith('.')) problems.push('ends with a full stop');
  if (c.msg.split(' ').length < 3) problems.push('too vague');
  if (!/^[A-Z]/.test(c.msg)) problems.push('start with a capital verb');
  console.log('    -> ' + (problems.length ? problems.join(', ') : 'OK'));
});

৪ · .gitignore আর গোপন তথ্য — যা কখনো commit হবে না

প্রতিটি প্রজেক্টে কিছু ফাইল থাকে যা ইতিহাসে রাখার মানে নেই, বা রাখা বিপজ্জনক: অপারেটিং সিস্টেমের আবর্জনা (Thumbs.db, .DS_Store), টুলের তৈরি বিশাল ফোল্ডার (node_modules/, যা পর্ব ৫০-এর Sass-PostCSS-এর মতো টুল ব্যবহারে আসে), লগ ফাইল — আর সবচেয়ে গুরুত্বপূর্ণ, গোপন চাবি। এদের তালিকা থাকে প্রজেক্টের মূল ফোল্ডারের .gitignore নামের একটি সাধারণ লেখার ফাইলে:

# অপারেটিং সিস্টেম আর এডিটরের ফাইল
.DS_Store
Thumbs.db
.vscode/

# টুলের তৈরি জিনিস — যেকোনো সময় আবার বানানো যায়
node_modules/
dist/
*.log

# গোপন তথ্য — কখনোই commit নয়
.env
.env.*
!.env.example

নিয়মগুলো সহজ: # দিয়ে মন্তব্য; * মানে “যেকোনো সংখ্যক অক্ষর” (তবে / নয়); শেষে / মানে শুধু ফোল্ডার; শুরুতে / মানে শুধু মূল ফোল্ডারে; আর ! দিয়ে আগের কোনো নিয়মের ব্যতিক্রম। একই ফাইলে একাধিক নিয়ম মিললে শেষের মিলটাই জেতে। নিচের সিমুলেটরটি এই মূল নিয়মগুলো দিয়ে কয়েকটি ফাইলের ভাগ্য ঠিক করে:

// ছোট একটি .gitignore সিমুলেটর (আসল Git আরও কিছু নিয়ম মানে)
const rules = ['*.log', 'node_modules/', '.env', '/drafts', '!important.log'];
const paths = ['index.html', 'error.log', 'important.log', 'node_modules/sass/index.js',
  '.env', 'css/.env', 'drafts/old.html', 'blog/drafts/post.html'];

function toRegex(p) {
  const dirOnly = p.endsWith('/'); if (dirOnly) p = p.slice(0, -1);
  const anchored = p.includes('/'); p = p.replace(/^\//, '');
  const body = p.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '[^/]*');
  return new RegExp((anchored ? '^' : '(^|/)') + body + (dirOnly ? '/' : '(/|$)'));
}

for (const f of paths) {
  let ignored = false, why = '(no rule)';
  for (const r of rules) {
    const neg = r.startsWith('!');
    if (toRegex(neg ? r.slice(1) : r).test(f)) { ignored = !neg; why = r; }
  }
  console.log((ignored ? 'IGNORED  ' : 'tracked  ') + f.padEnd(28) + '<- ' + why);
}

গোপন তথ্য — একবার push মানে চিরকাল প্রকাশ্য

পেমেন্ট গেটওয়ের secret key, ইমেইল সেবার পাসওয়ার্ড, ডেটাবেসের পাসওয়ার্ড — এগুলো রাখা হয় .env ফাইলে, আর সেই ফাইল .gitignore-এ। কারণ Git-এর ইতিহাস মুছে ফেলা প্রায় অসম্ভব: পরের commit-এ চাবি মুছলেও আগের commit-এ সেটি থেকেই যায়, আর GitHub-এর public repository-তে স্বয়ংক্রিয় bot সারাক্ষণ এমন চাবি খোঁজে। GitHub-এর নিজের secret scanning কিছু পরিচিত ধরনের চাবি ধরতে পারে, কিন্তু তার ওপর ভরসা করে বসে থাকবেন না।

৫ · Branch — মূল কাজ না ভেঙে নতুন কিছু চেষ্টা

সাইট চলছে, ক্রেতারা অর্ডার দিচ্ছেন। এখন সাবরিনা একটি dark mode (পর্ব ৩৬) যোগ করতে চান — কিন্তু অর্ধেক কাজ করা অবস্থায় মূল সাইট ভাঙতে চান না। সমাধান branch: ইতিহাসের একটি আলাদা ধারা, যেখানে যত খুশি পরীক্ষা চলবে, আর কাজ ভালো হলে মূল ধারায় মিলিয়ে নেওয়া (merge) হবে।

git branch                  # কোন কোন branch আছে, আপনি কোনটায় (* চিহ্ন)
git switch -c dark-mode     # নতুন branch বানিয়ে সেখানে যান
git switch main             # main-এ ফিরে যান
git merge dark-mode         # (main-এ দাঁড়িয়ে) dark-mode-এর কাজ মিলিয়ে নিন
git branch -d dark-mode     # মেলানো শেষ, নামটি মুছে দিন

পুরোনো টিউটোরিয়াল আর অনেক AI উত্তরে একই কাজ দেখবেন git checkout -b dark-mode দিয়ে — সেটিও চলে, কিন্তু checkout অনেক রকম কাজ করত বলে বিভ্রান্তিকর ছিল; তাই ২০১৯ সালে Git 2.23-এ আলাদা git switch আর git restore আসে। নিচে দেখুন ভেতরে কী ঘটে:

* 9c41e0d (HEAD -> main) Update prices for winter collection
* 3f2a1b7 Add home page with product list

Switched to a new branch 'dark-mode'

* 9c41e0d (HEAD -> dark-mode, main) Update prices for winter collection
* 3f2a1b7 Add home page with product list

* e7b2a90 (HEAD -> dark-mode) Respect prefers-color-scheme
* 4d8c3f1 Add dark colour tokens
* 9c41e0d (main) Update prices for winter collection
* 3f2a1b7 Add home page with product list

Switched to branch 'main'

style.css খুলে দেখুন — dark mode-এর কোনো লাইন নেই।
ফাইল হারায়নি; Git ফোল্ডারটিকে main-এর ছবিতে ফিরিয়ে দিয়েছে।

Updating 9c41e0d..e7b2a90
Fast-forward
 style.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

CONFLICT (content): Merge conflict in style.css
Automatic merge failed; fix conflicts and then commit the result.

<<<<<<< HEAD
  --accent: #c2410c;
=======
  --accent: #15803d;
>>>>>>> dark-mode

৬ · GitHub — অনলাইনের আলমারি আর push

এ পর্যন্ত সব ছিল আপনার কম্পিউটারে। ল্যাপটপ চুরি গেলে বা হার্ডডিস্ক নষ্ট হলে? সহকর্মী কীভাবে কাজ পাবেন? এখানে আসে remote — একই repository-র আরেকটি কপি, সাধারণত GitHub-এ। মনে রাখুন: Git একটি টুল, GitHub একটি সেবা। Git চলে আপনার কম্পিউটারে, GitHub সেই Git repository অনলাইনে রাখে আর তার চারপাশে issue, pull request, আর সাইট প্রকাশের মতো সুবিধা দেয়। একই কাজের অন্য সেবাও আছে — GitLab, Bitbucket, Codeberg.

repository বানিয়ে push করা

1. github.com-এ অ্যাকাউন্ট খুলে ওপরের + → New repository. নাম দিন nakshi-shop, Public বা Private বেছে নিন। আপনার কম্পিউটারে আগেই repository থাকলে README বা .gitignore যোগের ঘরগুলো ফাঁকা রাখুন — নইলে প্রথম push-এ ইতিহাস না মেলার ঝামেলা হয়।
2. GitHub পরের পাতায় নিজেই কমান্ডগুলো দেখাবে। সেগুলো এই:

git remote add origin https://github.com/sabrina-akter/nakshi-shop.git
git branch -M main
git push -u origin main

# যা দেখার কথা (সংখ্যাগুলো আলাদা হবে)
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Writing objects: 100% (9/9), 1.42 KiB | 1.42 MiB/s, done.
To https://github.com/sabrina-akter/nakshi-shop.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

git branch -M main শুধু নিশ্চিত করে যে আপনার শাখার নাম main — init.defaultBranch সেটিং না দিলে Git শাখার নাম master রাখতে পারে, তখন এটি নাম বদলে main করে দেয়; আগে সেটিংটি দিয়ে রাখলে এটি কিছুই বদলায় না, ক্ষতিও করে না। সবচেয়ে গুরুত্বপূর্ণ শেষ লাইনটি — একে ভেঙে দেখি:

পরিচয় প্রমাণ — HTTPS না SSH?

GitHub-এ push করতে প্রমাণ দিতে হয় আপনি কে। ২০২১ সাল থেকে GitHub Git-এর কাজে সাধারণ অ্যাকাউন্ট-পাসওয়ার্ড নেয় না। দুটি পথ:

README.md — repository-র পরিচয়পত্র

GitHub repository-র প্রথম পাতায় README.md সাজিয়ে দেখায়। এটি লেখা হয় Markdown-এ — সহজ লেখার নিয়ম, যা GitHub নিজেই HTML-এ রূপ দেয়। নিয়োগকর্তা আগে README-ই পড়েন:

# সাবরিনার নকশিকাঁথা

রাজশাহীর হাতে সেলাই করা নকশিকাঁথার ছোট অনলাইন দোকান।
শুধু HTML আর CSS — কোনো framework নেই।

**লাইভ সাইট:** https://sabrina-akter.github.io/nakshi-shop/

## যা আছে
- রেসপন্সিভ লেআউট (CSS Grid)
- dark mode (`prefers-color-scheme`)
- অ্যাক্সেসিবল অর্ডার ফর্ম

৭ · সাইট প্রকাশ — তিনটি পথ

এবার আসল মুহূর্ত: আপনার ফোল্ডারের HTML-CSS ফাইল এমন একটি কম্পিউটারে তোলা, যা দিনরাত চালু থাকে আর পৃথিবীর যে কেউ ব্রাউজারে ঠিকানা লিখলে ফাইলগুলো পাঠায়। একে বলে deploy করা, আর সেই জায়গাকে web hosting. আমাদের সাইট static site — সার্ভারকে শুধু তৈরি ফাইল হুবহু পাঠাতে হবে, কিছু হিসাব করতে হবে না। এজন্য পথ অনেক, আর বেশিরভাগই বিনামূল্যে শুরু করা যায়।

পথ ১ — GitHub Pages: repository থেকে সরাসরি

কোড আগেই GitHub-এ থাকলে এর চেয়ে সহজ কিছু নেই। GitHub Pages একটি branch-এর ফাইলগুলোকেই ওয়েবসাইট বানিয়ে দেয়:

1. repository-র Settings → Pages-এ যান।
2. Build and deployment-এর Source-এ Deploy from a branch বেছে নিন। (অন্য বিকল্প GitHub Actions — build টুল ব্যবহার করলে কাজে লাগে; শুধু HTML-CSS-এ দরকার নেই।)
3. Branch-এ main আর ফোল্ডার / (root) দিয়ে Save. (চাইলে শুধু /docs ফোল্ডারটিও প্রকাশ করা যায়।) বেছে নেওয়া ফোল্ডারে index.html থাকতে হবে — সেটিই সাইটের প্রথম পাতা।
4. এক-দুই মিনিট পরে একই পাতায় লিংক আসবে: https://sabrina-akter.github.io/nakshi-shop/. এরপর প্রতিবার git push করলে সাইট নিজে থেকে হালনাগাদ হবে।

খেয়াল রাখুন: বিনামূল্যের GitHub অ্যাকাউন্টে Pages চলে শুধু public repository থেকে — private repository থেকে সাইট প্রকাশ করতে পেইড প্ল্যান লাগে। আর repository-র নাম যদি হুবহু <username>.github.io হয়, তাহলে সেটি আপনার “user site” — ঠিকানা হয় https://sabrina-akter.github.io/, শেষে কোনো ফোল্ডার ছাড়া। পোর্টফোলিওর জন্য এটিই আদর্শ (পর্ব ৫৪-এর ক্যাপস্টোনে কাজে লাগবে)।

পথ ২ — Netlify, Vercel, Cloudflare Pages

এই সেবাগুলো static site প্রকাশের জন্যই বানানো, আর সবারই বিনামূল্যের একটি স্তর আছে (সীমা আর শর্ত তাদের নিজের পাতায় দেখে নিন — এগুলো সময়ের সাথে বদলায়)। দুটি উপায়ে কাজ করে:

• টেনে ছেড়ে দেওয়া (drag-and-drop): Netlify-তে লগইন করে প্রজেক্ট ফোল্ডারটি ব্রাউজারের নির্দিষ্ট জায়গায় টেনে ছেড়ে দিলেই কয়েক সেকেন্ডে একটি ঠিকানা (যেমন random-name.netlify.app) পাবেন। Git লাগে না, তবে প্রতিবার হাতে তুলতে হয়।
• repository যুক্ত করা: GitHub অ্যাকাউন্ট যুক্ত করে repository বেছে নিন। এরপর প্রতিটি push-এ সেবাটি নিজে থেকে নতুন সংস্করণ প্রকাশ করে — একে বলে continuous deployment. আলাদা branch বা pull request-এর জন্য আলাদা পরীক্ষামূলক ঠিকানাও (deploy preview) দেয় — ক্লায়েন্টকে নতুন ডিজাইন দেখাতে চমৎকার।

শুধু HTML-CSS হলে “build command” ঘর ফাঁকা রাখুন আর “publish directory” দিন যে ফোল্ডারে index.html আছে। এই সেবাগুলো ফাইল ছড়িয়ে দেয় একটি CDN-এ — পৃথিবীর নানা শহরের সার্ভারে কপি থাকে, তাই ঢাকা বা টরন্টো, দুই জায়গা থেকেই সাইট দ্রুত খোলে।

পথ ৩ — শেয়ার্ড হোস্টিং, cPanel আর SFTP

বাংলাদেশের ব্যবসা আর ক্লায়েন্টের কাজে সবচেয়ে প্রচলিত পথ এখনো এটি: দেশি বা বিদেশি কোনো হোস্টিং কোম্পানি থেকে domain আর shared hosting প্যাকেজ কেনা, সাথে পাওয়া যায় cPanel. এর সুবিধা — একই জায়গায় info@yourshop.com.bd-এর মতো ইমেইল, PHP আর MySQL (পরে ডায়নামিক কিছু লাগলে), আর বাংলায় সাপোর্ট পাওয়ার সুযোগ। হোস্ট বাছাইয়ে দামের পাশাপাশি দেখুন বিনামূল্যে HTTPS, SFTP আর ব্যাকআপ আছে কি না।

কাস্টম 404 পাতা

কেউ ভুল ঠিকানা লিখলে বা পুরোনো লিংকে এলে সার্ভার পাঠায় 404 Not Found. হোস্টের সাদামাটা ইংরেজি পাতার বদলে নিজের একটি 404.html রাখুন, যা দর্শককে পথ দেখায়। GitHub Pages, Netlify আর Cloudflare Pages মূল ফোল্ডারের 404.html নিজে থেকেই ব্যবহার করে; cPanel-এ .htaccess ফাইলে একটি লাইন লাগে: ErrorDocument 404 /404.html.

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>পাতাটি পাওয়া যায়নি — সাবরিনার নকশিকাঁথা</title>
  <meta name="robots" content="noindex">
  <style>
    body { font-family: system-ui, sans-serif; max-width: 34rem; margin: 2rem auto;
           padding: 0 1rem; text-align: center; color: #1f2937; }
    .big { font-size: 4rem; font-weight: 800; color: #c2410c; margin: 0; }
    a { color: #1d4ed8; }
  </style>
</head>
<body>
  <main>
    <p class="big" aria-hidden="true">404</p>
    <h1>দুঃখিত, এই পাতাটি খুঁজে পাওয়া যায়নি</h1>
    <p>লিংকটি হয়তো পুরোনো, অথবা ঠিকানায় বানান ভুল আছে।</p>
    <p><a href="/">প্রথম পাতায় ফিরুন</a> · <a href="/products.html">সব কাঁথা দেখুন</a></p>
  </main>
</body>
</html>

৮ · নিজের domain, DNS আর HTTPS

sabrina-akter.github.io/nakshi-shop কাজ চলার মতো, কিন্তু দোকানের সাইনবোর্ডে লেখার মতো নয়। নিজের domain — ধরুন nakshibari.com.bd — কিনে সাইটের সাথে জুড়তে হলে domain আর DNS কীভাবে কাজ করে তা জানা দরকার। মূল ধারণাগুলো কম্পিউটার ফান্ডামেন্টালস কোর্সের Domain আর Hosting পর্বে বিস্তারিত আছে; এখানে শুধু প্রকাশের কাজে যা লাগে। (.bd domain দেশের নির্দিষ্ট নিবন্ধন ব্যবস্থার মাধ্যমে, সাধারণত কোনো রিসেলার হোস্টিং কোম্পানির হাত দিয়ে কেনা হয়; .com যেকোনো registrar থেকে।)

domain কেনার পর তার ঠিকানা-খাতায় — DNS-এ — কয়েকটি লাইন (DNS record) লিখতে হয়, যা বলে “এই নামের সাইট কোন সার্ভারে আছে।” দর্শক ঠিকানা লেখার পর কী কী ঘটে, ধাপে ধাপে দেখুন:

https://nakshibari.com.bd/
ব্রাউজার শুধু নাম জানে। ইন্টারনেটে কম্পিউটার খোঁজা হয় IP ঠিকানা দিয়ে।

Type   Name   Value                       TTL
A      @      185.199.108.153             3600
A      @      185.199.109.153             3600
A      @      185.199.110.153             3600
A      @      185.199.111.153             3600
CNAME  www    sabrina-akter.github.io.    3600

Certificate for: nakshibari.com.bd, www.nakshibari.com.bd
Issued by:       Let's Encrypt
Valid:           90 days (স্বয়ংক্রিয়ভাবে নবায়ন)

HTTP/2 200
content-type: text/html; charset=utf-8
cache-control: max-age=600

<!DOCTYPE html><html lang="bn"> …

HTTPS চালুর পর দুটি কাজ বাকি থাকে। প্রথমত, http:// দিয়ে আসা দর্শককে https://-এ পাঠানো — GitHub Pages আর Netlify নিজেই করে; cPanel-এর Apache সার্ভারে .htaccess-এ:

# http → https, স্থায়ী redirect (301)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# নিজের 404 পাতা
ErrorDocument 404 /404.html

দ্বিতীয়ত, পাতার ভেতরে কোথাও http:// দিয়ে ছবি বা স্ক্রিপ্ট আনা থাকলে তা বদলানো — নইলে ব্রাউজার সেগুলো mixed content বলে আটকে দেয়। DevTools-এর Console-এ এমন সতর্কবার্তা খুঁজুন (পর্ব ৪৭)।

৯ · প্রকাশের আগের চেকলিস্ট আর সাইট হালনাগাদ রাখা

বিমান ওড়ার আগে পাইলট যত অভিজ্ঞই হোন, চেকলিস্ট মিলিয়ে নেন। সাইট প্রকাশও তাই — লিংক সবাইকে দেওয়ার আগে এই তালিকা মেলান। প্রতিটির বিস্তারিত আগের পর্বগুলোতে আছে; এখানে শুধু একসাথে:

এর কিছু অংশ পাতা নিজেই নিজের ব্যাপারে বলতে পারে। নিচের পাতার শেষে একটি ছোট স্ক্রিপ্ট আছে, যা নিজের <head> আর ছবিগুলো পরীক্ষা করে ফল ছাপে:

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>সাবরিনার নকশিকাঁথা — রাজশাহীর হাতে সেলাই</title>
  <meta name="description" content="হাতে সেলাই করা নকশিকাঁথা, সারা দেশে ডেলিভারি।">
  <meta property="og:title" content="সাবরিনার নকশিকাঁথা">
</head>
<body>
  <h1>সাবরিনার নকশিকাঁথা</h1>
  <img src="../favicon.jpg" width="64" height="64">
  <p>নতুন কাঁথার ছবি শিগগির আসছে।</p>
  <script>
    const q = (s) => document.querySelector(s);
    const checks = [
      ['html lang', document.documentElement.lang],
      ['title (10+ chars)', document.title.length >= 10],
      ['meta description', q('meta[name="description"]')],
      ['viewport', q('meta[name="viewport"]')],
      ['og:image', q('meta[property="og:image"]')],
      ['favicon link', q('link[rel~="icon"]')],
      ['exactly one h1', document.querySelectorAll('h1').length === 1],
      ['every img has alt', [...document.images].every((i) => i.hasAttribute('alt'))],
    ];
    checks.forEach(([name, ok]) => console.log((ok ? 'PASS  ' : 'FAIL  ') + name));
  </script>
</body>
</html>

sitemap আর robots.txt দুটোই সাধারণ লেখার ফাইল, সাইটের মূল ফোল্ডারে থাকে:

# robots.txt — সব সার্চ ইঞ্জিন সব পাতা দেখতে পারে
User-agent: *
Allow: /

Sitemap: https://nakshibari.com.bd/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://nakshibari.com.bd/</loc><lastmod>2026-10-20</lastmod></url>
  <url><loc>https://nakshibari.com.bd/products.html</loc></url>
  <url><loc>https://nakshibari.com.bd/contact.html</loc></url>
</urlset>

অ্যানালিটিক্স (web analytics): কতজন আসছেন, কোন পাতা জনপ্রিয় — জানতে Google Analytics বা গোপনীয়তা-বান্ধব কোনো বিকল্প যোগ করতে পারেন। তবে প্রতিটি বাড়তি স্ক্রিপ্ট পাতা ভারী করে, আর দর্শকের তথ্য সংগ্রহ করলে তা জানানো আপনার দায়িত্ব।

সাইট হালনাগাদ রাখা — প্রতিদিনের ছন্দ

প্রকাশের পর আসল কাজ শুরু: নতুন পণ্য, দাম বদল, ভুল ঠিক করা। Git থাকলে ছন্দটা সহজ:

git pull                          # অন্য কম্পিউটারে কাজ করে থাকলে আগে নতুনটা আনুন
# ... ফাইল বদলান, ব্রাউজারে দেখে নিন ...
git add .
git commit -m "Add three new winter kanthas"
git push                          # GitHub Pages / Netlify নিজে থেকে প্রকাশ করবে

cPanel-এ শুধু বদলানো ফাইলগুলো SFTP দিয়ে তুলুন — কিন্তু তার আগেও commit করুন, যাতে ইতিহাস থাকে। আরও কয়েকটি অভ্যাস: বড় পরিবর্তন আলাদা branch-এ করে deploy preview-তে দেখে তবে merge; CSS বদলালে style.css?v=2-এর মতো cache busting (পর্ব ১৬); আর domain-হোস্টিংয়ের নবায়নের তারিখ ক্যালেন্ডারে রাখা — মেয়াদ পেরোলে সাইট বন্ধ, domain হাতছাড়াও হতে পারে। সবচেয়ে বড় নিয়ম: সার্ভারে সরাসরি কিছু বদলাবেন না; সবকিছু Git-এর ভেতর দিয়ে।

১০ · AI-এর যুগে Git আর প্রকাশ

Git-এর কমান্ড আর হোস্টিংয়ের ধাপ AI খুব ভালো ব্যাখ্যা করতে পারে — আবার এখানেই এর ভুল সবচেয়ে ব্যয়বহুল হতে পারে। একটি ভুল HTML ট্যাগ পাতা একটু খারাপ দেখায়; একটি ভুল Git কমান্ড কয়েক দিনের কাজ মুছে দিতে পারে, আর একটি ভুল পরামর্শে পাসওয়ার্ড পৃথিবীর সামনে চলে যেতে পারে।

AI-এর পরামর্শ মেনে প্রকাশের আগে — যাচাইয়ের চেকলিস্ট

• প্রতিটি কমান্ড চালানোর আগে জানি সেটি কী করে; --force, reset --hard, clean -fd দেখলে থেমে কারণ জিজ্ঞেস করেছি
• git status পড়ে নিশ্চিত হয়েছি — .env বা কোনো পাসওয়ার্ডের ফাইল staging-এ নেই
• DNS-এর মান, GitHub Pages বা Netlify-র ধাপ সেবার অফিসিয়াল ডকুমেন্টেশনের সাথে মিলিয়েছি
• প্রকাশিত সাইট validator.w3.org-এ পরীক্ষা করেছি, DevTools-এর Console আর Network-এ কোনো লাল error বা 404 নেই
• Lighthouse চালিয়েছি (Performance, Accessibility, SEO); কোনো বিষয়ে সন্দেহ হলে MDN পড়েছি, নতুন CSS ব্যবহার করলে Can I use-এ সাপোর্ট দেখেছি
• সাইট নিজের ফোনে মোবাইল ডেটায় খুলে দেখেছি — শুধু নিজের কম্পিউটারে নয়