GitHub Pages पर अपनी पोर्टफोलियो वेबसाइट मुफ़्त होस्ट करें: कोडिंग स्टूडेंट्स के लिए प्रैक्टिकल गाइड

लोकलहोस्ट से लाइव सर्वर तक: स्टूडेंट्स के लिए पोर्टफोलियो क्यों ज़रूरी है?

जब आप कोडिंग या वेब डेवलपमेंट सीखना शुरू करते हैं, तो अक्सर आपके प्रोजेक्ट्स कंप्यूटर की हार्ड ड्राइव या 'localhost:3000' तक ही सीमित रह जाते हैं। लेकिन अगर आप किसी इंटर्नशिप, कॉलेज प्रोजेक्ट प्रेजेंटेशन या जॉब इंटरव्यू के लिए अप्लाई कर रहे हैं, तो अपने कोड को सिर्फ लोकल मशीन पर रखना काफी नहीं होता। रिक्रूटर्स और प्रोफेसर्स आपकी स्किल्स को लाइव देखना पसंद करते हैं।

GitHub Pages कोडिंग सीख रहे स्टूडेंट्स के लिए एक ऐसा बेहतरीन टूल है, जिसकी मदद से आप अपनी HTML, CSS और JavaScript आधारित वेबसाइट्स को बिल्कुल मुफ़्त में इंटरनेट पर लाइव कर सकते हैं। इसके लिए आपको किसी पेड वेब होस्टिंग या डोमेन खरीदने की ज़रूरत नहीं पड़ती। इस ट्यूटोरियल में हम सीखेंगे कि कैसे आप 10 मिनट के अंदर अपना पहला वेब डेवलपमेंट पोर्टफोलियो लाइव होस्ट कर सकते हैं और उसका लिंक अपने रिज्यूमे में शेयर कर सकते हैं।

पोर्टफोलियो होस्ट करने के लिए ज़रूरी चीज़ें (Prerequisites)

इस गाइड को फॉलो करने से पहले आपके पास नीचे दी गई चीज़ें तैयार होनी चाहिए:

• GitHub अकाउंट: अगर आपका अकाउंट नहीं है, तो github.com पर जाकर मुफ़्त में साइन-अप करें।
• बेसिक HTML/CSS फाइल्स: एक साधारण पोर्टफोलियो प्रोजेक्ट जिसमें कम से कम एक index.html फाइल हो।
• Git इंस्टॉल होना (ऐच्छिक): आपके कंप्यूटर में Git कमांड लाइन या Git Desktop होना चाहिए। अगर आप कमांड लाइन इस्तेमाल नहीं करना चाहते, तो GitHub की वेबसाइट से सीधे फाइल अपलोड का विकल्प भी मौजूद है।

स्टेप 1: प्रोजेक्ट फ़ोल्डर की सही स्ट्रक्चरिंग करें

GitHub Pages पर अपनी वेबसाइट को सही तरीके से रेंडर करने के लिए फाइल स्ट्रक्चर का सही होना बहुत ज़रूरी है। सबसे पहली और मुख्य फाइल का नाम हमेशा छोटे अक्षरों में index.html होना चाहिए।

यदि आप कैपिटल वर्णों का उपयोग करके Index.html या Main.html लिखते हैं, तो वेब सर्वर आपकी होम पेज फाइल को पहचान नहीं पाएगा और आपकी वेबसाइट पर 404 Error दिखाई देगा। अपने प्रोजेक्ट फ़ोल्डर को इस तरह व्यवस्थित करें:

• my-portfolio/ (मुख्य फ़ोल्डर)
• ├── index.html (मेन होम पेज)
• ├── style.css (स्टाइलिंग फाइल्स)
• ├── script.js (इंटरएक्टिव कोड)
• └── images/ (इमेजेस का फ़ोल्डर)

स्टेप 2: GitHub पर नया रिपॉजिटरी (Repository) बनाएं

अपनी लोकल फाइल्स को इंटरनेट पर ले जाने के लिए GitHub में एक रिपॉजिटरी बनानी होती है। इसके लिए इन स्टेप्स का पालन करें:

1. GitHub में लॉगिन करें

अपने क्रेडेशियल्स के साथ लॉगिन करें और टॉप-राइट कॉर्नर में दिख रहे '+' आइकॉन पर क्लिक करके 'New repository' चुनें।

2. Repository नेम दर्ज करें

रिपॉजिटरी का नाम अपनी पसंद के अनुसार रखें, जैसे student-portfolio या my-first-website। ध्यान रखें कि नाम में स्पेस न हो, स्पेस की जगह हाइफन (-) का उपयोग करें।

3. Visibility को Public रखें

GitHub Pages मुफ़्त अकाउंट पर सिर्फ Public रिपॉजिटरी को ही लाइव होस्ट करने की अनुमति देता है। इसलिए 'Public' ऑप्शन सेलेक्ट करें।

4. Add a README file पर टिक करें

यह आपकी रिपॉजिटरी में एक प्राइमरी डॉक्यूमेंट जोड़ता है। इसके बाद 'Create repository' बटन पर क्लिक करें।

स्टेप 3: अपनी कोड फाइल्स को GitHub पर अपलोड करें

कोड अपलोड करने के दो तरीके हैं: पहला वेब ब्राउज़र का आसान तरीका और दूसरा Git CLI Command Line। बिगिनर्स के लिए हम वेब अपलोड का तरीका बता रहे हैं:

1. अपनी बनी हुई रिपॉजिटरी में जाएं और Add file ड्रॉपडाउन पर क्लिक करें।
2. Upload files विकल्प को चुनें।
3. अपने कंप्यूटर से index.html, style.css और इमेजेस फ़ोल्डर को ड्रैग एंड ड्रॉप करें।
4. नीचे दिए गए 'Commit changes' सेक्शन में एक छोटा मैसेज लिखें, जैसे "Initial commit for portfolio website"।
5. Commit changes पर क्लिक करके फाइल्स सेव कर दें।

स्टेप 4: GitHub Pages फीचर को एक्टिवेट करें

फाइल्स अपलोड होने के बाद अब आपकी रिपॉजिटरी को लाइव वेबसाइट में बदलने का समय है:

1. अपनी रिपॉजिटरी के टॉप नेविगेशन बार से Settings टैब में जाएं।
2. लेफ्ट साइडबार में 'Code and automation' सेक्शन के तहत Pages पर क्लिक करें।
3. Build and deployment सेक्शन में 'Source' के अंदर Deploy from a branch चुनें।
4. 'Branch' ड्रॉपडाउन में main या master ब्रांच चुनें और फ़ोल्डर को /(root) पर सेट करें।
5. Save बटन पर क्लिक करें।

स्टेप 5: लाइव लिंक एक्सेस और वेरीफाई करें

सेटिंग्स सेव करने के बाद GitHub सर्वर आपकी फाइल्स को बिल्ड और डिप्लॉय करने में 1 से 3 मिनट का समय लेता है।

पेज को रिफ्रेश करने पर आपको सबसे ऊपर एक मैसेज दिखेगा: "Your site is live at https://username.github.io/repository-name/"। इस लिंक पर क्लिक करके आप अपनी लाइव वेबसाइट देख सकते हैं और इसे दुनिया में किसी भी व्यक्ति के साथ शेयर कर सकते हैं।

कोडिंग सीख रहे स्टूडेंट्स के लिए 4 प्रैक्टिकल यूज़ केसेज

1. ऑनलाइन रिज्यूमे और पोर्टफोलियो

अपनी प्रोफाइल, एजुकेशन, स्किल्स और लिंक्डइन/गिटहब लिंक्स को एक सुंदर वेब पेज पर बनाकर लाइव होस्ट करें। रिज्यूमे में PDF अटैच करने के साथ-साथ यह लाइव लिंक जोड़ने से जॉब एप्लीकेशन का असर काफी बढ़ जाता है।

2. कॉलेज मिनी और मेजर प्रोजेक्ट्स डिप्लॉयमेंट

यदि आप कंप्यूटर साइंस या आईटी के स्टूडेंट हैं, तो अपने वेब प्रोजेक्ट्स (जैसे कैलकुलेटर, टू-डू लिस्ट ऐप, लैंडिंग पेज) को GitHub Pages पर होस्ट करके सीधे अपने फैकल्टी या एक्सटर्नल एग्जामिनर को लिंक भेज सकते हैं।

3. ओपन सोर्स कंट्रीब्यूशन और डॉक्यूमेंटेशन

अगर आपने कोई यूज़फुल कोड या लाइब्रेरी बनाई है, तो उसका यूज़र गाइड या डॉक्यूमेंटेशन पेज GitHub Pages की मदद से बहुत आसानी से पब्लिश किया जा सकता है।

4. कोडिंग क्लब या कॉलेज इवेंट्स के लिए लैंडिंग पेज

कॉलेज के हैकथॉन, टेक-फेस्ट या कोडिंग क्लब्स के इवेंट रजिस्ट्रेशन फॉर्म और डिटेल्स के लिए आप बिना किसी खर्च के लाइव सिंगल-पेज वेबसाइट तैयार कर सकते हैं।

स्टूडेंट्स द्वारा की जाने वाली 4 आम गलतियां और उनके समाधान

1. 404 Page Not Found Error

यह सबसे कॉमन प्रॉब्लम है। इसका मुख्य कारण आपकी होम फाइल का नाम सही न होना है। सुनिश्चित करें कि मुख्य फाइल का नाम index.html ही हो (lowercase में)।

2. इमेज न दिखना (Broken Image Paths)

लोकल कंप्यूटर पर `C:\Users\Desktop\image.png` जैसे एब्सोल्यूट पाथ काम करते हैं, लेकिन सर्वर पर यह एरर देते हैं। हमेशा रिलेटिव पाथ इस्तेमाल करें, जैसे `./images/profile.jpg` या `images/profile.jpg`।

3. फाइल केस-सेंसिटिविटी (Case Sensitivity)

विंडोज ऑपरेटिंग सिस्टम फाइल नामों के छोटे-बड़े अक्षरों (Case) में फर्क नहीं करता, लेकिन GitHub Pages (Linux सर्वर) करता है। अगर आपकी फाइल का नाम `script.JS` है और कोड में आपने `script.js` लिखा है, तो कोड काम नहीं करेगा।

4. चेंजेस तुरंत न दिखना (Browser Caching)

जब आप GitHub पर नया कोड अपडेट करते हैं, तो ब्राउज़र में पुराना वर्जन दिख सकता है। इसे फिक्स करने के लिए `Ctrl + Shift + R` दबाकर हार्ड रिफ्रेश करें या कुछ मिनट का इंतज़ार करें।

FAQ: अक्सर पूछे जाने वाले सवाल

क्या GitHub Pages होस्टिंग के लिए कोई चार्ज लेता है?

नहीं, GitHub Pages सार्वजनिक रिपॉजिटरी के लिए बिल्कुल मुफ़्त है। इसमें अनलिमिटेड ट्रैफिक (उचित सीमाओं के भीतर) और फ्री SSL (HTTPS) सर्टिफिकेट मिलता है।

क्या मैं GitHub Pages के साथ अपना कस्टम डोमेन (जैसे .com या .in) जोड़ सकता हूं?

हां, आप GoDaddy या Namecheap जैसे किसी भी डोमेन प्रोवाइडर से डोमेन खरीदकर उसे अपने GitHub Pages की सेटिंग्स में CNAME रिकॉर्ड्स के ज़रिए कनेक्ट कर सकते हैं।

क्या मैं GitHub Pages पर PHP या MySQL बेस्ड डायनेमिक वेबसाइट्स चला सकता हूं?

नहीं, GitHub Pages केवल स्टैटिक वेबसाइट्स (HTML, CSS, JavaScript, React/Vue का बिल्ड वर्जन) को सपोर्ट करता है। सर्वर-साइड लैंग्वेज जैसे PHP, Python Django या Node.js बैकएंड इसमें सीधे नहीं चलते।

वेबसाइट अपडेट करने पर लाइव साइट पर बदलाव दिखने में कितना समय लगता है?

आमतौर पर जब आप कोड कमिट करते हैं, तो 1 से 2 मिनट के अंदर ऑटोमैटिक डिप्लॉयमेंट प्रोसेस पूरा हो जाता है और नई चेंजेस लाइव हो जाती हैं।