अपनी HTML वेबसाइट को इंटरनेट पर कैसे डालें — एक सम्पूर्ण हिंदी गाइड
GitHub Pages से लेकर Custom Domain और HTTPS तक — बिल्कुल शुरुआत से सीखें, आसान भाषा में
क्या आपने कभी HTML और CSS से एक सुंदर वेबसाइट बनाई है, लेकिन वो केवल आपके अपने कंप्यूटर पर ही दिखती है? दुनिया को वो वेबसाइट कभी नहीं दिख पाती, क्योंकि वो अभी तक इंटरनेट पर नहीं है। यह एक बहुत सामान्य समस्या है जो हर नए वेब डेवलपर के सामने आती है।
इस लेख में हम सीखेंगे कि अपनी HTML और CSS से बनी वेबसाइट को इंटरनेट पर कैसे डाला जाए, ताकि दुनिया में कोई भी उसे अपने ब्राउज़र में खोल सके। साथ ही हम यह भी सीखेंगे कि एक कस्टम डोमेन नाम (जैसे meriwebsite.com) कैसे खरीदें और उसे अपनी वेबसाइट से कैसे जोड़ें।
“जब तक आपकी वेबसाइट केवल आपके कंप्यूटर पर है, वो सिर्फ एक फाइल है — इंटरनेट पर डालने के बाद वो एक असली वेबसाइट बन जाती है।”
भाग १: समस्या को समझें
जब हम HTML और CSS फाइलें अपने कंप्यूटर पर बनाते हैं, तो हम उन्हें ब्राउज़र में खोलकर देख सकते हैं। लेकिन यह वेबसाइट केवल हमारे कंप्यूटर तक ही सीमित रहती है। दूसरे लोग उसे नहीं देख सकते।
दूसरों को हमारी वेबसाइट दिखाने के लिए हमें उसे इंटरनेट पर होस्ट करना होगा। इंटरनेट पर वेबसाइट डालने के कई तरीके हैं, लेकिन शुरुआती लोगों के लिए सबसे बेहतर और आसान तरीका है — GitHub Pages।
GitHub Pages एक मुफ्त सेवा है जो GitHub कंपनी देती है। इसके ज़रिये आप अपनी HTML/CSS वेबसाइट बिना किसी खर्च के इंटरनेट पर लाइव कर सकते हैं। यह शुरुआती लोगों के लिए एकदम सही है और Best Practices को भी फॉलो करती है।
भाग २: GitHub Pages से वेबसाइट लाइव करें
अब हम step-by-step GitHub Pages का उपयोग करके अपनी वेबसाइट को इंटरनेट पर डालेंगे। इस प्रक्रिया के लिए आपको बस एक GitHub अकाउंट और अपनी HTML/CSS फाइलें चाहिए।
GitHub अकाउंट बनाएं या Login करें
अपने ब्राउज़र में github.com खोलें। अगर अकाउंट नहीं है तो नया बनाएं, अगर है तो Login करें।
नया Repository बनाएं
ऊपर दाहिने कोने में अपनी profile icon पर क्लिक करें → “Your Repositories” → “New” बटन दबाएं। Repository का नाम दें (जैसे meri-website) और उसे Public रखें।
Repository को Public रखना ज़रूरी है
GitHub Pages की मुफ्त सेवा केवल Public Repositories के लिए उपलब्ध है। Private repository के लिए पैसे देने होंगे। इसलिए “Public” विकल्प ज़रूर चुनें।
अपनी Website Files Upload करें
Repository बनने के बाद “Upload files” या “Upload an existing file” पर क्लिक करें। अपने कंप्यूटर से सभी HTML, CSS और Image फाइलें drag करके यहाँ छोड़ें।
सावधानी: Folder नहीं, Files Upload करें
एक महत्वपूर्ण बात — पूरा folder drag न करें। पहले folder खोलें, फिर उसके अंदर की सभी files को select करके drag करें। इससे अनावश्यक sub-folder नहीं बनेगा।
Commit Changes करें
Files upload होने के बाद नीचे स्क्रॉल करें और “Commit Changes” बटन दबाएं। इससे आपकी सभी files repository में save हो जाएंगी।
GitHub Pages Enable करें
Repository की Settings में जाएं → बाईं तरफ “Pages” tab खोलें → Branch dropdown में “main” (या “master”) चुनें → Save करें।
कुछ मिनट इंतज़ार करें
GitHub Pages आपकी website को publish करने में 2-3 मिनट लेता है। थोड़ी देर बाद page refresh करें। आपको एक URL मिलेगा जैसे: yourusername.github.io/repository-name
index.html का महत्व
जब आप GitHub Pages का URL खोलते हैं और कोई file का नाम नहीं लिखते, तो browser स्वयं index.html नाम की file ढूंढता है। यह एक universal convention है — यानी अगर आपकी main HTML file का नाम index.html है, तो सिर्फ domain name टाइप करने पर वो automatically खुलेगी।
अगर आपकी main file का नाम index.html नहीं है (जैसे youtube.html), तो URL में file का नाम लिखना पड़ेगा। बेहतर यही है कि अपनी main file का नाम rename करके index.html कर दें — इससे आपका URL साफ और आसान रहेगा।
भाग ३: इंटरनेट कैसे काम करता है — तकनीकी समझ
Domain और DNS समझने से पहले, यह जानना ज़रूरी है कि जब आप ब्राउज़र में कोई URL टाइप करते हैं तो पर्दे के पीछे क्या होता है।
Web Server
यह एक software होता है जो किसी computer पर चलता है और browser की requests का जवाब देता है। GitHub भी अपने computers पर web server चलाता है।
Host (होस्ट)
वो computer जिस पर web server चलता है, उसे “host” कहते हैं। Web Hosting companies आपको ऐसे computers किराये पर देती हैं।
IP Address
इंटरनेट पर हर device का एक unique address होता है — जैसे phone number होता है। इससे devices एक-दूसरे को पहचानती हैं और communicate करती हैं।
DNS Record
Domain Name को IP Address से जोड़ने वाला रिकॉर्ड। यही वो “फोन बुक” है जो browser को बताता है कि किस domain का कौन सा IP है।
सरल शब्दों में: जब आप meriwebsite.com टाइप करते हैं, तो आपका browser DNS system से पूछता है — “इस domain का IP address क्या है?” DNS उत्तर देता है, और browser उस IP पर जाकर files माँगता है। GitHub का web server वो files देता है और आपकी website स्क्रीन पर दिखती है।
भाग ४: Custom Domain Name कैसे लें
GitHub Pages आपको एक default URL देता है जैसे username.github.io/repo-name। लेकिन एक professional website के लिए आपको एक custom domain चाहिए जैसे meriwebsite.com। इससे लोगों के लिए आपकी site याद रखना और access करना आसान हो जाता है।
Domain Registrar क्या होता है?
Domain Registrar वो कंपनियाँ होती हैं जो domain names बेचती हैं। ये companies internet authority (ICANN) द्वारा certified होती हैं। Domain names मुफ्त नहीं होते — एक .com domain आमतौर पर ₹800 से ₹1,200 प्रति वर्ष (10-15 USD/year) में मिलता है।
यदि आप अपने नाम का domain लेना चाहते हैं जैसे rahulsharma.com, तो इसे job search के लिए बहुत काम आता है। अगर वो available नहीं है, तो .net extension try करें या नाम के आगे “dev”, “pro” जैसा शब्द जोड़ें। Domain name हमेशा छोटा, सरल और याद रखने योग्य रखें।
एक लोकप्रिय Domain Registrar है Namecheap — यह सस्ता, आसान और भरोसेमंद माना जाता है। इसके अलावा GoDaddy, Google Domains (अब Squarespace), और Hostinger भी अच्छे विकल्प हैं।
Domain खरीदने के Steps
Namecheap पर जाएं
Namecheap.com खोलें और “Domains” section में अपनी पसंद का domain search करें।
Cart में Add करें
पसंद का domain available हो तो “Add to Cart” करें। Domain Privacy (WhoisGuard) ज़रूर enable रखें — इससे spammers आपका personal info नहीं देख पाएंगे।
Account बनाएं और Checkout करें
Namecheap पर account बनाएं, payment करें और domain register करें। अब domain आपका है!
भाग ५: DNS Records से Domain को GitHub Pages से जोड़ें
Domain खरीदने के बाद उसे GitHub Pages से link करना होगा ताकि जब कोई आपका domain type करे, तो उसे आपकी GitHub-hosted website दिखे। इसके लिए DNS Records बनाने होंगे।
DNS Record के प्रकार
| Record Type | उपयोग | उदाहरण |
|---|---|---|
| A Record | Domain को IP Address से जोड़ता है | meriwebsite.com → 185.199.108.153 |
| CNAME Record | Domain को दूसरे Domain से जोड़ता है | www.meriwebsite.com → username.github.io |
| TTL (Time to Live) | यह बताता है कि DNS change कितनी जल्दी update होगा | 5 मिनट = 300 seconds |
Step-by-Step DNS Setup
GitHub Pages के IP Addresses ढूंढें
किसी DNS Lookup tool पर जाएं और username.github.io search करें। आपको 4 IP Addresses दिखेंगे — ये GitHub Pages के servers के addresses हैं।
A Records बनाएं
Namecheap के “Advanced DNS” section में जाएं। हर IP Address के लिए एक A Record बनाएं — Type: A, Host: @ (blank), Value: IP Address, TTL: 5 min (300)।
CNAME Record बनाएं (www के लिए)
एक CNAME Record बनाएं — Type: CNAME, Host: www, Value: username.github.io, TTL: 5 min। यह www.meriwebsite.com को काम करने देगा।
GitHub Repository में Domain Add करें
GitHub Repository → Settings → Pages → “Custom Domain” section में अपना domain type करें (जैसे meriwebsite.com) और Save करें।
इंतज़ार करें
DNS records पूरी दुनिया में propagate होने में 24-48 घंटे तक लग सकते हैं। धैर्य रखें — यह normal है।
Base domain (जैसे meriwebsite.com) के लिए हमेशा A Record बनाएं जो IP address से link हो। CNAME record केवल subdomain (जैसे www) के साथ काम करता है। Base domain पर CNAME record नहीं बन सकता — यह एक technical limitation है।
भाग ६: HTTPS — अपनी Website को Secure बनाएं
जब आपका domain काम करने लगे, तो browser में आपको URL के पास “Not Secure” लिखा दिखेगा। इसका मतलब है HTTPS अभी active नहीं है।
HTTPS (HyperText Transfer Protocol Secure) एक security layer है जो आपके browser और website के बीच data को encrypt करती है। इससे कोई बाहरी व्यक्ति आपका data नहीं पढ़ सकता। आज के समय में HTTPS होना बेहद ज़रूरी है।
Repository → Settings → Pages में जाएं। थोड़ा नीचे scroll करें। “Enforce HTTPS” का एक checkbox दिखेगा। उसे enable करने से पहले GitHub को कुछ समय लग सकता है certificate process करने में। थोड़ी देर बाद page refresh करें और checkbox enable कर दें। बस इतना काफी है!
HTTPS enable होने के बाद, जब आप browser में https://meriwebsite.com टाइप करेंगे, तो URL के पास एक 🔒 Lock icon दिखेगा — यानी आपकी website पूरी तरह secure हो गई।
भाग ७: पूरी प्रक्रिया का सारांश
चलिए एक बार पूरी journey को दोहराते हैं — HTML file से लेकर एक live, secure, custom domain वाली website तक:
🎯 Complete Roadmap
- HTML और CSS से website बनाएं — अपने computer पर locally
- GitHub.com पर account बनाएं और नई Public Repository बनाएं
- सभी website files को repository में upload करें (folder नहीं, सिर्फ files)
- Main file का नाम
index.htmlरखें ताकि URL clean रहे - Settings → Pages में जाकर “main” branch select करें और Save करें
- 2-3 मिनट बाद आपको
username.github.io/repo-nameजैसा live URL मिलेगा - Domain Registrar (Namecheap आदि) से custom domain खरीदें
- DNS Lookup tool से GitHub Pages के IP Addresses ढूंढें
- Domain registrar में A Records और CNAME Record बनाएं
- GitHub Pages settings में custom domain enter करें
- 24-48 घंटे इंतज़ार करें DNS propagate होने के लिए
- GitHub Pages settings में “Enforce HTTPS” checkbox enable करें
- बधाई हो! आपकी website live है — secure, professional और पूरी दुनिया के लिए accessible
भाग ८: अभ्यास के लिए कुछ Exercises
इस पूरी प्रक्रिया को सीखने के बाद, इन exercises को करके अपनी समझ पक्की करें:
Exercise 1: अपना Portfolio बनाएं
एक simple HTML page बनाएं जिसमें आपका नाम, skills और contact info हो। उसे GitHub Pages पर deploy करें।
Exercise 2: IPv6 Records जोड़ें
हमने IPv4 A Records बनाए। अब GitHub के IPv6 (AAAA) records भी DNS में add करें — यह भविष्य के लिए बेहतर है।
Exercise 3: Website Update करें
GitHub repository में कुछ files change करें, नई files add करें, और देखें कि website automatically update होती है या नहीं।
निष्कर्ष
HTML और CSS सीखना पहला कदम है — लेकिन असली संतुष्टि तब मिलती है जब आपकी website पूरी दुनिया देख सके। GitHub Pages ने इस प्रक्रिया को बेहद आसान और मुफ्त बना दिया है। ऊपर बताए गए steps follow करके आप कुछ ही घंटों में अपनी website live कर सकते हैं।
Custom Domain लेने से आपकी website और भी professional लगती है — खासकर अगर आप jobs के लिए apply कर रहे हों या freelancing करना चाहते हों। और HTTPS enable करना अब एक ज़रूरत है, न कि विकल्प।
“Web development में सीखना कभी नहीं रुकता — लेकिन हर बड़ी journey की शुरुआत एक छोटे HTML file से होती है।”
अगला कदम? JavaScript सीखें और अपनी websites को और भी interactive बनाएं। HTML + CSS + JavaScript — यही modern web development की नींव है।
Discover more from AI Tech Guru
Subscribe to get the latest posts sent to your email.
