2026 में मुफ्त में Static Website कैसे होस्ट करें: GitHub Pages, Cloudflare Pages और Contact Forms

सही स्टैटिक वेबसाइट होस्टिंग प्लेटफॉर्म चुनने से आप हर साल सैकड़ों डॉलर बचा सकते हैं - और साथ ही आपकी साइट तेज, सुरक्षित और मेंटेन करने में आसान रहती है। 2026 में, फ्री tier के विकल्प काफी परिपक्व हो चुके हैं, और GitHub Pages तथा Cloudflare Pages जैसे प्लेटफॉर्म बिना किसी लागत के production-ready infrastructure देते हैं। लेकिन एक चुनौती है जिसे ज़्यादातर गाइड्स नज़रअंदाज़ कर देती हैं: जब कोई server नहीं है तो स्टैटिक साइट पर contact form कैसे काम करें? यह गाइड आपको पूरा setup process समझाएगी - प्लेटफॉर्म चुनने से लेकर काम करने वाला contact form लगाने तक, ठोस उदाहरणों के साथ और उन असली सीमाओं के बारे में भी जो किसी प्लेटफॉर्म पर commit करने से पहले आपको जाननी चाहिए।

फ्री स्टैटिक होस्टिंग क्यों है फायदेमंद

एक स्टैटिक वेबसाइट पहले से बने HTML, CSS और JavaScript files को सीधे browser को serve करती है। इसमें कोई PHP नहीं, कोई Node.js runtime नहीं, और हर page load पर कोई database query नहीं। यही सादगी फ्री स्टैटिक पेज होस्टिंग को इतना भरोसेमंद बनाती है: crash होने, patch करने या scale करने के लिए कुछ है ही नहीं।

छोटे व्यवसायों, portfolios, SaaS landing pages और documentation साइटों के लिए स्टैटिक होस्टिंग हर पहलू में खरी उतरती है:

• गति: Files को CDN edge node से serve किया जाता है, अक्सर वैश्विक स्तर पर 100ms से कम में।
• सुरक्षा: कोई server-side runtime न होने से attack surface बेहद कम हो जाता है।
• लागत: GitHub Pages और Cloudflare Pages दोनों public और कई private projects के लिए मुफ्त हैं।
• सरलता: repository में code push करें, और साइट अपने आप deploy हो जाती है।

एकमात्र असली सीमा है dynamic functionality। जो भी चीज़ server-side logic मांगती है - जैसे user authentication, shopping cart, या form processing - उसके लिए किसी external service की ज़रूरत होती है। setup steps के दौरान इसे ध्यान में रखें।

प्लेटफॉर्म तुलना: GitHub Pages बनाम Cloudflare Pages

सारांश: अगर आपके users वैश्विक हैं और आप सबसे तेज load time चाहते हैं, तो Cloudflare Pages बेहतर है। अगर आपकी टीम पहले से GitHub पर काम करती है और सबसे सरल setup चाहिए, तो GitHub Pages बिल्कुल ठीक है।

चरण-दर-चरण: GitHub Pages पर deploy करें

यह उदाहरण मानता है कि आपके पास publish के लिए तैयार एक साधारण HTML/CSS साइट है। अगर आप Hugo या Jekyll जैसा static site generator इस्तेमाल कर रहे हैं, तो प्रक्रिया लगभग एक जैसी ही है।

1. GitHub repository बनाएं। github.com/new पर जाएं और एक public repository बनाएं। अगर आप इसे root domain पर serve करना चाहते हैं तो इसका नाम your-username.github.io रखें, या किसी subdirectory path के लिए कोई भी नाम दें।
2. अपनी साइट files push करें। अपने local project folder से यह command चलाएं:
   कॉपी करें

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. GitHub Pages चालू करें। Repository में Settings > Pages पर जाएं। "Source" के अंतर्गत main branch और /root folder चुनें (या /docs अगर आपका build output वहाँ जाता है)। Save पर क्लिक करें।
4. deployment का इंतज़ार करें। GitHub 1-3 मिनट में build और deploy कर देगा। Pages सेटिंग्स पैनल में live URL (जैसे https://your-username.github.io) दिखाई देगा।
5. Custom domain जोड़ें (वैकल्पिक)। अपनी repository root में एक CNAME file जोड़ें जिसमें आपका domain name हो (जैसे www.yoursite.com)। फिर अपने DNS provider पर your-username.github.io की तरफ CNAME record point करें। GitHub कुछ ही मिनटों में SSL certificate स्वचालित रूप से जारी कर देगा।

चरण-दर-चरण: Cloudflare Pages पर deploy करें

1. Cloudflare पर साइन अप करें या लॉग इन करें। pages.cloudflare.com पर जाएं और अपना GitHub या GitLab अकाउंट कनेक्ट करें।
2. नया project बनाएं। "Create a project" पर क्लिक करें, फिर "Connect to Git" पर। सूची से अपनी repository चुनें।
3. Build सेटिंग्स configure करें। अगर आपकी साइट plain HTML है, तो build command खाली छोड़ें और output directory को / या जहाँ आपकी index.html है वहाँ सेट करें। Hugo के लिए build command hugo और output public रखें। Jekyll के लिए jekyll build और output _site रखें।
4. Deploy करें। "Save and Deploy" पर क्लिक करें। Cloudflare आपकी repository clone करेगा, build चलाएगा, और अपने global edge network पर publish करेगा। आपकी साइट को तुरंत एक *.pages.dev subdomain मिल जाएगा।
5. Custom domain जोड़ें। अपने project डैशबोर्ड में "Custom domains" पर जाएं और अपना domain दर्ज करें। अगर आपका domain पहले से Cloudflare DNS पर है, तो setup एक क्लिक में हो जाएगा। अगर नहीं, तो आपको अपने registrar पर अपने *.pages.dev address की तरफ CNAME record जोड़ना होगा।

आपके main branch पर हर बाद का git push स्वचालित रूप से redeploy trigger करेगा। Cloudflare pull requests के लिए preview deployments भी बनाता है, जो live होने से पहले बदलावों की समीक्षा के लिए बहुत उपयोगी है।

स्टैटिक साइट में contact form कैसे जोड़ें

यहीं पर ज़्यादातर गाइड रुक जाती हैं, और यहीं पर लोग अटक जाते हैं। स्टैटिक वेबसाइट पर contact form खुद data submit नहीं कर सकता - कोई server सुन नहीं रहा। आपके पास तीन व्यावहारिक विकल्प हैं:

• Form backend service (अनुशंसित): आप अपने form के action attribute को किसी third-party endpoint पर point करते हैं जो submission receive करता है, उसे validate करता है, और आपको email करता है।
• Serverless function: आप एक छोटा function (Cloudflare Workers, AWS Lambda) लिखते हैं जो form process करता है। यह काम करता है लेकिन इसके लिए code और ongoing maintenance चाहिए।
• JavaScript fetch(): आप browser के fetch API का उपयोग करके form data को किसी backend endpoint पर post करते हैं। तकनीकी विवरण के लिए हमारी गाइड देखें: JavaScript fetch() से HTML form data कैसे भेजें।

काम करने वाला form सबसे जल्दी बनाने का तरीका है एक dedicated form service। यहाँ Sendform का उपयोग करके एक ठोस उदाहरण है:

व्यावहारिक उदाहरण: 5 मिनट में काम करने वाला contact form

मान लीजिए आपके पास GitHub Pages पर deploy की गई एक portfolio साइट है। आप चाहते हैं कि visitors आपको संदेश भेज सकें, और वे संदेश आपके inbox में पहुंचें। यहाँ पूरा HTML है:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">आपका नाम</label>
  <input type="text" id="name" name="name" required>

  <label for="email">आपका ईमेल</label>
  <input type="email" id="email" name="email" required>

  <label for="message">संदेश</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">संदेश भेजें</button>
</form>

बस इतना ही integration है। YOUR_FORM_ID को अपने Sendform डैशबोर्ड के ID से बदलें, और हर submission आपके registered email पर भेज दी जाएगी। कोई backend code नहीं, कोई server नहीं, कोई मासिक infrastructure बिल नहीं। submission के बाद redirect pages और confirmation emails जैसे advanced UX patterns के लिए, हमारी गाइड पढ़ें: स्टैटिक वेबसाइट forms के best practices।

अगर आप अपनी स्टैटिक साइट के साथ किसी website builder का भी उपयोग कर रहे हैं, तो हमने integration प्रक्रिया को विस्तार से इस लेख में कवर किया है: Sendform को अपने website builder के साथ कैसे integrate करें।

इन गलतियों से बचें

हज़ारों users को फ्री स्टैटिक वेब होस्टिंग setup करने में मदद करने के बाद, ये वो गलतियाँ हैं जो सबसे ज़्यादा परेशानी का कारण बनती हैं:

1. 404 पेज भूल जाना

अगर कोई route नहीं मिला तो GitHub Pages और Cloudflare Pages दोनों एक generic error page दिखाएंगे। अपनी root directory में एक custom 404.html file बनाएं। इससे users आपकी साइट पर बने रहते हैं और आपका brand experience सुरक्षित रहता है।

2. Public repository में secrets commit करना

API keys, form endpoint secrets और email addresses कभी भी किसी public GitHub repository में नहीं होने चाहिए। Cloudflare Pages में environment variables का उपयोग करें, या किसी private configuration file को reference करें जो .gitignore में listed हो।

3. Backend plan के बिना form बनाना

यह सबसे आम गलती है। Developers एक सुंदर contact form बनाते हैं, GitHub Pages पर push करते हैं, और launch के दिन पता चलता है कि form चुपचाप fail हो रहा है। कोई भी <input> tag लिखने से पहले अपना form backend तय करें। Sendform जैसे tools आपको बिना किसी code के ऐसा contact form setup करने देते हैं जो सीधे email पर submissions भेजता है, जिससे backend की समस्या पूरी तरह खत्म हो जाती है।

4. Build cache की समस्या को नज़रअंदाज़ करना

अगर push के बाद आपकी साइट अपडेट नहीं हो रही, तो CDN cache पुरानी files serve कर रहा हो सकता है। Cloudflare Pages deployment पर अपना cache स्वचालित रूप से purge करता है। GitHub Pages में बदलाव propagate होने में अधिक समय लगता है; 10 मिनट तक प्रतीक्षा करें, या testing के दौरान अपने asset URLs में query string जोड़ें।

5. Relative paths का गलत उपयोग

अगर आपकी GitHub Pages साइट username.github.io/project-name/ (एक subdirectory) पर है, तो सभी asset paths में वह prefix होना चाहिए। /styles.css का link टूट जाएगा। Relative paths (./styles.css) का उपयोग करें या अपने static site generator की baseURL सेटिंग को subdirectory से match करने के लिए configure करें।

6. Form workflow automation को छोड़ना

एक बार जब आपका form submissions collect करने लगे, तो आप सिर्फ emails receive करने से बहुत आगे जा सकते हैं। Sendform webhooks और integrations support करता है जो आपको submissions को Slack, किसी CRM, या spreadsheet पर स्वचालित रूप से route करने देता है। हमारी गाइड webhooks और APIs से form workflows को automate करना आपको बिना backend code लिखे यह सब setup करना सिखाती है।

निष्कर्ष

फ्री स्टैटिक वेबसाइट होस्टिंग आज पहले से कहीं ज़्यादा सक्षम है। GitHub Pages उन टीमों के लिए उपयुक्त है जो GitHub ecosystem में काम करती हैं, जबकि Cloudflare Pages बेहतर global performance और अधिक उदार फ्री tier देता है। असली चुनौती hosting नहीं है - बल्कि dynamic features हैं, खासकर contact forms, जो लोगों को अटका देते हैं। किसी भी प्लेटफॉर्म को एक dedicated form service के साथ जोड़कर, आप बिना किसी infrastructure लागत के पूरी तरह functional, professional वेबसाइट पा सकते हैं। ऊपर दी गई platform guides में से किसी एक से शुरू करें, अपनी साइट live करें, और फिर पहले दिन से submissions को भरोसेमंद तरीके से handle करने के लिए Sendform के ज़रिए अपना contact form जोड़ें।

मिनटों में अपनी स्टैटिक साइट में contact form जोड़ें

GitHub Pages या Cloudflare Pages पर hosted किसी भी स्टैटिक साइट से form submissions collect करने के लिए Sendform का उपयोग करें। कोई backend code नहीं, कोई server setup नहीं, कोई झंझट नहीं। बस अपने form के action attribute को अपने endpoint पर point करें और काम हो गया।

Sendform.net पर मुफ्त शुरू करें ->

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