Saytni internetga joylash va keyingi qadamlar

Hozircha saytingiz faqat sizning kompyuteringizda yashaydi — uni do'stingizga ko'rsatib bo'lmaydi. Bu darsda uni bepul internetga joylab, havolasini istalgan odamga yuborish mumkin bo'ladigan holga keltiramiz. Oxirida esa veb-dasturlashda keyin nimani o'rganish kerakligi haqida gaplashamiz.

Hosting va domen

1-darsdan eslang: brauzer sahifani serverdan so'raydi. Demak, saytingizni hamma ko'rishi uchun uning fayllari kun-u tun yoqiq turadigan serverda turishi kerak.

• Hosting — saytingiz fayllari uchun serverdagi joy. Xuddi do'kon uchun ijaraga olingan bino kabi.
• Domen — saytning nomi, ya'ni manzili: mening-saytim.uz. Bu — do'kon peshtaxtasidagi yozuv va manzil.

Bizning saytimiz faqat HTML, CSS va JavaScript fayllaridan iborat — bunday saytlar statik sayt deyiladi. Statik saytlar uchun ko'plab xizmatlar bepul hosting va bepul manzil beradi:

O'z domeningizni (masalan, .uz bilan tugaydigan) domen sotuvchi kompaniyalardan yillik to'lov evaziga sotib olib, keyin shu xizmatlarga ulash mumkin. Boshlanishiga bepul manzil bemalol yetadi.

1-usul. Netlify Drop — eng tezi

Agar saytni tezda kimgadir ko'rsatish kerak bo'lsa:

1. Brauzerda app.netlify.com/drop sahifasini oching.
2. Kompyuteringizdagi sayt papkasini (ichida index.html bor papkani) sichqoncha bilan shu sahifadagi maydonga sudrab tashlang.
3. Bir necha soniyada https://tasodifiy-nom.netlify.app kabi havola paydo bo'ladi. Uni ochib ko'ring va do'stlaringizga yuboring.

Ro'yxatdan o'tmasangiz, bunday sayt vaqtinchalik bo'ladi. Uni saqlab qolish va nomini o'zgartirish uchun bepul akkaunt oching (Google yoki GitHub akkaunti bilan kirish mumkin).

2-usul. GitHub Pages — qadamma-qadam

GitHub — dasturchilar o'z kodlarini saqlaydigan va bir-biri bilan ulashadigan eng katta sayt. U yerda akkaunt ochish dasturchi uchun foydali: ish beruvchilar ko'pincha nomzodning GitHub sahifasiga qarashadi. GitHub'ning Pages xizmati esa kodingizni bepul saytga aylantiradi.

1. Akkaunt oching

github.com/signup sahifasida elektron pochta, parol va foydalanuvchi nomi (username) kiriting. Foydalanuvchi nomini o'ylab tanlang — u saytingiz manzilida bo'ladi. Masalan, nomingiz aziz-dev bo'lsa, manzil aziz-dev.github.io bo'ladi.

2. Yangi repozitoriy yarating

Repozitoriy (inglizcha repository, qisqacha «repo») — GitHub'dagi loyiha papkasi. Yuqori o'ng burchakdagi + belgisini bosib, New repository ni tanlang:

1. 1Repository name — loyiha nomi, masalan veb-sayt. Bu nom sayt manzilining oxirida bo'ladi: aziz-dev.github.io/veb-sayt. Kichik lotin harflari va chiziqcha ishlating.
2. 2Public (ochiq) — bepul GitHub Pages uchun repozitoriy ochiq bo'lishi kerak.
3. 3Create repository — yaratish.

3. Sayt fayllarini yuklang

Yangi, bo'sh repozitoriy sahifasida uploading an existing file («mavjud faylni yuklash») havolasini bosing. Keyin kompyuteringizdagi sayt papkasini oching va ichidagi fayllarni (index.html, style.css, script.js, rasmlar papkasi) belgilab, shu sahifaga sudrab tashlang:

1. 1Fayllarni shu maydonga sudrab tashlang yoki choose your files orqali tanlang. Yuklangan fayllar ro'yxati pastda ko'rinadi.
2. 2Commit changes — o'zgarishlarni saqlash. GitHub'da har bir saqlash commit deyiladi; u loyiha tarixida qoladi.

4. Pages'ni yoqing

Repozitoriy sahifasining yuqorisidagi Settings (sozlamalar) bo'limiga o'ting, chapdagi ro'yxatdan Pages ni tanlang:

1. 1Settings — repozitoriy sozlamalari.
2. 2Pages — chap ro'yxatdagi «Code and automation» qismida.
3. 3Branch (tarmoq) ro'yxatidan main ni tanlang. Avval u None bo'ladi.
4. 4Papka: / (root) — ya'ni repozitoriyning ildizi, index.html turgan joy.
5. 5Save — saqlash.

5. Saytingiz tayyor!

1–2 daqiqa kuting va Pages sahifasini yangilang (F5). Tepada yashil xabar chiqadi:

1. 1«Your site is live at…» — «Saytingiz shu manzilda ishlayapti». Bu havolani istalgan odamga yuborishingiz mumkin: telefonda ham, boshqa davlatda ham ochiladi.
2. 2Visit site — saytni ochib ko'rish.

Saytni yangilash

Saytga o'zgartirish kiritmoqchi bo'lsangiz, kompyuteringizda tahrirlang va o'zgargan fayllarni xuddi 3-qadamdagidek qayta yuklang (Add file → Upload files). Bir-ikki daqiqadan keyin sayt o'zi yangilanadi.

Sayt ochilmasa

Joylashdan oldin tekshiring

Haqiqiy dasturchilar saytni chiqarishdan oldin kichik ro'yxat bo'yicha tekshiradi. Siz ham shunday qiling:

• <html lang="uz"> va har bir sahifada tushunarli <title>.
• <meta name="description" content="..."> — sayt haqida bir-ikki gap. Google qidiruv natijalarida va havolani Telegram'da ulashganda shu matn chiqadi.
• Barcha rasmlarda ma'noli alt matn.
• Barcha havolalar ishlaydi, fayl nomlari kichik harflarda va bo'sh joysiz.
• Telefonda tekshirildi (DevTools'da Ctrl + Shift + M — 12-dars).
• Konsolda (F12 → Console) qizil xatolar yo'q.
• Shaxsiy ma'lumotlar yo'q.

Keyingi qadamlar

Siz veb-dasturlashning poydevorini qo'ydingiz: HTML, CSS va JavaScript'ni bilasiz, sayt yasab, uni internetga joylay olasiz. Bu — juda katta yutuq! Endi qayerga yurish mumkin?

1. Ko'p loyiha qiling

Eng muhim qadam — o'rganganlaringizni mustahkamlash. Darsliksiz, o'zingiz 3–5 ta kichik sayt yasang. G'oyalar:

• Portfolio — o'zingiz haqingizda sahifa: rasm, ko'nikmalar, loyihalar, aloqa.
• Mahalliy biznes uchun sahifa — choyxona, sartaroshxona yoki o'quv markazi: menyu, narxlar, manzil.
• Kalkulyator yoki valyuta konvertori.
• Viktorina o'yini — savollar massivi, ball hisoblash, natija.
• Retseptlar kitobi — kartochkalar, qidiruv, «sevimlilar» (localStorage).

Har bir loyihani GitHub'ga joylang — bu sizning portfoliongiz bo'ladi.

2. Git

Fayllarni GitHub'ga qo'lda yuklash — boshlanish uchun yaxshi, lekin dasturchilar buni Git dasturi orqali qiladi. Git — kodning «vaqt mashinasi»: har bir o'zgarish tarixda saqlanadi, istalgan vaqtda orqaga qaytish va jamoa bilan birga ishlash mumkin. Asosiy buyruqlar terminalda yoziladi:

git init                       # papkani Git loyihasiga aylantirish
git add .                      # barcha o'zgarishlarni tayyorlash
git commit -m "Bosh sahifa"    # tarixga saqlash (izoh bilan)
git push                       # GitHub'ga yuborish

VS Code'ning chap panelidagi Source Control bo'limi bu ishlarni tugmalar bilan qilish imkonini beradi.

3. JavaScript'ni chuqurroq

Zamonaviy saytlar ma'lumotni boshqa serverlardan oladi: ob-havo, valyuta kursi, yangiliklar. Buning uchun API (dasturlar bir-biri bilan gaplashadigan «eshik») va fetch ishlatiladi:

// Serverdan ma'lumot so'rash (internet kerak)
async function yukla() {
  const javob = await fetch("https://api.example.com/ob-havo?shahar=Toshkent");
  const malumot = await javob.json();     // JSON → JavaScript obyekti
  console.log(malumot.harorat);
}
yukla();

Bundan tashqari o'rganishga arziydi: async/await va Promise, modullar (import/export), xatolar bilan ishlash (try/catch) va TypeScript — turlari bor JavaScript.

4. Yo'nalish tanlang

Bepul o'quv manbalari

Mashqlar

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Bog'dagi olmalar</h1>
  <img src="../assets/rasmlar/olma.svg" width="120">
  <p>Bizning bog'imizda o'n xil olma navi o'sadi.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bog'dagi olmalar</title>
  <meta name="description" content="Bog'imizdagi o'n xil olma navi haqida qisqacha ma'lumot.">
</head>
<body>
  <h1>Bog'dagi olmalar</h1>
  <img src="../assets/rasmlar/olma.svg" width="120" alt="Qizil olma">
  <p>Bizning bog'imizda o'n xil olma navi o'sadi.</p>
</body>
</html>

O'zingizni sinang

Bu — butun kurs bo'yicha yakuniy test.