ChatGPT арқылы сайт жасау: жұмыс істейтін үш тәсіл

ChatGPT арқылы сайт жасаудың үш жолы бар: сайттың HTML және CSS кодын жаздырып, оны өзіңіз хостингке жүктеу; беттерді жоспарлап, мәтінін жаздырып, содан кейін веб-сайт құрастырушыда құру; немесе ChatGPT ішіне Mythex сияқты AI құрастырушыны қосып, сайтты сол чаттан құрастырып, хостингте жариялату. Бірінші тәсіл бір беттік сайт үшін тегін әрі жеткілікті. Үшіншісі деректерді сақтайтын формалар, кіру жүйесі немесе жиі жаңарту қажет болғанда керек. Бұл нұсқаулық әр тәсілді промпттармен көрсетеді және әрқайсысы қай жерде тоқтайтынын айтады.

ChatGPT өзі не істей алады және не істей алмайды

ChatGPT жазуда өте жақсы: код, тақырыптар, бет мәтіндері және жоспарлар. Бірақ бастапқы күйінде ол хостинг компания емес. Ол сайтыңызға ортақ мекенжай бермейді, дерекқорды іске қоспайды және жобалар арасында сайт файлдарын құрастырушы сияқты сақтамайды. Төмендегі әр тәсіл осы олқылыққа басқа жауап береді.

1-тәсіл: ChatGPT кодты жазады, сіз хостайсыз

Бұл классикалық тәсіл және қарапайым статикалық сайтқа жақсы жұмыс істейді: портфолио, лендинг бет, үйлену шақыруы.

1-қадам: толық, бір файлдық бет сұраңыз

Мазмұн мен макетті нақты сипаттаңыз:

Толық бір беттік веб-сайтты бір HTML файлы ретінде жазып беріңіз, CSS style тегінің ішінде болсын. Ол Аммандағы фрилансер иллюстратор Мая Хаддадқа арналған. Бөлімдер: аты және «Кітаптар мен брендтерге арналған иллюстрация» деген тақырыбы бар үстіңгі бөлім; алты портфолио суретінен тұратын тор (ауыстырылатын орын толтырғыш сурет жолдарын қолданыңыз); қысқа «Мен туралы» абзацы; бастапқы бағалары бар үш қызметтің тізімі; және электрондық поштасы mailto сілтемесі болып берілген байланыс бөлімі. Таза, заманауи дизайн, кең бос орын, телефонда жақсы көрінсін. JavaScript фреймворктарысыз.

Бір файл сақтауды және жүктеуді жеңілдетеді.

2-қадам: сақтап, ашыңыз

Кодты мәтіндік редакторға көшіріп, index.html ретінде сақтап, браузерде ашыңыз. Егер бірдеңе дұрыс көрінбесе, ChatGPT-ге сипаттаңыз: «суреттер торы жұмыс үстелінде бір бағанда тұр; 900 пикселден кең экранда үш баған жасаңыз».

3-қадам: орын толтырғыштарды ауыстырыңыз

Орын толтырғыш суреттерді өзіңіздікімен ауыстырыңыз және ChatGPT ойлап тапқан мәтіннің бәрін алмастырыңыз. Бағаларды, электрондық поштаны және атауларды мұқият тексеріңіз; AI бос орынды сенімді толтырады.

4-қадам: желіге шығарыңыз

Файлды GitHub Pages сияқты тегін статикалық хостқа немесе өзіңіз төлейтін кез келген веб-хостқа жүктеңіз. Жалпыға ортақ мекенжай аласыз. Өз доменіңізді пайдалану үшін хостыңыздың нұсқауын орындаңыз; доменді қосу нұсқаулығында DNS бөлігі түсіндірілген.

Бірінші тәсілдің тоқтайтын жері

• Деректерді сақтайтын формалар. Байланыс формасы жіберілген хабарларды қабылдайтын жерді қажет етеді. Оған форма қызметі немесе сервер керек.
• Кіру жүйелері және қатысушылар аймағы. Олар серверді және дерекқорды қажет етеді.
• Көп бет. Он қолмен қойылған файлда тақырып пен мәзірді бірдей ұстау жалықтырады.
• Жаңартулар. Әр өзгеріс үшін жаңа код сұрап, оны қайта қойып, қайта жүктеу керек.

2-тәсіл: ChatGPT жоспарлайды, құрастырушы салады

Мұнда ChatGPT ойлау мен жазуды, ал веб-сайт құрастырушы құрастыруды және хостингті атқарады.

1-қадам: ChatGPT-мен сайтты жоспарлаңыз

Мен Манчестерде тапсырыспен торт қабылдайтын шағын отбасылық наубайханамын. Менің веб-сайтыма қажет беттерді, әр беттің не айтуы тиіс екенін және әр бетте келушінің орындауы керек бір әрекетті ұсыныңыз. Бес беттен аспасын.

2-қадам: мәтін жазыңыз

Әр беттің мәтінін сұраңыз, содан кейін оны өз сөзіңізбен қайта жазыңыз. ChatGPT білмейтін нақты деректерді қосыңыз: жұмыс уақыты, бағалар, жеткізу аймақтары, торттарыңыздың ерекшелігі.

3-қадам: құрастырушыда жасаңыз

Жоспар мен мәтінді веб-сайт құрастырушыға қойыңыз. Сүйреп-тастау құралында мәтінді үлгіге орналастырасыз. AI құрастырушыда бүкіл жоспарды бір хабарлама ретінде беруге болады, мысалы Mythex веб-сайт құрастырушысында:

Манчестердегі отбасылық наубайхана үшін осы жоспар мен мәтінмен веб-сайт жасаңыз: [мұнда қойыңыз]. Тапсырыс сұрауы формасын қосыңыз, ол әр сұрауды (аты, телефон, торт түрі, қажет күні, хабарлама) сақтасын, сонда мен оларды тек өзім кіре алатын әкімші бетінде көре аламын. Жылы, үйдегідей дизайн, телефонда жақсы жұмыс істесін.

Бұл тапсырыс формасы нақты дерекқорға сақталады, ал қойылған HTML файлы мұны істей алмайды. Бұл жол туралы толығырақ білу үшін AI арқылы сайт жасау нұсқаулығын оқыңыз.

3-тәсіл: ChatGPT ішінен жасап, жариялау

Ең жаңа мүмкіндік – құрастырушыны ChatGPT-ге қосу, сонда ChatGPT оның құралдарын тікелей пайдалана алады. Сіз ChatGPT сөйлесуінде қаласыз; жобаны, алдын ала қарауды, дерекқорды және хостингті құрастырушы береді.

Mythex осылай жұмыс істейді, ChatGPT қолданбасы арқылы (MCP коннекторы). Оны Mythex ішіндегі Account settings бөлімінен қосасыз; қосылу кез келген жоспарда жұмыс істейді, ал жоба құмсалғышын басқаратын құралдар Pro жоспарын қажет етеді. Қосылғаннан кейін мынаған ұқсас сұрай аласыз:

Mythex арқылы наубайханам үшін жаңа веб-сайт жасаңыз: басты бет, торттары мен бағалары бар мәзір беті және дерекқорға сақталатын тапсырыс формасы. Алдын ала қарауды көрсетіңіз, ал дұрыс көрінгенде жариялаңыз.

Содан кейін ChatGPT жобаны жасайды, кодты жазады, оны іске қосады және сіз мақұлдаған кезде жалпыға ортақ URL-ге жариялайды. Өзгерістер сол чаттағы жаңа хабарламалар түрінде жүреді. Бұл коннектор тәсілі Claude, Cursor және Codex жүйелерінде де жұмыс істейді. Оның астарында не барын және қай құрастырушылар қолдайтынын MCP арқылы AI қолданба құрастырушылары нұсқаулығынан қараңыз.

Қай тәсілді таңдау керек?

Барлық тәсілге жарайтын промпт кеңестері

• Алдын ала нақты деректер беріңіз. Аты, орны, қызметтері, бағалары, байланыс мәліметтері. Неғұрлым мол дерек болса, тазалау аз керек болады.
• Келушіні және мақсатты сипаттаңыз. «Туған күнге торт іздеп жүрген ата-ана, ол тапсырыс сұрауын жіберуі тиіс».
• Телефонға арналған макетті сұраңыз. Көпшілік келушілер телефон қолданады.
• Бірінші нұсқа дайын болғаннан кейін бір хабарламада бір өзгеріс енгізіңіз.
• SEO негіздерін айқын сұраңыз: әр бетке бірегей тақырып пен сипаттама, нақты тақырыптар, суреттерде alt мәтіні. Қараңыз: AI арқылы құрастырылған веб-сайттарға SEO.

Промпт жазу үлгілері үшін AI құрастырушыларына арналған промпт жазу нұсқаулығында көбірек бар.

Жиі кездесетін мәселелер және шешімдер

• Дизайн жалпы көрінеді. Үлгі беріңіз: «жылы скандинавиялық кафе сияқты, ақ түс көп және бір басаң жасыл түс».
• Код кесіліп қалды. ChatGPT-ден соңғы жолдан жалғастыруын сұраңыз, немесе бетті бөлімдерге бөліп, бір-бірлеп алыңыз.
• Ол ойдан шығарылған пікірлер немесе статистика қосты. Оларды жойыңыз. Жалған пікірлер сенімді бұзады, ал көптеген жерде бұл тұтынушылар құқығын бұзу болып саналады.
• Өзгерістен кейін сайт бұзылды. Жаңа кодты қоймас бұрын соңғы жұмыс істеген нұсқаның көшірмесін сақтаңыз. Mythex сияқты құрастырушылар қайтару үшін checkpoint сақтайды.

Жариялаудан бұрын

Әр беттегі әр сөзді оқыңыз. Байланыс мәліметтерінің жұмыс істейтінін тексеріңіз. Сайтты телефонда ашыңыз. Суреттердің өзіңіздікі немесе тиісті лицензиясы бар екеніне көз жеткізіңіз. Содан кейін жариялаңыз және сайтты келушілеріңіз жүретін жерде бөлісіңіз. Егер барлығы тегін болғанын қаласаңыз, сайтты тегін жасау нұсқаулығы тегін хостинг нұсқаларын толығырақ түсіндіреді.

Сұрақтар