01यो टेम्प्लेट छान्ने टूलभन्दा कसरी फरक छ
टेम्प्लेट ग्यालरीहरूले तयार डिजाइन देखाउँछन् र मन पर्छ कि पर्दैन भनेर सोध्छन्। यो टूल एक तह गहिरो जान्छ: तलका छवटै दिशा वास्तविक, चलिरहेको फोटोग्राफर पोर्टफोलियोमा आधारित छन्, जसलाई साँच्चै जाँचिएको थियो (स्क्रिनशट, लाइभ लेआउट, गणना गरिएका रंग, गणना गरिएका फन्ट), स्वाच (swatch) मा राम्रो देखिन कसैले बनाएको प्यालेट होइन। उदाहरणका लागि, 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 बढावा पनि। सम्पर्क फाराम साँच्चै तपाईंले हेर्ने इमेल ठेगानामा जोडिएको छ कि छैन भनेर दोहोर्याएर जाँच्ने ठाउँ पनि यही हो।
निःशुल्क होस्टमा डिप्लोय गर्नुहोस्
तपाईंले “Static & free” तह रोज्नुभएको छ भने, माथिको मेनुको Hosting पेजमा भएका होस्टहरूमध्ये एउटासँग प्रोजेक्टको फोल्डर वा GitHub रिपो जोड्ने तरिका AI एपलाई देखाउन लगाउनुहोस्। चारवटैले हरेक पटक परिवर्तन पुस गर्दा स्वचालित रूपमा बिल्ड र डिप्लोय गर्छन्; जोडिसकेपछि म्यानुअल अपलोडको चरण हुँदैन।
कस्टम डोमेन जोड्नुहोस् (ऐच्छिक, तर लायक)
निःशुल्क सबडोमेन (जस्तै yourname.netlify.app) सुरुमा ठीकै काम गर्छ। yourname.com का लागि तयार हुँदा, यो एउटा डोमेन खरिद र एउटा DNS परिवर्तन हो, जसबारे तल विस्तृत रूपमा बताइएको छ।
04कुन निःशुल्क होस्ट प्रयोग गर्ने?
यीमध्ये जुनसुकैले स्टेटिक साइटलाई कुनै लागत नलागी लाइभ गराउँछ, निःशुल्क HTTPS र व्यक्तिगत पोर्टफोलियोको ट्राफिक सजिलै थेग्ने निःशुल्क तहसहित। निःशुल्क तहका सीमा बारम्बार बदलिन्छन्, त्यसैले Hosting पेजका संख्यालाई हालको ठ्याक्कै आँकडा नमानी सामान्य रूपरेखा मान्नुहोस्, र प्रतिबद्ध हुनुअघि हरेक प्रदायकको आफ्नै मूल्य पेज जाँच्नुहोस्।
वास्तविक डिप्लोय चरणहरू आफ्नो AI कोडिङ एपसँगै गर्न भन्नुहोस्: “यो प्रोजेक्टलाई Netlify सँग जोड” भन्नु पूरै सामान्य कुरा हो, र यसले प्रायः खाता बनाउने र पहिलो डिप्लोय दुई मिनेटमा गराउन सक्छ।
05कस्टम डोमेन जोड्दै
डोमेन होस्टिङभन्दा अलग सानो वार्षिक शुल्क हो (एक्सटेन्सन अनुसार सामान्यतया वर्षमा $10 देखि 20), र होस्टिङ निःशुल्कै रहन्छ। तीन भाग:
- डोमेन किन्नुहोस्। Namecheap, Cloudflare Registrar, वा Google Domains को उत्तराधिकारी (Squarespace Domains)।
- DNS रेकर्ड थप्नुहोस्। तपाईंको डोमेनलाई होस्टतिर देखाउने CNAME (वा A रेकर्ड), रजिस्ट्रारको ड्यासबोर्डमा थपिने। यो रजिस्ट्रारको तालिकामा दुई लाइन हो: होस्टले दिने ठेगाना, जस्तै
your-portfolio.netlify.app, तिर देखाउनेwwwका लागिCNAME, र होस्टको IP तिर देखाउने खाली डोमेनका लागिAरेकर्ड। - होस्टमा थप्नुहोस्। उही डोमेन आफ्नो होस्टको “custom domain” सेटिङमा पेस्ट गर्नुहोस्; HTTPS आफैँ तयार हुन्छ।
Hosting पेजका हरेक होस्टमा “Custom domain” वा “Domains” ट्याब हुन्छ जसले थप्नुपर्ने ठ्याक्कै रेकर्ड दिन्छ: त्यसलाई कपी गर्नुहोस्, आफ्नो रजिस्ट्रारमा थप्नुहोस्, र पर्खनुहोस्। DNS परिवर्तन प्रभावकारी हुन सामान्यतया केही मिनेटदेखि केही घन्टा लाग्छ, कहिलेकाहीँ 24 देखि 48 घन्टासम्म। अड्किनुभयो भने तपाईंको AI कोडिङ एपले तपाईंको खास रजिस्ट्रारको ड्यासबोर्डमा कहाँ थिच्ने भनेर बताउन सक्छ; सेटिङ पेजको स्क्रिनशट लिएर के थिच्ने भनेर सोध्नुहोस्। प्याडलक देखिँदा, “not secure” चेतावनी नआउँदा: त्यही अन्तिम रेखा हो।
06लन्च अघिको चेकलिस्ट
यो सूचीसँग पाँच मिनेट बिताउँदा पोर्टफोलियोलाई अधुरो देखाउने धेरैजसो कुरा पत्ता लाग्छ। जाँचहरू माथिको मेनुको Before launch पेज हुन्; अघि बढ्दै टिक लगाउनुहोस्।
07बारम्बार सोधिने प्रश्नहरू
पर्दैन। तपाईं दृश्य छनोट गर्नुहुन्छ, टूलले सरल अंग्रेजीमा विस्तृत प्रम्प्ट लेख्छ, र तपाईंको AI कोडिङ एपले त्यसलाई वास्तविक साइटमा बदल्छ।
हरेक दिशा सिधै जाँचिएको वास्तविक, चलिरहेको फोटोग्राफर पोर्टफोलियोमा आधारित छ, सुरुबाटै कल्पना गरिएको होइन, वास्तविक साइटबाट ठ्याक्कै फन्ट मिलाउनेसम्म।
खाता चाहिँदैन, साइनअप चाहिँदैन, तिर्नुपर्दैन। प्लेब्याक इन्डेक्समा तपाईंले हालेका फोटो तपाईंको ब्राउजरभित्रै क्यानभासमा कोरिन्छन् र त्यहाँबाट बाहिर जाँदैनन्।
अप्टिमाइज गरेर JPG वा WEBP मा एक्सपोर्ट गरिएका तपाईंका 8 देखि 20 वटा उत्कृष्ट तस्बिर, छोटो परिचय, र छ भने लोगो। पर्खाल मुनिको टिप्पणीमा यो सूचीबद्ध छ।