01यह टेम्पलेट चुनने वाले टूल से कैसे अलग है
टेम्पलेट गैलरियाँ आपको तैयार डिज़ाइन दिखाती हैं और पूछती हैं कि पसंद आया या नहीं। यह टूल एक परत और गहराई में जाता है: नीचे की छहों दिशाओं में से हर एक किसी असली, चालू फ़ोटोग्राफ़र पोर्टफ़ोलियो पर आधारित है जिसे सचमुच जाँचा गया (स्क्रीनशॉट, लाइव लेआउट, कंप्यूटेड रंग, कंप्यूटेड फ़ॉन्ट), ऐसा पैलेट नहीं जो किसी ने स्वैच में अच्छा दिखाने के लिए गढ़ लिया हो। मिसाल के तौर पर Editorial दिशा EB Garamond इस्तेमाल करती है, क्योंकि एक असली फ़ैशन फ़ोटोग्राफ़र की साइट सचमुच इसी टाइपफ़ेस में सेट है, जिसे पेज को सीधे जाँचकर मिलाया गया।
जिन असली साइटों से यह बना है, उन सबमें लगभग हर जगह दो पैटर्न दिखे, और वे यहाँ की हर दिशा में शामिल हैं: नेविगेशन एक अकेले हैमबर्गर आइकन के पीछे छिपा है, डेस्कटॉप पर भी, बिना किसी दिखती लिंक सूची के, और ग्रिड की जगह एक बार में एक बड़ी तस्वीर। UI में रंग पूरे समय लगभग शून्य रहता है: रंग फ़ोटोग्राफ़ी देती है, इंटरफ़ेस नहीं।
02आख़िर में आपको क्या मिलता है
एक अकेला, सुव्यवस्थित प्रॉम्प्ट जिसमें पूरी दिशा, सटीक हेक्स रंग, फ़ॉन्ट के नाम और जोड़ी, पेजों की सूची, नेविगेशन का व्यवहार, गैलरी का लेआउट और तस्वीरों की फ़्रेमिंग, कौन-से फ़ीचर शामिल हों, असली लागत के समझौतों के साथ होस्टिंग की सिफ़ारिश, और बिल्ड-क्वालिटी की तय शर्तों का एक सेट (सुलभ alt टेक्स्ट, रिस्पॉन्सिव ब्रेकपॉइंट, कोई हार्डकोड किए सीक्रेट नहीं, लेज़ी-लोड होने वाली तस्वीरें) शामिल है। इसे अपनी पसंद के AI कोडिंग ऐप में पेस्ट करें और उसके पास शुरू करने के लिए सब कुछ होता है।
03प्रॉम्प्ट से लाइव साइट तक: पूरी राह
प्रॉम्प्ट डिज़ाइन का ब्रीफ़ है, मंज़िल नहीं। इसे कॉपी करने से लेकर एक असली URL पाने तक, जिसे आप बिज़नेस कार्ड पर छपवा सकें, मुफ़्त या लगभग मुफ़्त, बीच का हर क़दम यह है।
प्रॉम्प्ट कॉपी करें और AI कोडिंग ऐप खोलें
Claude, Cursor, Claude Code, Windsurf या Replit का AI एजेंट, सब चलते हैं, कोई भी ऐसा जो आपके लिए फ़ाइलें लिख और सेव कर सके, सिर्फ़ चैट नहीं। अगर आपने कभी इस्तेमाल नहीं किया, तो claude.ai या Replit जैसा ब्राउज़र-आधारित विकल्प बिना इंस्टॉल के चलता है: प्रॉम्प्ट को अपने पहले संदेश के रूप में पेस्ट करें।
इसे बनाने दें, फिर देखें कि उसने असल में क्या बनाया
उससे कहें कि साइट को स्टैटिक HTML/CSS/JS में बनाए (या प्रॉम्प्ट के होस्टिंग वाले हिस्से में जो भी तय था) और आपको प्रीव्यू दिखाए। आगे बढ़ने से पहले उन छह चीज़ों को जाँचें जो प्रॉम्प्ट ने माँगी थीं (रंग, फ़ॉन्ट, गैलरी का व्यवहार, नेविगेशन, फ़्रेमिंग, पेज)। तस्वीरें जुड़ने के बाद के मुक़ाबले अभी ग़लत एक्सेंट रंग ठीक करना कहीं सस्ता है।
अपनी असली फ़ोटो, बायो और संपर्क जानकारी बदलें
हर प्लेसहोल्डर तस्वीर और भरावन टेक्स्ट की हर पंक्ति बदल दें। अपने AI ऐप से कहें कि हर फ़ोटो के लिए साथ-साथ एक असली, ख़ास alt एट्रिब्यूट लिखे, “image1.jpg” नहीं, बल्कि असली विवरण, क्योंकि यह एक्सेसिबिलिटी की ज़रूरत भी है और SEO में थोड़ा फ़ायदा भी। यही वह मौक़ा है जब दोबारा जाँच लें कि संपर्क फ़ॉर्म सचमुच ऐसे ईमेल पते पर जा रहा है जिसे आप देखते हैं।
मुफ़्त होस्ट पर डिप्लॉय करें
अगर आपने “स्टैटिक & मुफ़्त” टियर चुना है, तो अपने AI ऐप से कहें कि प्रोजेक्ट के फ़ोल्डर या GitHub रेपो को ऊपर के मेन्यू के होस्टिंग पेज के किसी एक होस्ट से जोड़ना समझाए। चारों हर बार बदलाव पुश करने पर अपने आप बिल्ड और डिप्लॉय करते हैं; जुड़ जाने के बाद मैन्युअल अपलोड का कोई चरण नहीं।
कस्टम डोमेन जोड़ें (वैकल्पिक, पर फ़ायदेमंद)
शुरू करने के लिए मुफ़्त सबडोमेन (जैसे yourname.netlify.app) ठीक चलता है। जब आप yourname.com के लिए तैयार हों, तो यह एक डोमेन ख़रीद और एक DNS बदलाव है, जिसे आगे विस्तार से बताया गया है।
04कौन सा मुफ़्त होस्ट इस्तेमाल करें?
इनमें से कोई भी स्टैटिक साइट को बिना किसी ख़र्च के लाइव कर देगा, मुफ़्त HTTPS और ऐसे मुफ़्त टियर के साथ जो निजी पोर्टफ़ोलियो के ट्रैफ़िक को आसानी से झेल लेता है। मुफ़्त टियर की सीमाएँ अक्सर बदलती रहती हैं, इसलिए होस्टिंग पेज की संख्याओं को मोटा अंदाज़ा मानें, मौजूदा सटीक आँकड़े नहीं, और तय करने से पहले हर प्रोवाइडर का अपना प्राइसिंग पेज देखें।
असली डिप्लॉय के चरण अपने AI कोडिंग ऐप के साथ करें: “इस प्रोजेक्ट को Netlify से जोड़ो” उससे कहने की बिल्कुल सामान्य बात है, और वह आम तौर पर अकाउंट बनाने से लेकर पहले डिप्लॉय तक दो-चार मिनट में आपको समझा देता है।
05कस्टम डोमेन जोड़ना
डोमेन का सालाना एक छोटा शुल्क होता है (एक्सटेंशन के हिसाब से आम तौर पर $10 से 20 प्रति वर्ष), जो होस्टिंग से अलग है, और होस्टिंग मुफ़्त रहती है। तीन हिस्से:
- डोमेन ख़रीदें। Namecheap, Cloudflare Registrar, या Google Domains का उत्तराधिकारी (Squarespace Domains)।
- DNS रिकॉर्ड जोड़ें। एक CNAME (या A रिकॉर्ड) जो आपके डोमेन को आपके होस्ट की ओर इशारा करे, रजिस्ट्रार के डैशबोर्ड में जोड़ा जाता है। यह रजिस्ट्रार की तालिका में दो पंक्तियाँ है:
wwwके लिए एकCNAME, जो उस पते की ओर जाए जो आपका होस्ट देता है, जैसेyour-portfolio.netlify.app, और सादे डोमेन के लिए एकAरिकॉर्ड, जो होस्ट के IP की ओर जाए। - इसे अपने होस्ट में जोड़ें। वही डोमेन अपने होस्ट की “कस्टम डोमेन” सेटिंग में पेस्ट करें; HTTPS अपने आप चालू हो जाता है।
होस्टिंग पेज के हर होस्ट में “कस्टम डोमेन” या “डोमेन” टैब होता है जो जोड़ने के लिए सटीक रिकॉर्ड देता है, उसे कॉपी करें, अपने रजिस्ट्रार पर जोड़ें, और इंतज़ार करें। DNS बदलावों को असर में आने में आम तौर पर कुछ मिनट से कुछ घंटे लगते हैं, कभी-कभी 24 से 48 घंटे तक। अगर आप अटक जाएँ तो आपका AI कोडिंग ऐप आपके रजिस्ट्रार का डैशबोर्ड समझा सकता है; सेटिंग पेज का स्क्रीनशॉट लें और पूछें कि कहाँ क्लिक करना है। पैडलॉक दिख रहा है, “not secure” की चेतावनी नहीं: यही फ़िनिश लाइन है।
06लॉन्च से पहले की चेकलिस्ट
इस सूची के साथ पाँच मिनट वह ज़्यादातर चीज़ें पकड़ लेते हैं जिनसे पोर्टफ़ोलियो अधूरा लगता है। जाँचें ऊपर के मेन्यू का Before launch पेज हैं; आगे बढ़ते हुए उन पर निशान लगाते जाइए।
07अक्सर पूछे जाने वाले सवाल
नहीं। आप दृश्य चुनाव करते हैं, टूल सादी अंग्रेज़ी में एक विस्तृत प्रॉम्प्ट लिखता है, और आपका AI कोडिंग ऐप उसे असली साइट में बदल देता है।
हर दिशा किसी असली, चालू फ़ोटोग्राफ़र पोर्टफ़ोलियो पर आधारित है जिसे सीधे जाँचा गया, शुरू से गढ़ा नहीं गया, यहाँ तक कि एक असली साइट से हूबहू फ़ॉन्ट मिलाया गया।
अकाउंट नहीं, साइनअप नहीं, कुछ चुकाना नहीं। प्लेबैक इंडेक्स पर जो फ़ोटो आप डालते हैं वे आपके ब्राउज़र में एक कैनवास पर बनती हैं और उससे बाहर नहीं जातीं।
आपकी 8 से 20 बेहतरीन तस्वीरें, ऑप्टिमाइज़्ड JPG या WEBP में एक्सपोर्ट की हुई, एक छोटी बायो, और अगर आपके पास हो तो लोगो। दीवार के नीचे की मार्जिनलिया में यह सूची है।