Si të krijosh një website me ChatGPT: tre mënyra që funksionojnë

Për të krijuar një website me ChatGPT, mund t'i kërkosh të shkruajë HTML-in dhe CSS-in e faqes dhe pastaj t'i vendosësh ato skedarë në një shërbim hosting vetë; mund ta përdorësh për të planifikuar faqet dhe për të shkruar tekstin përpara se ta ndërtosh në një website builder; ose mund të lidhësh një AI builder si Mythex brenda ChatGPT, që të ndërtojë, host-ojë dhe publikojë faqen për ty nga e njëjta chat. Mënyra e parë është falas dhe e mirë për një faqe të vetme; e treta është ajo që të duhet kur faqja ka nevojë për formularë që ruajnë të dhëna, login-e ose përditësime të rregullta. Ky udhëzues tregon çdo metodë me prompt-e dhe thotë qartë se ku ndalon secila.

Çfarë mund dhe çfarë nuk mund të bëjë ChatGPT vetë

ChatGPT është shumë i mirë në shkrim: kod, titra, tekste faqesh dhe plane. Pa ndihmë të tjera nuk është një kompani hosting-u. Nuk i jep faqes tënde një adresë publike, nuk drejton një bazë të dhënash dhe nuk i mban skedarët e faqes midis projekteve ashtu si e bën një builder. Çdo metodë më poshtë është një përgjigje e ndryshme për këtë boshllëk.

Metoda 1: ChatGPT shkruan kodin, ti e host-on

Kjo është qasja klasike dhe funksionon mirë për një faqe të thjeshtë, statike: një portofol, një landing page, një faqe dasmash.

Hapi 1: Kërko një faqe të plotë, në një skedar të vetëm

Jep detaje të qarta për përmbajtjen dhe layout-in:

Shkruaj një website të plotë me një faqe, si një skedar të vetëm HTML me CSS brenda një tag style. Është për Maya Haddad, një ilustruese e pavarur në Amman. Seksionet: një header me emrin e saj dhe "Ilustrime për libra dhe marka", një grid me gjashtë imazhe portofoli (përdor shtigje placeholder që mund t'i zëvendësoj), një paragraf të shkurtër rreth saj, një listë me tre shërbime me çmimet fillestare, dhe një seksion kontakti me email-in e saj si link mailto. Modern dhe i pastër, me hapësirë të gjerë të bardhë, që funksionon në telefon. Pa framework-e JavaScript.

Kërkesa për një skedar të vetëm e mban të thjeshtë ruajtjen dhe ngarkimin.

Hapi 2: Ruaje dhe hape

Kopjo kodin në një editor teksti, ruaje si index.html dhe hape në browser. Nëse diçka duket e gabuar, përshkruaje ChatGPT: "grid-i i imazheve është një kolonë në desktop; bëje tre kolona mbi 900px gjerësi."

Hapi 3: Zëvendëso placeholder-at

Zëvendëso imazhet placeholder me të tuajat dhe çdo tekst që ChatGPT e ka shpikur. Kontrollo me kujdes çmimet, email-et dhe emrat; AI i plotëson boshllëqet me siguri, edhe kur gaboj.

Hapi 4: Vendose online

Ngarko skedarin në një host statik falas si GitHub Pages, ose në çdo host web që ke tashmë. Do të marrësh një adresë publike. Për të përdorur domain-in tënd, ndiq udhëzimet e host-it; udhëzuesi ynë për lidhjen e një domain-i të personalizuar e shpjegon pjesën e DNS-it.

Ku ndalon Metoda 1

• Formularë që ruajnë të dhëna. Një formular kontakti ka nevojë për një vend ku të dërgohen dorëzimet. Do të të duhet një shërbim formularësh ose një server.
• Login-e dhe zona anëtarësh. Këto kërkojnë backend dhe bazë të dhënash.
• Shumë faqe. Mbajtja e header-it dhe menuve të njëjta në dhjetë skedarë të ngjitur me dorë bëhet e lodhshme.
• Përditësime. Çdo ndryshim do të thotë të kërkosh kod të ri, ta ngjitësh dhe ta ngarkosh përsëri.

Metoda 2: ChatGPT planifikon, një builder ndërton

Këtu ChatGPT bën punën e mendimit dhe të shkrimit, ndërsa një website builder bën ndërtimin dhe hosting-un.

Hapi 1: Planifiko faqen me ChatGPT

Drejtoj një ëmbëltore të vogël familjare në Manchester që pranon porosi torta. Sugjero faqet që i duhen website-it tim, çfarë duhet të thotë secila faqe dhe veprimin e vetëm që dua që vizitorët ta bëjnë në çdo faqe. Mbaje deri në pesë faqe.

Hapi 2: Shkruaj tekstin

Kërko tekstin e secilës faqe, pastaj rishkruaje me zërin tënd. Shto detaje reale që ChatGPT nuk i di: orari i hapjes, çmimet, zonat e dërgesës, çfarë i bën tortat e tua të ndryshme.

Hapi 3: Ndërtoje në një builder

Ngjit planin dhe tekstin në një website builder. Në një mjet drag-and-drop, e vendos tekstin në një template. Në një AI builder mund t'i japësh të gjithë planin si një mesazh të vetëm dhe ai ndërton faqet; për shembull, në website builder-in Mythex:

Ndërto një website për një ëmbëltore familjare në Manchester duke përdorur këtë plan dhe tekst: [ngjit]. Përfshi një formular kërkese porosie që ruan çdo kërkesë (emri, telefoni, lloji i tortës, data e nevojshme, mesazhi) që t'i shoh në një faqe admin ku hyn vetëm unë. Dizajn i ngrohtë dhe shtëpiak, që funksionon në telefon.

Ky formular porosish ruan në një bazë të dhënash reale, gjë që një skedar HTML i ngjitur nuk mund ta bënte. Për më shumë rreth kësaj rruge, shiko si të ndërtosh një website me AI.

Metoda 3: Ndërto dhe publiko nga brenda ChatGPT

Opsioni më i ri është të lidhësh një builder me ChatGPT, që ChatGPT të përdorë direkt mjetet e builder-it. Mbetesh në bisedën me ChatGPT; builder-i ofron projektin, preview-in, bazën e të dhënave dhe hosting-un.

Mythex funksionon kështu përmes aplikacionit të tij për ChatGPT (një konektor MCP). E lidh nga Account settings në Mythex; lidhja funksionon në çdo plan, por mjetet që ekzekutojnë sandbox-in e projektit kërkojnë Pro. Pasi të jetë lidhur, mund t'i kërkosh ChatGPT diçka si:

Duke përdorur Mythex, krijo një website të ri për ëmbëltoren time me një faqe kryesore, një faqe menuje me torta dhe çmime, dhe një formular kërkese porosie që ruan në një bazë të dhënash. Më trego preview-in, dhe publiko kur të them që duket mirë.

ChatGPT pastaj e krijon projektin, shkruan kodin, e ekzekuton dhe e publikon në një URL publike kur e miraton. Ndryshimet janë vetëm mesazhe të tjera në të njëjtën chat. I njëjti konektor funksionon edhe nga Claude, Cursor dhe Codex. Për sfondin se si funksionon kjo dhe cilët builder-a e mbështesin, shiko AI app builders me MCP.

Cilën metodë të zgjedhësh?

Këshilla për prompt-e që funksionojnë në çdo metodë

• Jep fakte reale në fillim. Emri, vendndodhja, shërbimet, çmimet, detajet e kontaktit. Sa më pak detaje të shpikura, aq më pak pastrim.
• Përshkruaj vizitorin dhe qëllimin. "Një prind që kërkon tortë për ditëlindje, i cili duhet të përfundojë duke dërguar një kërkesë porosie."
• Kërko layout-e që i takojnë telefonit fillimisht. Shumica e vizitorëve përdorin telefon.
• Ndrysho një gjë për mesazh pasi të ekzistojë versioni i parë.
• Kërko bazat e SEO-së qartë: një titull dhe përshkrim unik për çdo faqe, kryetitra reale, alt text te imazhet. Shiko SEO për website-et e ndërtuara me AI.

Udhëzuesi ynë për shkrimin e prompt-eve për AI app builders ka më shumë modele.

Problemet e zakonshme dhe zgjidhjet

• Dizajni duket i përgjithshëm. Jep një referencë: "si një kafene e qetë skandinave, shumë e bardhë dhe një jeshile e zbehtë".
• Kodi u pre. Kërko ChatGPT të vazhdojë nga rreshti i fundit, ose ta ndajë faqen në seksione dhe t'i japë një nga një.
• Shpiku dëshmi klientësh ose statistika. Hiqi. Recensionet e rreme e dëmtojnë besimin, dhe në shumë vende janë të ndaluara sipas rregullave të mbrojtjes së konsumatorit.
• Faqja prishet pas një ndryshimi. Mbaj një kopje të versionit të fundit që funksionoi para se të ngjitësh kod të ri. Builder-a si Mythex mbajnë checkpoint-e që të mund të kthehesh.

Para se ta publikosh

Lexo çdo fjalë në çdo faqe. Kontrollo që detajet e kontaktit funksionojnë. Hape faqen në telefon. Sigurohu që imazhet janë tuajat ose të licencuara si duhet. Pastaj publiko dhe ndaje atje ku janë tashmë vizitorët e tu. Nëse do që e gjithë puna të mos kushtojë asgjë, si të krijosh një website falas i mbulon opsionet falas të hosting-ut më në detaj.

Pyetje