ChatGPT થી વેબસાઇટ કેવી રીતે બનાવવી: કામ કરતી ત્રણ રીત

ChatGPT થી વેબસાઇટ બનાવવા માટે, તમે તેને સાઇટનો HTML અને CSS લખવાનું કહી શકો છો અને પછી તે ફાઇલો જાતે હોસ્ટિંગ સેવા પર મૂકી શકો છો; અથવા તેનો ઉપયોગ વેબસાઇટ બિલ્ડરમાં બનાવતા પહેલાં પેજ પ્લાન કરવા અને કોપી લખવા માટે કરી શકો છો; અથવા ChatGPT ની અંદર Mythex જેવું AI બિલ્ડર જોડી શકો છો, જેથી એ જ ચેટમાંથી સાઇટ બને, હોસ્ટ થાય અને પ્રકાશિત થાય. પહેલી રીત મફત છે અને એક પેજની સાઇટ માટે સારી છે; ત્રીજી રીત ત્યારે જોઈએ જ્યારે સાઇટમાં ડેટા સાચવતા ફોર્મ, લોગિન, અથવા નિયમિત અપડેટ્સની જરૂર હોય. આ ગાઇડ દરેક રીત પ્રોમ્પ્ટ સાથે બતાવે છે, અને ક્યાં દરેક રીત અટકે છે તે સ્પષ્ટ કરે છે.

ChatGPT જાતે શું કરી શકે અને શું નહીં

ChatGPT લખાણમાં ખૂબ સારું છે: કોડ, હેડલાઇન, પેજનું લખાણ અને પ્લાન. બોક્સની બહાર તે હોસ્ટિંગ કંપની નથી. તે તમારી સાઇટને જાહેર સરનામું આપતું નથી, ડેટાબેઝ ચલાવતું નથી, અને બિલ્ડરની જેમ પ્રોજેક્ટ વચ્ચે સાઇટની ફાઇલો સાચવતું નથી. નીચેની દરેક રીત આ ખાલી જગ્યાનો અલગ જવાબ છે.

રીત 1: ChatGPT કોડ લખે, તમે હોસ્ટ કરો

આ ક્લાસિક રીત છે અને સાદી, સ્ટેટિક સાઇટ માટે સારી ચાલે છે: પોર્ટફોલિયો, લેન્ડિંગ પેજ, લગ્નનું પેજ.

પગલું 1: એક સંપૂર્ણ, સિંગલ-ફાઇલ પેજ માંગો

કન્ટેન્ટ અને લેઆઉટ વિશે ચોક્કસ રહો:

એક સંપૂર્ણ સિંગલ-પેજ વેબસાઇટ લખો, જે એક HTML ફાઇલ હોય અને CSS style ટેગની અંદર હોય. તે અમ્માનની ફ્રીલાન્સ ઇલસ્ટ્રેટર માયા હદ્દાદ માટે છે. વિભાગો: તેના નામ અને "પુસ્તકો અને બ્રાન્ડ્સ માટે ઇલસ્ટ્રેશન" સાથેનો હેડર, છ પોર્ટફોલિયો ઇમેજનું ગ્રિડ (હું બદલી શકું તેવા પ્લેસહોલ્ડર ઇમેજ પાથ વાપરો), ટૂંકો about પેરાગ્રાફ, ત્રણ સેવાઓની યાદી શરૂઆતની કિંમત સાથે, અને તેના ઇમેઇલ સાથેનો mailto લિંક ધરાવતો contact વિભાગ. સ્વચ્છ, આધુનિક, પુષ્કળ સફેદ જગ્યા, ફોન પર કામ કરે. કોઈ JavaScript framework નહીં.

એક ફાઇલ માંગવાથી સાચવવું અને અપલોડ કરવું સરળ રહે છે.

પગલું 2: સાચવો અને ખોલો

કોડ ટેક્સ્ટ એડિટરમાં કોપી કરો, તેને index.html તરીકે સાચવો, અને બ્રાઉઝરમાં ખોલો. કંઈ ખોટું લાગે તો ChatGPT ને વર્ણવો: "ડેસ્કટોપ પર ઇમેજ ગ્રિડ એક કૉલમમાં છે; 900px થી પહોળાઈ ઉપર તેને ત્રણ કૉલમ કરો."

પગલું 3: પ્લેસહોલ્ડર બદલો

પ્લેસહોલ્ડર ઇમેજને તમારી ઇમેજથી બદલો અને ChatGPT એ બનાવેલું કોઈપણ લખાણ બદલો. કિંમતો, ઇમેઇલ અને નામ ધ્યાનથી તપાસો; AI ખાલી જગ્યા આત્મવિશ્વાસથી ભરે છે.

પગલું 4: ઓનલાઇન મૂકો

ફાઇલ GitHub Pages જેવી મફત સ્ટેટિક હોસ્ટ પર, અથવા તમે પહેલેથી ચૂકવો છો તે કોઈ વેબ હોસ્ટ પર અપલોડ કરો. તમને જાહેર સરનામું મળશે. તમારું પોતાનું ડોમેન વાપરવા માટે, તમારા હોસ્ટની સૂચનાઓ અનુસરો; અમારી કસ્ટમ ડોમેન જોડવા વિશેની ગાઇડ DNS ભાગ સમજાવે છે.

રીત 1 ક્યાં અટકે છે

• ડેટા સાચવતા ફોર્મ. કોન્ટેક્ટ ફોર્મને સબમિશન મોકલવા માટે કોઈ જગ્યા જોઈએ. તમારે ફોર્મ સેવા અથવા સર્વરની જરૂર પડશે.
• લોગિન અને મેમ્બર્સ વિસ્તાર. આને બેકએન્ડ અને ડેટાબેઝ જોઈએ.
• ઘણાં પેજ. દસ હાથથી પેસ્ટ કરેલી ફાઇલોમાં હેડર અને મેનૂ એકસરખા રાખવા કંટાળાજનક બને છે.
• અપડેટ્સ. દરેક ફેરફાર માટે નવો કોડ માંગવો, પેસ્ટ કરવો અને ફરી અપલોડ કરવો પડે છે.

રીત 2: ChatGPT પ્લાન કરે, બિલ્ડર બનાવે

અહીં ChatGPT વિચારવાનું અને લખવાનું કામ કરે છે, અને વેબસાઇટ બિલ્ડર બનાવવાનું અને હોસ્ટિંગનું કામ કરે છે.

પગલું 1: ChatGPT સાથે સાઇટ પ્લાન કરો

હું માન્ચેસ્ટરમાં એક નાનો પારિવારિક બેકરી ચલાવું છું જે કેકના ઓર્ડર લે છે. મારી વેબસાઇટને કયા પેજ જોઈએ, દરેક પેજ શું કહે, અને દરેક પેજ પર મુલાકાતી પાસેથી હું કઈ એક ક્રિયા ઇચ્છું છું તે સૂચવો. પાંચ કે તેથી ઓછા પેજ રાખો.

પગલું 2: કોપી લખો

દરેક પેજનું લખાણ માંગો, પછી તેને તમારા પોતાના અવાજમાં ફરીથી લખો. ChatGPT ને ન ખબર હોય તેવી વાસ્તવિક વિગતો ઉમેરો: ખુલવાનો સમય, કિંમતો, ડિલિવરી વિસ્તારો, તમારી કેક બીજાથી શું અલગ બનાવે છે.

પગલું 3: બિલ્ડરમાં બનાવો

પ્લાન અને કોપી વેબસાઇટ બિલ્ડરમાં પેસ્ટ કરો. ડ્રેગ-એન્ડ-ડ્રોપ ટૂલમાં તમે લખાણને ટેમ્પલેટમાં મૂકો છો. AI બિલ્ડરમાં તમે આખો પ્લાન એક મેસેજમાં આપી શકો છો અને તે પેજ બનાવે છે; દાખલા તરીકે, Mythex વેબસાઇટ બિલ્ડર માં:

આ પ્લાન અને કોપી વાપરીને માન્ચેસ્ટરમાં એક પારિવારિક બેકરી માટે વેબસાઇટ બનાવો: [અહીં પેસ્ટ કરો]. એક ઓર્ડર વિનંતી ફોર્મ ઉમેરો જે દરેક વિનંતી સાચવે (નામ, ફોન, કેકનો પ્રકાર, જોઈતી તારીખ, સંદેશ), જેથી હું ફક્ત મારા જ લોગિનથી ખૂલતા એડમિન પેજ પર તે જોઈ શકું. ગરમ, ઘરેલું ડિઝાઇન, ફોન પર કામ કરે.

અહીંનું ઓર્ડર ફોર્મ એક સાચા ડેટાબેઝમાં સાચવે છે, જે પેસ્ટ કરેલી HTML ફાઇલ કરી શકતી નથી. આ રીત વિશે વધુ માટે, AI સાથે વેબસાઇટ કેવી રીતે બનાવવી જુઓ.

રીત 3: ChatGPT ની અંદરથી બનાવો અને પ્રકાશિત કરો

સૌથી નવો વિકલ્પ એ છે કે બિલ્ડરને ChatGPT સાથે જોડો, જેથી ChatGPT સીધા બિલ્ડરના ટૂલ્સ વાપરી શકે. તમે ChatGPT ની વાતચીતમાં જ રહો છો; પ્રોજેક્ટ, પ્રિવ્યૂ, ડેટાબેઝ અને હોસ્ટિંગ બિલ્ડર પૂરા પાડે છે.

Mythex આ રીતે તેની ChatGPT એપ (MCP connector) દ્વારા કામ કરે છે. તમે Mythex માં Account settings માંથી તેને જોડો છો; જોડાણ કોઈપણ પ્લાન પર કામ કરે છે, અને તમારા પ્રોજેક્ટનું sandbox ચલાવતા ટૂલ્સ માટે Pro જરૂરી છે. એકવાર જોડાયા પછી, તમે ChatGPT ને કંઈક આ રીતે કહી શકો છો:

Mythex વાપરીને મારી બેકરી માટે નવી વેબસાઇટ બનાવો, જેમાં હોમ પેજ, કેક અને કિંમતો સાથેનું મેનુ પેજ, અને ડેટાબેઝમાં સાચવતું ઓર્ડર વિનંતી ફોર્મ હોય. મને પ્રિવ્યૂ બતાવો, અને મારી મંજૂરી પછી પ્રકાશિત કરો.

પછી ChatGPT પ્રોજેક્ટ બનાવે છે, કોડ લખે છે, તેને ચલાવે છે, અને તમે મંજૂરી આપો ત્યારે જાહેર URL પર પ્રકાશિત કરે છે. ફેરફારો એ જ ચેટમાં વધુ મેસેજ તરીકે થાય છે. આ જ connector અભિગમ Claude, Cursor અને Codex થી પણ કામ કરે છે. આ કેવી રીતે કામ કરે છે અને કયા બિલ્ડર તેને સપોર્ટ કરે છે તેની માહિતી માટે, MCP સાથે AI એપ બિલ્ડર્સ જુઓ.

તમારે કઈ રીત પસંદ કરવી?

બધી રીત માટે પ્રોમ્પ્ટ ટિપ્સ

• શરૂઆતમાં સાચી હકીકતો આપો. નામ, સ્થળ, સેવાઓ, કિંમતો, સંપર્ક વિગતો. ઓછી શોધેલી વિગતોનો અર્થ ઓછી સફાઈ.
• મુલાકાતી અને લક્ષ્ય વર્ણવો. "જન્મદિવસ માટે કેક શોધતા માતા-પિતા, જેઓ અંતે ઓર્ડર વિનંતી મોકલે."
• ફોન-પ્રથમ લેઆઉટ માંગો. મોટાભાગના મુલાકાતીઓ ફોન વાપરે છે.
• પહેલું વર્ઝન બન્યા પછી એક સમયે એક જ ફેરફાર કરો.
• SEO ની મૂળભૂત બાબતો સ્પષ્ટપણે માંગો: દરેક પેજ માટે અનોખું શીર્ષક અને વર્ણન, સાચા હેડિંગ્સ, ઇમેજ પર alt text. જુઓ AI-બનાવેલી વેબસાઇટ્સ માટે SEO.

AI એપ બિલ્ડર્સ માટે પ્રોમ્પ્ટ લખવા વિશેની અમારી ગાઇડમાં વધુ પેટર્ન છે.

સામાન્ય સમસ્યાઓ અને ઉકેલ

• ડિઝાઇન સામાન્ય લાગે. એક ઉદાહરણ આપો: "શાંત સ્કેન્ડિનેવિયન કેફે જેવું, ઘણો સફેદ રંગ અને એક શાંત લીલો રંગ".
• કોડ અધૂરો કપાઈ ગયો. ChatGPT ને છેલ્લી લાઇનથી ચાલુ રાખવાનું કહો, અથવા પેજને વિભાગોમાં વહેંચીને એક સમયે એક આપવાનું કહો.
• તેણે બનાવટી પ્રશંસાપત્રો કે આંકડા ઉમેર્યા. તે કાઢી નાખો. બનાવટી સમીક્ષાઓ વિશ્વાસ તોડે છે, અને ઘણા સ્થળોએ તે ગ્રાહક સુરક્ષાના નિયમો વિરુદ્ધ છે.
• ફેરફાર પછી સાઇટ તૂટે. નવો કોડ પેસ્ટ કરતાં પહેલાં છેલ્લા કામ કરતા વર્ઝનની નકલ રાખો. Mythex જેવા બિલ્ડર્સ રોલબેક માટે ચેકપોઇન્ટ રાખે છે.

પ્રકાશિત કરતાં પહેલાં

દરેક પેજનો દરેક શબ્દ વાંચો. ખાતરી કરો કે સંપર્ક વિગતો કામ કરે છે. ફોન પર સાઇટ ખોલો. ખાતરી કરો કે બધી ઇમેજ તમારી છે અથવા યોગ્ય લાઇસન્સવાળી છે. પછી પ્રકાશિત કરો, અને જ્યાં તમારા મુલાકાતીઓ પહેલેથી છે ત્યાં શેર કરો. જો આખી વસ્તુ કંઈ ખર્ચ્યા વિના જોઈતી હોય, તો મફતમાં વેબસાઇટ કેવી રીતે બનાવવી મફત હોસ્ટિંગ વિકલ્પો વિગતે સમજાવે છે.

પ્રશ્નો