GitHub Pages — statik saytni deploy qilish

~15 daq · Git · GitHub Imkoniyatlari

Muammodan boshlaylik

Portfolio sayt yaratdingiz — HTML, CSS, bir oz JavaScript. Endi uni ish beruvchilarga ko'rsatish kerak. Hosting sotib olish, domen, FTP, server sozlash? Faqat bitta sahifa uchun?

GitHub Pages — repozitoriydagi statik saytni bepul internetga chiqaradi. Manzil: https://username.github.io. Sozlash — 2 daqiqa.

GitHub Pages nima?

• Statik saytlar uchun bepul hosting: HTML, CSS, JS, rasmlar
• HTTPS — avtomatik
• O'z domeningizni ulash mumkin
• Har push da avtomatik yangilanadi

Qila olmaydi: server tomonidagi kod (Node.js API, PHP, baza). Faqat brauzerda ishlaydigan narsalar. React, Vue, Vite kabi frontend lar — build qilingandan keyin statik fayllar bo'lgani uchun — ✅ ishlaydi.

Mos: portfolio, loyiha hujjatlari, blog, landing sahifa, kichik demo.

Ikki turdagi sayt

Bitta foydalanuvchi sayti va cheksiz loyiha saytlari.

1-usul: Oddiy HTML — branch dan

Eng sodda — build kerak bo'lmagan HTML sayt.

mkdir otabek.github.io && cd otabek.github.io
git init
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Otabek Hasanov — Dasturchi</title>
</head>
<body>
  <h1>Salom! Men Otabek</h1>
  <p>Backend dasturchi — Node.js, PostgreSQL, Docker</p>
</body>
</html>
EOF
git add . && git commit -m "Portfolio sayt"
git remote add origin git@github.com:otabek/otabek.github.io.git
git push -u origin main

GitHub da: repozitoriy → Settings → Pages:

• Source: Deploy from a branch
• Branch: main, papka: / (root) (yoki /docs)
• Save

1–2 daqiqadan keyin: https://otabek.github.io — sayt tayyor. Har bir push — avtomatik yangilanish.

2-usul: Vite / React — GitHub Actions bilan

Build kerak bo'lgan loyihalar uchun — GitHub Actions (38-dars). Settings → Pages → Source: GitHub Actions.

# .github/workflows/pages.yml
name: Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

Muhim: base yo'l

Loyiha sayti /dokon/ ostida joylashadi — Vite bilmasa, CSS va JS /assets/... dan qidiriladi va topilmaydi (oq sahifa):

// vite.config.js
export default {
  base: '/dokon/',      // repozitoriy nomi
};

Foydalanuvchi sayti (username.github.io) uchun — base: '/' (standart).

[!WARNING] GitHub Pages da SPA routing (React Router BrowserRouter) sahifani yangilashda 404 beradi — server index.html ga yo'naltirmaydi (Docker kursi, 36-dars). Yechimlar: HashRouter ishlatish (/#/mahsulot/42 — DevDocs sayti ham shunday), yoki 404.html ni index.html nusxasi qilish.

O'z domeningiz

otabek.uz domeningiz bor:

1. DNS (domen sotuvchisi panelida):
   • Asosiy domen uchun — 4 ta A yozuv: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
   • www uchun — CNAME: otabek.github.io
2. GitHub → Settings → Pages → Custom domain: otabek.uz → Save
3. Enforce HTTPS ✅ (sertifikat bir necha daqiqada avtomatik)

Branch dan deploy da GitHub repozitoriyga CNAME faylini qo'shadi. Actions bilan — public/CNAME fayliga domen nomini yozing, u build ga tushadi.

Tekshirish (Linux kursi, 32-dars):

dig otabek.uz +short

Jekyll — Markdown dan sayt

GitHub Pages ichida Jekyll o'rnatilgan — Markdown fayllardan avtomatik sayt (blog uchun qulay). Branch dan deploy qilganda .md fayllar HTML ga aylanadi.

Kerak bo'lmasa (oddiy HTML yoki Vite) — repozitoriy ildiziga bo'sh .nojekyll fayli qo'ying: Jekyll o'chadi va _ bilan boshlanadigan papkalar yo'qolib qolmaydi.

Zamonaviy muqobillar — Astro, VitePress, Docusaurus (hujjatlar uchun) — Actions bilan deploy qilinadi.

Cheklovlar

Portfolio, hujjat va kichik loyihalar uchun — yetarlidan ortiq. Jiddiy veb-ilovalar uchun — Vercel, Netlify, Cloudflare Pages (bular ham bepul tariflarga ega, va server funksiyalarini qo'llab-quvvatlaydi).

Nima uchun shunday?

Nima uchun GitHub bepul hosting beradi — va nima uchun faqat statik?

Statik saytlar — eng arzon va eng xavfsiz hosting turi: server faqat tayyor fayllarni beradi, hech qanday kod bajarilmaydi, baza yo'q — hujum yuzasi deyarli nol, va fayllar butun dunyo bo'ylab CDN orqali keshlanadi. GitHub uchun bu juda kam xarajat, lekin katta foyda: hujjatlar va loyiha saytlari repozitoriy yonida yashaydi, va dasturchilar platformada qoladi. Siz uchun esa — kod va sayt bitta joyda: git push qilasiz, sayt yangilanadi. Bu "Git — deploy mexanizmi" g'oyasining eng oddiy ko'rinishi.

Xulosa

Eslab qoling:

• GitHub Pages — statik saytlar uchun bepul hosting, avtomatik HTTPS
• username.github.io repo → https://username.github.io; boshqa repo → /repo-nomi/
• Oddiy HTML: Settings → Pages → Deploy from branch → main
• Vite/React: Source = GitHub Actions; upload-pages-artifact + deploy-pages
• Loyiha sayti uchun base: '/repo-nomi/'
• SPA — HashRouter yoki 404.html
• O'z domen: A yozuvlar (185.199.108–111.153) + Custom domain + Enforce HTTPS
• .nojekyll — Jekyll ni o'chirish
• Server kodi yo'q — faqat statik

Keyingi dars

41-dars: GitHub Releases — versiya chiqarish, changelog