Apna Pehla Website 1 Ghante Mein Banao — GitHub Pages Pe Free Host Karo

✏

15 min

HTML likhna

📊

10 min

CSS banana

📄

15 min

GitHub setup

🌐

5 min

Live ho jaana

Shuru Karne Se Pehle — Yeh Chahiye

⏰ 2 minute setup

💻

VS Code

Free code editor — code.visualstudio.com se download karo

🐘

GitHub Account

github.com pe free account banao — email se

🌐

Browser

Chrome ya Firefox — already hai tumhare paas!

☕

1 Ghanta

Aur thoda patience — pehli baar thoda time lagta hai!

💡 Pro Tip: VS Code install nahi karna toh replit.com ya codepen.io use karo — browser mein hi code hoga!

HTML File Banao — index.html

⏰ 15 minute

VS Code kholo → File → New File → naam rakho index.html — yeh bahut zaruri hai! GitHub Pages sirf index.html ko homepage maanta hai.

Neeche wala code copy karo aur apni file mein paste karo. Apna naam, title aur bio badlo!

HTML — index.html

<!-- Yeh tumhara pehla website hai! -->
<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Mera Pehla Website</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>

  <header>
    <h1>Namaste! Main [Apna Naam] Hoon 👋</h1>
    <p>Coding seekh raha hoon | CIWeb ka fan</p>
  </header>

  <main>
    <section>
      <h2>Mere Baare Mein</h2>
      <p>Main [City] se hoon. Mujhe coding
      aur technology pasand hai.</p>
    </section>

    <section>
      <h2>Meri Skills</h2>
      <ul>
        <li>HTML — Seekh raha hoon</li>
        <li>CSS — Shuru kiya hai</li>
        <li>JavaScript — Aage sikhna hai</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>© 2026 Mera Naam. CIWeb se seekha.</p>
  </footer>

</body>
</html>

⚠ Zaruri: File ka naam hamesha index.html hi rakho — Index.html ya INDEX.HTML nahi! GitHub case-sensitive hai.

CSS Se Sundar Banao — style.css

⏰ 10 minute

Usi folder mein ek aur file banao — naam rakho style.css. Neeche wala CSS paste karo — yeh tumhare website ko clean aur modern look dega:

CSS — style.css

/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f5f5f5;
  color: #1a1a1a;
  line-height: 1.7;
}

header {
  background: linear-gradient(135deg, #e8401c, #c73516);
  color: white;
  padding: 3rem 2rem;
  text-align: center;
}

header h1 { font-size: 2rem; margin-bottom: .5rem; }
header p  { opacity: .8; }

main {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

section {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

h2 { color: #e8401c; margin-bottom: .8rem; }

ul { list-style: none; }
ul li { padding: .4rem 0; border-bottom: 1px solid #f0f0f0; }
ul li::before { content: "→ "; color: #e8401c; }

footer {
  text-align: center;
  padding: 1.5rem;
  color: #888;
  font-size: .85rem;
}

💡 Check karo: VS Code mein index.html pe right-click karo → "Open with Live Server" — tumhara website browser mein dikhega!

GitHub Pe Repository Banao

⏰ 10 minute

github.com pe login karo aur yeh steps follow karo:

Top-right mein "+" icon pe click karo → "New repository"
Repository naam kuch bhi rakh sakte ho — jaise my-website, portfolio, blog
Public select karo — Private nahi!
"Add a README file" pe tick karo
Green button "Create repository" pe click karo

💡 Custom Domain Use Karo: Repository naam kuch bhi rakho — my-blog, portfolio, kuch bhi! Bas GitHub Pages enable karo aur apna custom domain (jaise ciweb.in) Settings → Pages mein daalo.

Files Upload Karo GitHub Pe

⏰ 5 minute

Repository create hone ke baad files upload karo:

Repository page pe "Add file" → "Upload files" pe click karo
Apni index.html aur style.css dono files drag karo ya choose karo
Neeche "Commit changes" pe click karo
Wait karo — 1-2 minute mein website live ho jaayegi!

🌐 Website ka URL: Custom domain ho toh URL hoga https://tumharadomain.com — repository naam matter nahi karta! Bina domain ke URL hoga https://username.github.io/repo-naam

GitHub Pages Enable Karo

⏰ 3 minute

Agar website abhi bhi nahi dikh rahi toh manually Pages enable karo:

Repository mein Settings tab pe jao
Left menu mein "Pages" pe click karo
Source mein "Deploy from a branch" select karo
Branch: main, Folder: / (root) select karo
Save karo — 2-3 minute mein live ho jaayegi!

✅ Done! Congratulations! Tumhara website ab poori duniya dekh sakti hai — aur tumne iske liye ek rupaya nahi diya!

🚀 Aage Kya Karo?

Website Aur Behtar Banao

Apni speed se

Apni photo add karo — <img src="photo.jpg">
Contact section banao — email link se
Social media links add karo
JavaScript seekho — buttons aur animations ke liye
Custom domain lagao — jaise tumhanaam.com (yearly ~500-1000 rupaye)
Google Analytics lagao — visitors track karo

⚡ Quick Quiz — Kitna Samjha?

GitHub Pages Quiz

5 sawaal — test karo apna knowledge!

Sawaal 1 / 5

GitHub Pages pe website host karne ke liye homepage file ka naam kya hona chahiye?

✅ index.html — yeh default homepage file hai. GitHub Pages (aur saare web servers) isi file ko seedha URL pe serve karte hain.

Sawaal 2 / 5

GitHub Pages mein website live hone ke baad update karne ke liye kya karna hota hai?

✅ Sirf file update karo aur Commit karo — GitHub Pages automatically 1-2 minute mein live update ho jaata hai!

Sawaal 3 / 5

CSS file ko HTML mein kaise link karte hain?

✅ <link rel="stylesheet" href="style.css"> — yeh tag <head> ke andar lagta hai aur CSS file ko connect karta hai.

Sawaal 4 / 5

GitHub Pages mein repository Public hona chahiye ya Private?

✅ Public — free GitHub account mein Pages sirf public repos pe kaam karta hai. Private repos ke liye paid plan chahiye.

Sawaal 5 / 5

Website ki styling ke liye kaun si language use hoti hai?

✅ CSS (Cascading Style Sheets) — yeh colors, fonts, layout sab kuch control karta hai. HTML structure hai, CSS uski dressing!

🎉

0/5

Zabardast!

Ab website banao!

🏆 Ab Teri Baari Hai!

Website bana li? Apna link comment mein share karo ya hamara HTML Quiz try karo — certificate bhi milega!

HTML Quiz Try Karo ⚡ Free Coding Sites Dekho →

Apna Pehla Website 1 Ghante Mein Banao 💻 — GitHub Pages Pe Free Host Karo!