शिप करें: आपकी स्क्रीन से दुनिया तक
शिप करें: आपकी स्क्रीन से दुनिया तक
एक कड़वा सच: जो पेज सिर्फ़ आपके कंप्यूटर पर मौजूद है, वह शिप नहीं हुआ। उसे न कोई देख सकता है, न कोई इस्तेमाल कर सकता है, और न ही कोई आपको बता सकता है कि वह कमाल का है। शिप करने का मतलब एक ही चीज़ है — एक URL जिसे दुनिया में कोई भी खोल सके। यही वह लकीर है जो "मैं कोडिंग सीख रहा हूँ" को "मैंने कुछ बनाया है" से अलग करती है।
अच्छी ख़बर? URL पाना अब सबसे आसान हिस्सा है। फ़्री सर्विसेज़ इसे सेकंडों में कर देती हैं:
- Netlify Drop — साइट खोलें, अपनी HTML फ़ाइल पेज पर खींचकर छोड़ें, लाइव URL पाएँ। बस, यही पूरी प्रक्रिया है।
- Vercel — कोई फ़ोल्डर या GitHub repo कनेक्ट करें, deploy पर क्लिक करें, हो गया। (यह अकादमी भी इसी पर चलती है।)
और अगर कभी अटक जाएँ? आप vibe coder हैं — AI से पूछिए। "Walk me through deploying this HTML file to Netlify, step by step" बढ़िया काम करता है। Deployment कभी कोडिंग का डरावना हिस्सा हुआ करता था। अब यह बस एक बातचीत है।
पर उस फ़ाइल को कहीं खींचकर छोड़ने से पहले, चलने वाले पेज और लॉन्च के लिए तैयार पेज के बीच का फ़र्क़ समझ लें। असली साइटों में प्रोफ़ेशनल टच होते हैं: ब्राउज़र टैब में एक ढंग का टाइटल, एक description जो सर्च इंजन और लिंक प्रीव्यू दिखा सकें, social टैग्स ताकि कोई आपका लिंक WhatsApp या X पर शेयर करे तो वह अच्छा दिखे, और एक footer जो कहे "इसे एक असली इंसान ने बनाया है — लीजिए, शेयर कीजिए"। इस आख़िरी पाठ में आप मॉड्यूल 4 वाले अपने आइडिया बोर्ड को ठीक यही टच देंगे।
आपके रास्ते में आगे क्या है
यह Vibe Coding Fundamentals का आख़िरी पाठ है — पर ज़ीरो से हीरो पाथ का पहला कदम। यहाँ से आप ब्राउज़र में Claude Code से मिलेंगे (एक AI जो बातचीत से पूरे प्रोजेक्ट बनाता है), फिर अपनी मशीन पर असली टूल इंस्टॉल करेंगे, और आख़िरकार अपना खुद का AI एजेंट बनाएँगे। अब आप जानते हैं कि वेब कैसे बनता है। समय है इसका और बहुत कुछ बनाने का।
चलिए, शिप करते हैं।
निर्देश
अपने पेज को एक असली <title> दें — "Untitled" की जगह ब्राउज़र टैब के लायक़ कोई नाम रखें। सर्च इंजन और बुकमार्क सबसे पहले यही दिखाते हैं।
संकेत: <head> में `<title>Untitled</title>` ढूँढें और उसे `<title>Idea Board — Never Lose a Spark</title>` जैसे किसी नाम में बदलें। कम से कम कुछ अक्षर — इसे अपना बनाएँ।
<head> में एक <meta name="description"> टैग जोड़ें — एक वाक्य जो सर्च इंजनों (और उत्सुक इंसानों) को बताए कि आपका ऐप क्या करता है।
Open Graph टैग्स जोड़ें — <meta property="og:title"> और <meta property="og:description">। ये तय करते हैं कि WhatsApp, X या LinkedIn पर शेयर होने पर आपका लिंक कैसा दिखेगा।
कार्ड के सबसे नीचे एक <footer> जोड़ें जिसमें "Built with vibes" क्रेडिट और एक <a id="share-link"> हो — हर शिप किया हुआ प्रोडक्ट अपने काम पर दस्तख़त करता है।
आपका कोड
इस स्टेप के लिए आप जो बनाना चाहते हैं उसे बताएं और मैं कोड लिख दूंगा — फिर इसे अपने एडिटर में डालने के लिए Apply पर क्लिक करें। यह स्टेप: अपने पेज को एक असली <title> दें — "Untitled" की जगह ब्राउज़र टैब के लायक़ कोई नाम रखें। सर्च इंजन और बुकमार्क सबसे पहले यही दिखाते हैं।