ChatGPT ഉപയോഗിച്ച് വെബ്സൈറ്റ് ഉണ്ടാക്കുന്നത് എങ്ങനെ: പ്രവർത്തിക്കുന്ന മൂന്ന് വഴികൾ

ChatGPT ഉപയോഗിച്ച് വെബ്സൈറ്റ് ഉണ്ടാക്കാൻ, സൈറ്റിന്റെ HTML, CSS എഴുതിക്കുകയും പിന്നെ അവ നിങ്ങൾ തന്നെ ഒരു ഹോസ്റ്റിംഗ് സേവനത്തിൽ ഇടുകയും ചെയ്യാം; അല്ലെങ്കിൽ ഒരു വെബ്സൈറ്റ് ബിൽഡറിൽ നിർമ്മിക്കുന്നതിന് മുമ്പ് പേജുകളും ടെക്സ്റ്റും ആസൂത്രണം ചെയ്യാൻ ഉപയോഗിക്കാം; അല്ലെങ്കിൽ Mythex പോലുള്ള ഒരു AI ബിൽഡർ ChatGPT-യുമായി ബന്ധിപ്പിച്ച് അതേ ചാറ്റിൽ നിന്ന് സൈറ്റ് നിർമ്മിക്കാനും ഹോസ്റ്റ് ചെയ്യാനും പ്രസിദ്ധീകരിക്കാനും ആകും. ആദ്യ വഴി സൗജന്യമാണ്, ഒറ്റ പേജുള്ള സൈറ്റിന് മതി; ഡാറ്റ സേവ് ചെയ്യുന്ന ഫോമുകളോ ലോഗിനുകളോ പതിവ് അപ്‌ഡേറ്റുകളോ സൈറ്റിന് വേണ്ടി വരുമ്പോൾ മൂന്നാമത്തേതാണ് നല്ലത്. ഓരോ രീതിയും പ്രോംപ്റ്റുകളോടെ ഈ ഗൈഡ് കാണിക്കുന്നു, ഓരോന്ന് എവിടെ നിൽക്കുന്നു എന്നും വ്യക്തമാക്കുന്നു.

ChatGPT സ്വയം എന്തൊക്കെ ചെയ്യും, ചെയ്യില്ല

ChatGPT എഴുത്തിൽ വളരെ മിടുക്കനാണ്: കോഡ്, തലക്കെട്ടുകൾ, പേജ് ടെക്സ്റ്റ്, പ്ലാനുകൾ. പെട്ടെന്ന് തന്നെ അത് ഒരു ഹോസ്റ്റിംഗ് കമ്പനിയല്ല. നിങ്ങളുടെ സൈറ്റിന് ഒരു പൊതു വിലാസം നൽകുന്നില്ല, ഡാറ്റാബേസ് പ്രവർത്തിപ്പിക്കുന്നില്ല, ബിൽഡർ ചെയ്യുന്നതുപോലെ പ്രോജക്റ്റുകൾക്കിടയിൽ സൈറ്റിന്റെ ഫയലുകൾ സൂക്ഷിക്കുന്നുമില്ല. താഴെയുള്ള ഓരോ രീതിയും ആ വിടവിനുള്ള വ്യത്യസ്ത ഉത്തരമാണ്.

രീതി 1: ChatGPT കോഡ് എഴുതുന്നു, നിങ്ങൾ ഹോസ്റ്റ് ചെയ്യുന്നു

ഇത് പരമ്പരാഗത രീതിയാണ്, ലളിതമായ സ്റ്റാറ്റിക് സൈറ്റിന് നന്നായി പ്രവർത്തിക്കുന്നു: പോർട്ട്‌ഫോളിയോ, ലാൻഡിംഗ് പേജ്, വിവാഹ പേജ്.

ഘട്ടം 1: പൂർണ്ണമായ, ഒറ്റ ഫയൽ പേജ് ആവശ്യപ്പെടുക

ഉള്ളടക്കത്തെയും ലേഔട്ടിനെയും കുറിച്ച് വ്യക്തമായിരിക്കുക:

അമ്മാനിൽ ഒരു ഫ്രീലാൻസ് ചിത്രകാരിയായ Maya Haddad-ന് വേണ്ടി ഒരു പൂർണ്ണ സിംഗിൾ-പേജ് വെബ്സൈറ്റ് ഒരു HTML ഫയലായി എഴുതുക, CSS style ടാഗിനുള്ളിൽ. വിഭാഗങ്ങൾ: അവളുടെ പേരും "Illustration for books and brands" എന്നതുമുള്ള ഹെഡർ, ആറ് പോർട്ട്‌ഫോളിയോ ചിത്രങ്ങളുടെ ഗ്രിഡ് (മാറ്റാവുന്ന placeholder ചിത്ര പാതകൾ ഉപയോഗിക്കുക), ഒരു ചെറിയ about ഖണ്ഡിക, ആരംഭ വിലകളോടെ മൂന്ന് സേവനങ്ങളുടെ പട്ടിക, അവളുടെ ഇമെയിൽ mailto ലിങ്കായുള്ള കോൺടാക്റ്റ് വിഭാഗം. വൃത്തിയുള്ളത്, ആധുനികം, ധാരാളം വെളുത്ത സ്ഥലം, ഫോണുകളിൽ പ്രവർത്തിക്കുന്നത്. JavaScript ഫ്രെയിംവർക്കുകൾ വേണ്ട.

ഒരു ഫയലായി ചോദിച്ചാൽ സേവ് ചെയ്യാനും അപ്‌ലോഡ് ചെയ്യാനും എളുപ്പം.

ഘട്ടം 2: സേവ് ചെയ്ത് തുറക്കുക

കോഡ് ഒരു ടെക്സ്റ്റ് എഡിറ്ററിൽ പകർത്തി index.html ആയി സേവ് ചെയ്ത് ബ്രൗസറിൽ തുറക്കുക. എന്തെങ്കിലും ശരിയല്ലെങ്കിൽ ChatGPT-യോട് വിവരിക്കുക: "ഡെസ്ക്ടോപ്പിൽ ചിത്ര ഗ്രിഡ് ഒരു കോളം മാത്രമാണ്; 900px-ന് മുകളിൽ മൂന്ന് കോളമാക്കുക."

ഘട്ടം 3: placeholder-കൾ മാറ്റുക

Placeholder ചിത്രങ്ങൾ നിങ്ങളുടേതാക്കുക, ChatGPT കണ്ടുപിടിച്ച ടെക്സ്റ്റ് മാറ്റുക. വിലകളും ഇമെയിലുകളും പേരുകളും ശ്രദ്ധയോടെ പരിശോധിക്കുക; AI വിടവുകൾ ആത്മവിശ്വാസത്തോടെ നിറയ്ക്കുന്നു.

ഘട്ടം 4: ഓൺലൈനിൽ ഇടുക

ഫയൽ GitHub Pages പോലുള്ള സൗജന്യ സ്റ്റാറ്റിക് ഹോസ്റ്റിലോ നിങ്ങൾ ഇതിനകം പണം നൽകുന്ന ഏതെങ്കിലും വെബ് ഹോസ്റ്റിലോ അപ്‌ലോഡ് ചെയ്യുക. ഒരു പൊതു വിലാസം കിട്ടും. സ്വന്തം ഡൊമെയ്ൻ ഉപയോഗിക്കാൻ, ഹോസ്റ്റിന്റെ നിർദ്ദേശങ്ങൾ പിന്തുടരുക; DNS ഭാഗം ഒരു custom domain ബന്ധിപ്പിക്കുന്നത് ഗൈഡ് വിശദീകരിക്കുന്നു.

രീതി 1 എവിടെ നിൽക്കുന്നു

• ഡാറ്റ സേവ് ചെയ്യുന്ന ഫോമുകൾ. കോൺടാക്റ്റ് ഫോമിന് സമർപ്പണങ്ങൾ അയക്കാൻ ഒരിടം വേണം. ഒരു ഫോം സേവനമോ ഒരു സെർവറോ വേണം.
• ലോഗിനുകളും അംഗങ്ങളുടെ ഭാഗങ്ങളും. ഇവയ്ക്ക് ഒരു ബാക്ക്‌എൻഡും ഡാറ്റാബേസും വേണം.
• പല പേജുകൾ. പത്ത് കൈകൊണ്ട് ഒട്ടിച്ച ഫയലുകളിൽ ഹെഡറും മെനുവും ഒരുപോലെ നിലനിർത്തുന്നത് മടുപ്പിക്കുന്നതാണ്.
• അപ്‌ഡേറ്റുകൾ. ഓരോ മാറ്റത്തിനും പുതിയ കോഡ് ചോദിക്കണം, ഒട്ടിക്കണം, വീണ്ടും അപ്‌ലോഡ് ചെയ്യണം.

രീതി 2: ChatGPT പ്ലാൻ ചെയ്യുന്നു, ഒരു ബിൽഡർ നിർമ്മിക്കുന്നു

ഇവിടെ ചിന്തയും എഴുത്തും ChatGPT ചെയ്യുന്നു, നിർമ്മാണവും ഹോസ്റ്റിംഗും ഒരു വെബ്സൈറ്റ് ബിൽഡർ ചെയ്യുന്നു.

ഘട്ടം 1: ChatGPT ഉപയോഗിച്ച് സൈറ്റ് പ്ലാൻ ചെയ്യുക

മാഞ്ചസ്റ്ററിൽ കേക്ക് ഓർഡറുകൾ എടുക്കുന്ന ഒരു ചെറിയ കുടുംബ ബേക്കറി ഞാൻ നടത്തുന്നു. എന്റെ വെബ്സൈറ്റിന് ആവശ്യമായ പേജുകൾ നിർദ്ദേശിക്കുക, ഓരോ പേജും എന്ത് പറയണം, ഓരോ പേജിലും സന്ദർശകർ ചെയ്യേണ്ട ഒരു പ്രവർത്തനം എന്നിവ പറയുക. അഞ്ച് പേജോ അതിൽ കുറവോ ആയി നിർത്തുക.

ഘട്ടം 2: ടെക്സ്റ്റ് എഴുതുക

ഓരോ പേജിന്റെയും ടെക്സ്റ്റ് ചോദിക്കുക, പിന്നെ അത് നിങ്ങളുടെ സ്വന്തം ശൈലിയിൽ തിരുത്തുക. ChatGPT-ക്ക് അറിയാൻ കഴിയാത്ത യഥാർത്ഥ വിശദാംശങ്ങൾ ചേർക്കുക: പ്രവർത്തന സമയം, വിലകൾ, ഡെലിവറി മേഖലകൾ, നിങ്ങളുടെ കേക്കുകളെ വ്യത്യസ്തമാക്കുന്നത്.

ഘട്ടം 3: ഒരു ബിൽഡറിൽ നിർമ്മിക്കുക

പ്ലാനും ടെക്സ്റ്റും ഒരു വെബ്സൈറ്റ് ബിൽഡറിൽ ഒട്ടിക്കുക. ഡ്രാഗ്-ആൻഡ്-ഡ്രോപ്പ് ടൂളിൽ, ടെക്സ്റ്റ് ഒരു ടെംപ്ലേറ്റിൽ വെക്കുന്നു. AI ബിൽഡറിൽ മുഴുവൻ പ്ലാനും ഒറ്റ സന്ദേശമായി നൽകാം, അത് പേജുകൾ നിർമ്മിക്കും; ഉദാഹരണത്തിന് Mythex വെബ്സൈറ്റ് ബിൽഡറിൽ:

ഈ പ്ലാനും ടെക്സ്റ്റും ഉപയോഗിച്ച് മാഞ്ചസ്റ്ററിലെ ഒരു കുടുംബ ബേക്കറിക്ക് വെബ്സൈറ്റ് നിർമ്മിക്കുക: [paste]. ഓരോ ഓർഡർ അഭ്യർത്ഥനയും സേവ് ചെയ്യുന്ന ഒരു ഓർഡർ അഭ്യർത്ഥന ഫോം ഉൾപ്പെടുത്തുക (പേര്, ഫോൺ, കേക്ക് തരം, ആവശ്യമുള്ള തീയതി, സന്ദേശം), അങ്ങനെ എനിക്ക് മാത്രം ലോഗിൻ ചെയ്യാൻ കഴിയുന്ന ഒരു അഡ്മിൻ പേജിൽ അവ കാണാം. ഊഷ്മളവും വീട്ടുപരിസരം പോലുള്ളതുമായ ഡിസൈൻ, ഫോണുകളിൽ പ്രവർത്തിക്കുന്നത്.

ഇവിടെ ഓർഡർ ഫോം ഒരു യഥാർത്ഥ ഡാറ്റാബേസിൽ സേവ് ചെയ്യുന്നു, ഒട്ടിച്ച HTML ഫയലിന് അത് സാധ്യമല്ല. ഈ വഴിയെക്കുറിച്ച് കൂടുതൽ അറിയാൻ, AI ഉപയോഗിച്ച് വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം കാണുക.

രീതി 3: ChatGPT-ക്കുള്ളിൽ നിന്ന് നിർമ്മിച്ച് പ്രസിദ്ധീകരിക്കുക

ഏറ്റവും പുതിയ ഓപ്ഷൻ ഒരു ബിൽഡർ ChatGPT-യുമായി ബന്ധിപ്പിക്കുക എന്നതാണ്, അതുവഴി ChatGPT ബിൽഡറിന്റെ ടൂളുകൾ നേരിട്ട് ഉപയോഗിക്കാം. നിങ്ങൾ ChatGPT സംഭാഷണത്തിൽ തന്നെ നിൽക്കുന്നു; പ്രോജക്റ്റ്, പ്രിവ്യൂ, ഡാറ്റാബേസ്, ഹോസ്റ്റിംഗ് എന്നിവ ബിൽഡർ നൽകുന്നു.

Mythex ഇങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്, അതിന്റെ ChatGPT ആപ്പ് (ഒരു MCP കണക്ടർ) വഴി. Mythex-ലെ Account settings-ൽ നിന്ന് നിങ്ങൾ അത് ബന്ധിപ്പിക്കുന്നു; ബന്ധിപ്പിക്കുന്നത് ഏത് പ്ലാനിലും പ്രവർത്തിക്കും, പ്രോജക്റ്റിന്റെ sandbox പ്രവർത്തിപ്പിക്കുന്ന ടൂളുകൾക്ക് Pro വേണം. ബന്ധിപ്പിച്ചു കഴിഞ്ഞാൽ, ChatGPT-യോട് ഇങ്ങനെ ചോദിക്കാം:

Mythex ഉപയോഗിച്ച് എന്റെ ബേക്കറിക്ക് ഒരു പുതിയ വെബ്സൈറ്റ് ഉണ്ടാക്കുക: ഹോം പേജ്, കേക്കുകളും വിലകളും ഉള്ള ഒരു മെനു പേജ്, ഡാറ്റാബേസിൽ സേവ് ചെയ്യുന്ന ഒരു ഓർഡർ അഭ്യർത്ഥന ഫോം. പ്രിവ്യൂ കാണിക്കുക, ശരിയെന്ന് ഞാൻ പറയുമ്പോൾ പ്രസിദ്ധീകരിക്കുക.

അപ്പോൾ ChatGPT പ്രോജക്റ്റ് സൃഷ്ടിക്കുന്നു, കോഡ് എഴുതുന്നു, പ്രവർത്തിപ്പിക്കുന്നു, നിങ്ങൾ അംഗീകരിക്കുമ്പോൾ ഒരു പൊതു URL-ൽ പ്രസിദ്ധീകരിക്കുന്നു. മാറ്റങ്ങൾ അതേ ചാറ്റിലെ കൂടുതൽ സന്ദേശങ്ങളാണ്. ഇതേ കണക്ടർ സമീപനം Claude, Cursor, Codex എന്നിവയിൽ നിന്നും പ്രവർത്തിക്കുന്നു. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു, ഏത് ബിൽഡറുകൾ ഇത് പിന്തുണയ്ക്കുന്നു എന്നതിന്, MCP ഉള്ള AI ആപ്പ് ബിൽഡറുകൾ കാണുക.

ഏത് രീതി തിരഞ്ഞെടുക്കണം?

ഏത് രീതിക്കും ബാധകമായ പ്രോംപ്റ്റിംഗ് നുറുങ്ങുകൾ

• ആദ്യം തന്നെ യഥാർത്ഥ വസ്തുതകൾ നൽകുക. പേര്, സ്ഥലം, സേവനങ്ങൾ, വിലകൾ, ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ. കുറച്ച് കണ്ടുപിടിച്ച വിശദാംശങ്ങൾ, കുറച്ച് തിരുത്തൽ ജോലി.
• സന്ദർശകനെയും ലക്ഷ്യത്തെയും വിവരിക്കുക. "ജന്മദിന കേക്ക് തേടുന്ന ഒരു രക്ഷിതാവ്, ഒടുവിൽ ഒരു ഓർഡർ അഭ്യർത്ഥന അയക്കണം."
• ഫോണിന് ആദ്യം അനുയോജ്യമായ ലേഔട്ട് ചോദിക്കുക. മിക്ക സന്ദർശകരും ഫോൺ ഉപയോഗിക്കുന്നു.
• ആദ്യ പതിപ്പ് ഉണ്ടായ ശേഷം ഒരു സന്ദേശത്തിൽ ഒരു കാര്യം മാത്രം മാറ്റുക.
• SEO അടിസ്ഥാനങ്ങൾ വ്യക്തമായി ചോദിക്കുക: ഓരോ പേജിനും സവിശേഷമായ ടൈറ്റിലും വിവരണവും, യഥാർത്ഥ ഹെഡിംഗുകൾ, ചിത്രങ്ങളിൽ alt ടെക്സ്റ്റ്. AI-നിർമ്മിത വെബ്സൈറ്റുകൾക്കുള്ള SEO കാണുക.

AI ആപ്പ് ബിൽഡറുകൾക്ക് പ്രോംപ്റ്റുകൾ എഴുതുന്നത് എങ്ങനെ എന്ന ഞങ്ങളുടെ ഗൈഡിൽ കൂടുതൽ മാതൃകകളുണ്ട്.

സാധാരണ പ്രശ്നങ്ങളും പരിഹാരങ്ങളും

• ഡിസൈൻ സാധാരണമായി തോന്നുന്നു. ഒരു റഫറൻസ് നൽകുക: "ശാന്തമായ സ്കാൻഡിനേവിയൻ കഫേ പോലെ, ധാരാളം വെളുപ്പും ഒരു മങ്ങിയ പച്ചയും."
• കോഡ് മുറിഞ്ഞുപോയി. അവസാന വരിയിൽ നിന്ന് തുടരാൻ ChatGPT-യോട് ചോദിക്കുക, അല്ലെങ്കിൽ പേജ് വിഭാഗങ്ങളായി വിഭജിച്ച് ഓരോന്നായി തരാൻ ആവശ്യപ്പെടുക.
• അത് സാക്ഷ്യപത്രങ്ങളോ കണക്കുകളോ കണ്ടുപിടിച്ചു. അവ നീക്കം ചെയ്യുക. വ്യാജ റിവ്യൂകൾ വിശ്വാസം നശിപ്പിക്കുന്നു, പല സ്ഥലങ്ങളിലും അവ ഉപഭോക്തൃ സംരക്ഷണ നിയമങ്ങൾക്ക് എതിരുമാണ്.
• ഒരു മാറ്റത്തിന് ശേഷം സൈറ്റ് തകരുന്നു. പുതിയ കോഡ് ഒട്ടിക്കും മുമ്പ് അവസാനം പ്രവർത്തിച്ച പതിപ്പിന്റെ ഒരു പകർപ്പ് സൂക്ഷിക്കുക. Mythex പോലുള്ള ബിൽഡറുകൾ ചെക്ക്‌പോയിന്റുകൾ സൂക്ഷിക്കുന്നതിനാൽ നിങ്ങൾക്ക് തിരികെ പോകാം.

പ്രസിദ്ധീകരിക്കുന്നതിന് മുമ്പ്

ഓരോ പേജിലെയും ഓരോ വാക്കും വായിക്കുക. ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് പരിശോധിക്കുക. സൈറ്റ് ഫോണിൽ തുറക്കുക. ചിത്രങ്ങൾ നിങ്ങളുടേതോ ശരിയായി ലൈസൻസ് ചെയ്തതോ ആണെന്ന് ഉറപ്പാക്കുക. പിന്നെ പ്രസിദ്ധീകരിക്കുക, നിങ്ങളുടെ സന്ദർശകർ ഇതിനകം ഉള്ളിടത്ത് പങ്കിടുക. മുഴുവൻ കാര്യത്തിനും ഒരു ചെലവുമില്ലാതെ വേണമെങ്കിൽ, വെബ്സൈറ്റ് സൗജന്യമായി എങ്ങനെ ഉണ്ടാക്കാം സൗജന്യ ഹോസ്റ്റിംഗ് ഓപ്ഷനുകൾ കൂടുതൽ വിശദമായി പറയുന്നു.

ചോദ്യങ്ങൾ