GitHub Pages: मुफ़्त वेबसाइट होस्टिंग, चरण-दर-चरण कैसे प्रकाशित करें

GitHub Pages क्या है

GitHub Pages GitHub में बनी मुफ़्त स्टैटिक वेबसाइट होस्टिंग है। वेबसाइट की फ़ाइलें एक सामान्य Git repository में रहती हैं, और GitHub उन्हें HTTPS पर सीधे भेजता है। जिस branch में आप git push करते हैं, वहाँ का हर बदलाव साइट को अपडेट कर देता है, इसलिए अलग FTP, होस्टिंग पैनल या हाथ से फ़ाइलें चढ़ाने की ज़रूरत नहीं।

हिंदी खोज में इस सेवा को "गिटहब पेजेस", "github pages kya hai" या "github hosting" जैसे अलग-अलग नामों से ढूँढा जाता है। सही नाम GitHub Pages है: यह GitHub की सुविधा है, Git की नहीं। Git खुद कुछ प्रकाशित नहीं करता, वह केवल बदलावों का इतिहास रखता है।

GitHub Pages पर आमतौर पर प्रोजेक्ट के दस्तावेज़, निजी पेज और portfolio, blogs, landing pages, सीखने के प्रोजेक्ट, और React, Vue या Svelte से build किए गए frontend demos रखे जाते हैं।

Git pages स्टैटिक होस्टिंग है

मुख्य शब्द स्टैटिक है। GitHub Pages browser को तैयार फ़ाइलें देता है: HTML, CSS, JavaScript, images, fonts, JSON। वह server पर कोड नहीं चलाता: PHP, Python या Node.js का server-side code और डेटाबेस यहाँ नहीं चलते। अगर साइट को registration, cart या डेटाबेस वाले admin panel की ज़रूरत है, तो सामान्य होस्टिंग या cloud platform चाहिए।

फिर भी browser में JavaScript सामान्य रूप से चलता है। Single-page application बाहरी APIs से बात कर सकता है, forms तीसरे पक्ष की सेवा से भेजे जा सकते हैं, और साइट के अंदर खोज browser में हो सकती है।

GitHub Pages की साइट के प्रकार

GitHub Pages की तीन तरह की साइटें हैं, और उनका पता प्रकार पर निर्भर है।

एक खाते पर उपयोगकर्ता या संगठन की साइट एक ही हो सकती है, जबकि प्रोजेक्ट साइटें जितनी चाहें, हर repository के लिए एक। निजी साइट की repository का नाम आपके GitHub login से हूबहू मेल खाना चाहिए: अगर login ivan-petrov है, तो repository का नाम ivan-petrov.github.io होगा।

सार्वजनिक repositories के लिए Pages मुफ़्त plan में मिलता है। निजी repository से साइट प्रकाशित करने के लिए GitHub का सशुल्क plan चाहिए; फिर भी प्रकाशित साइट इंटरनेट पर सबको दिखती है।

GitHub Pages पर साइट चरण-दर-चरण कैसे प्रकाशित करें

सबसे सरल रास्ता: तैयार HTML फ़ाइलें और branch से प्रकाशन। आपको GitHub खाता और इंस्टॉल किया हुआ Git चाहिए।

चरण 1. 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 नहीं चलेगा।

चरण 2. फ़ाइलें GitHub पर भेजें

git add index.html
git commit -m "साइट का पहला पेज"
git push origin main

अगर पहली बार push पर Git login और पासवर्ड माँगे, तो personal access token या browser से लॉगिन का उपयोग करें: HTTPS पर git push के लिए खाते का सामान्य पासवर्ड स्वीकार नहीं होता।

चरण 3. Settings में Pages चालू करें

Repository खोलें, Settings में जाएँ और बाईं मेन्यू से Pages चुनें। Build and deployment भाग में Source के लिए Deploy from a branch चुनें। नीचे branch (आमतौर पर main) और फ़ोल्डर चुनें: जड़ / (root) या /docs। Save दबाएँ।

/docs फ़ोल्डर तब सुविधाजनक है, जब repository में प्रोजेक्ट का code हो और दस्तावेज़ वाली साइट उसी के साथ अलग फ़ोल्डर में रहे।

चरण 4. प्रकाशन का इंतज़ार करें

प्रकाशन में कुछ सेकंड से कुछ मिनट लगते हैं; GitHub बताता है कि पहली बार 10 मिनट तक लग सकते हैं। 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 templates सुझाएगा।

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 इंस्टॉल करता है, project build करता है और dist की सामग्री प्रकाशित करता है। इसका फ़ायदा यह है कि repository में केवल source code रहता है, और build की फ़ाइलें commit इतिहास को नहीं भरतीं।

प्रोजेक्ट साइटों की आम समस्या paths की है। साइट /repository-name/ पते पर खुलती है, पर builder के डिफ़ॉल्ट लिंक / से शुरू होते हैं। नतीजा: पेज बिना styles और scripts के लोड होता है। हल है base path सेट करना: Vite में base: '/repository-name/', और दूसरे builders में उनका समान विकल्प।

Jekyll और स्टैटिक generators

Branch से प्रकाशन में GitHub डिफ़ॉल्ट रूप से फ़ाइलों को Jekyll से गुज़ारता है, जो Ruby पर बना स्टैटिक साइट generator है। इसलिए आप pages Markdown में लिख सकते हैं, themes और templates जोड़ सकते हैं, और GitHub उन्हें HTML में बदल देता है। Blog या दस्तावेज़ के लिए यह सुविधाजनक है: आप .md फ़ाइलें लिखते हैं, और design theme संभालती है।

इसका एक असर: Jekyll उन फ़ाइलों और फ़ोल्डरों को छोड़ देता है जिनका नाम underscore (_) से शुरू होता है, जैसे _next या _assets। अगर साइट किसी दूसरे tool से बनी है और ऐसे फ़ोल्डर चाहिए, तो जड़ में खाली .nojekyll फ़ाइल रखें:

touch .nojekyll
git add .nojekyll
git commit -m "Jekyll बंद करें"
git push

Hugo, Astro, Eleventy, MkDocs और Docusaurus जैसे दूसरे generators GitHub Actions के जरिए चलते हैं: workflow में build, फिर तैयार फ़ोल्डर का प्रकाशन। GitHub Pages इन generators के बारे में कुछ नहीं जानता; उसे केवल अंतिम फ़ाइलें चाहिए।

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 सुझाता है कि आप अपना domain खाते की सेटिंग (profile settings में Pages भाग) में 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 दोबारा जारी होता है। यह भी जाँचें कि साइट images या scripts को http:// से तो नहीं ला रही: browser ऐसी सामग्री को mixed content मानकर रोक देता है।

GitHub Pages की सीमाएँ

होस्टिंग मुफ़्त है, पर उसकी सीमाएँ हैं। वे GitHub के दस्तावेज़ में लिखी हैं, और अधिकांश निजी और सीखने वाली साइटों के लिए वे पर्याप्त हैं।

तकनीकी सीमाओं के अलावा उपयोग के नियम भी हैं: GitHub Pages ऑनलाइन दुकानों और SaaS जैसी व्यावसायिक सेवाओं के लिए नहीं है, और न ही बड़ी फ़ाइलें बाँटने के लिए। Portfolio, दस्तावेज़, blog और प्रोजेक्ट landing page के लिए यह ठीक है।

एक और सीमा: server की सेटिंग नहीं होती। अपने redirects, response headers या .htaccess जैसे नियम यहाँ नहीं लग सकते। बस जड़ में 404.html रखी जा सकती है, जो गायब पतों पर दिखाई जाती है।

आम समस्याएँ और उनके हल

GitHub Pages पर 404 त्रुटि

सबसे आम कारण: उस फ़ोल्डर में index.html नहीं है जिसे Source में चुना गया है। जाँचें कि सही branch और फ़ोल्डर (/ (root) या /docs) चुना है, और फ़ाइल का नाम ठीक index.html (छोटे अक्षरों में) है। दूसरा कारण: साइट अभी प्रकाशित नहीं हुई। Actions टैब देखें और build पूरा होने का इंतज़ार करें।

अगर single-page application के अंदरूनी पेजों पर refresh करते ही 404 आए, तो समस्या routing की है: server /about नहीं जानता, क्योंकि ऐसी फ़ाइल नहीं है। हल: hash routing (/#/about), या index.html की एक कॉपी 404.html नाम से रखना।

साइट अपडेट नहीं होती

पहले पक्का करें कि बदलाव वाकई GitHub पर पहुँचे: git status और git log origin/main --oneline -3 चलाएँ। फिर Actions टैब खोलें: अगर build गिर गया, तो लाल निशान और error log मिलेगा, जैसे Jekyll फ़ाइल में syntax error या workflow में गलती।

Build सफल हो और browser में पुरानी साइट दिखे, तो दोषी cache है: GitHub Pages कुछ मिनट तक फ़ाइलें cache करता है, और browser भी। Cache साफ़ करके पेज रीलोड करें (Ctrl+F5 या Cmd+Shift+R), या private window में खोलें।

Styles और images लोड नहीं होते

लगभग हमेशा गलत paths होते हैं। प्रोजेक्ट साइट पर /style.css लिंक username.github.io की जड़ में जाता है, repository फ़ोल्डर में नहीं। Relative paths (style.css, ./img/logo.png) इस्तेमाल करें, या builder में base path सेट करें। नामों के अक्षर भी जाँचें: GitHub के सर्वर Logo.PNG और logo.png को अलग मानते हैं, भले ही Windows पर स्थानीय रूप से सब चल रहा हो।

Underscore वाले फ़ोल्डर गायब हैं

यह 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 और स्वचालन इस कोर्स में व्यवहार में सिखाए गए हैं।