Paano Gumawa ng Website gamit ang ChatGPT: Tatlong Paraan na Gumagana

Para gumawa ng website gamit ang ChatGPT, puwede mong ipasulat dito ang HTML at CSS ng site at ilagay mo ang mga file sa hosting service na ikaw mismo ang pumili. Puwede rin itong gamitin para magplano ng mga page at isulat ang copy bago gumawa sa website builder, o ikonekta ang AI builder na tulad ng Mythex sa loob ng ChatGPT para ito na ang mag-build, mag-host, at mag-publish ng site mula sa iisang chat. Libre at sapat ang una para sa isang-page na site; ang pangatlo naman ang kailangan kapag may form na nagse-save ng data, login, o regular na update ang site. Ipapakita ng gabay na ito ang bawat paraan na may prompts, at malinaw kung saan ito humihinto.

Ano ang kaya at hindi kaya ng ChatGPT nang mag-isa

Napakagaling ng ChatGPT sa pagsusulat: code, headline, page copy, at mga plano. Sa mismong sarili nito, hindi ito isang hosting company. Hindi nito binibigyan ang site mo ng pampublikong address, hindi ito nagpapatakbo ng database, at hindi nito tinatandaan ang mga file ng site mo sa pagitan ng mga project gaya ng ginagawa ng builder. Bawat paraan sa ibaba ay iba-ibang sagot sa puwang na iyon.

Paraan 1: Isinusulat ng ChatGPT ang code, ikaw ang nag-hohost

Ang klasikong paraan ito at gumagana nang maayos para sa simpleng static na site: portfolio, landing page, o wedding page.

Hakbang 1: Humingi ng kumpleto at single-file na page

Maging tiyak sa content at layout:

Sumulat ng kumpletong single-page website bilang isang HTML file, na ang CSS ay nasa loob ng style tag. Para ito kay Maya Haddad, isang freelance illustrator sa Amman. Mga section: header na may pangalan niya at "Illustration for books and brands", grid ng anim na portfolio image (gumamit ng placeholder image path na mapapalitan ko), maikling about paragraph, listahan ng tatlong serbisyo na may starting price, at contact section na may email niya bilang mailto link. Malinis, moderno, maluwag ang white space, gumagana sa phone. Walang JavaScript framework.

Ang isang file ay nagpapadali sa pag-save at pag-upload.

Hakbang 2: I-save at buksan

Kopyahin ang code sa text editor, i-save bilang index.html, at buksan sa browser. Kung may mali sa itsura, ilarawan ito sa ChatGPT: "nasa isang column lang ang image grid sa desktop; gawin itong tatlong column kapag mahigit 900px ang lapad."

Hakbang 3: Palitan ang mga placeholder

Palitan ang placeholder image ng sarili mo at palitan ang anumang text na inimbento ng ChatGPT. Tingnan nang mabuti ang mga presyo, email, at pangalan; kumpiyansang pinupunan ng AI ang mga puwang.

Hakbang 4: Ilagay online

I-upload ang file sa libreng static host gaya ng GitHub Pages, o sa anumang web host na binabayaran mo na. Makakakuha ka ng pampublikong address. Para gamitin ang sarili mong domain, sundin ang instruksyon ng host mo; ipinapaliwanag ng aming gabay sa pagkonekta ng custom domain ang bahagi ng DNS.

Saan humihinto ang Paraan 1

• Mga form na nagse-save ng data. Kailangan ng contact form ng lugar kung saan ipapadala ang mga submission. Kakailanganin mo ng form service o server.
• Mga login at members' area. Kailangan ng backend at database para dito.
• Maraming page. Nakakapagod panatilihing magkapareho ang header at menu sa sampung file na idinikit nang isa-isa.
• Mga update. Bawat pagbabago ay nangangahulugang hihingi ka ulit ng bagong code, idikit ito, at i-upload muli.

Paraan 2: Nagpaplano ang ChatGPT, ang builder ang gumagawa

Dito, ang ChatGPT ang gumagawa ng pag-iisip at pagsusulat, at ang website builder ang gumagawa at nagho-host.

Hakbang 1: Planuhin ang site gamit ang ChatGPT

Maliit na family bakery ang pinapatakbo ko sa Manchester na tumatanggap ng order para sa cake. Magmungkahi ng mga page na kailangan ng website ko, ano ang dapat sabihin ng bawat page, at ang isang aksyon na gusto kong gawin ng bisita sa bawat page. Limang page o mas kaunti lang.

Hakbang 2: Isulat ang copy

Humingi ng text ng bawat page, pagkatapos isulat ulit sa sarili mong boses. Idagdag ang totoong detalye na hindi malalaman ng ChatGPT: oras ng bukas, presyo, lugar ng delivery, at ano ang nagpapaiba sa mga cake mo.

Hakbang 3: I-build sa builder

Idikit ang plano at copy sa website builder. Sa drag-and-drop na tool, ilalagay mo ang text sa isang template. Sa AI builder, puwede mong ibigay ang buong plano bilang isang mensahe at bubuuin nito ang mga page; halimbawa, sa Mythex website builder:

Gumawa ng website para sa family bakery sa Manchester gamit ang planong ito at copy: [i-paste]. Isama ang order request form na nagse-save ng bawat request (pangalan, telepono, uri ng cake, petsang kailangan, mensahe) para makita ko sila sa admin page na ako lang ang makakapag-log in. Mainit at homely ang disenyo, gumagana sa phone.

Ang order form dito ay nagse-save sa totoong database, na hindi kayang gawin ng idinikit na HTML file. Para sa mas maraming detalye sa ruta na ito, tingnan ang paano gumawa ng website gamit ang AI.

Paraan 3: Mag-build at mag-publish mula sa loob ng ChatGPT

Ang pinakabagong opsyon ay ikonekta ang isang builder sa ChatGPT para magamit ng ChatGPT nang direkta ang mga tool nito. Nananatili ka sa usapan sa ChatGPT; ang builder ang nagbibigay ng project, preview, database, at hosting.

Gumagana ang Mythex sa ganitong paraan sa pamamagitan ng ChatGPT app nito (isang MCP connector). Ikinokonekta mo ito mula sa Account settings sa Mythex; gumagana ang pagkonekta sa anumang plan, at ang mga tool na nagpapatakbo ng sandbox ng project mo ay nangangailangan ng Pro. Kapag nakakonekta na, puwede mong sabihin sa ChatGPT ang ganito:

Gamit ang Mythex, gumawa ng bagong website para sa bakery ko na may home page, menu page na may mga cake at presyo, at order request form na nagse-save sa database. Ipakita sa akin ang preview, at i-publish kapag sinabi kong okay na.

Gagawin ng ChatGPT ang project, isusulat ang code, papatakbuhin ito, at ipu-publish sa pampublikong URL kapag inaprubahan mo. Ang mga pagbabago ay mga karagdagang mensahe lang sa parehong chat. Gumagana rin ang parehong connector approach mula sa Claude, Cursor, at Codex. Para sa background kung paano ito gumagana at aling mga builder ang sumusuporta nito, tingnan ang mga AI app builder na may MCP.

Alin ang dapat mong piliin?

Mga tip sa prompt na gumagana sa anumang paraan

• Ibigay agad ang totoong detalye. Pangalan, lokasyon, serbisyo, presyo, at contact details. Mas kaunting naimbentong detalye ay mas kaunting paglilinis ang kailangan.
• Ilarawan ang bisita at ang layunin. "Isang magulang na naghahanap ng birthday cake, na dapat magpadala ng order request sa huli."
• Humingi ng layout na phone-first. Karamihan ng bisita ay gumagamit ng phone.
• Isang bagay lang ang baguhin bawat mensahe kapag may unang bersyon na.
• Humingi nang tahasan ng mga batayan ng SEO: natatanging title at description sa bawat page, totoong heading, at alt text sa mga larawan. Tingnan ang SEO para sa mga website na gawa ng AI.

May mas marami pang pattern ang aming gabay sa pagsulat ng prompt para sa AI app builder.

Karaniwang problema at mga solusyon

• Mukhang generic ang disenyo. Magbigay ng reference: "gaya ng isang tahimik na café sa Scandinavia, maraming puti at isang maputlang berde".
• Naputol ang code. Humingi sa ChatGPT na ituloy mula sa huling linya, o hatiin ang page sa mga section at ibigay isa-isa.
• Nag-imbento ito ng testimonial o estadistika. Alisin ang mga ito. Nakakasira ng tiwala ang pekeng review, at sa maraming lugar ay labag ito sa mga batas sa proteksyon ng consumer.
• Nasira ang site pagkatapos ng pagbabago. Magtabi ng kopya ng huling gumaganang bersyon bago idikit ang bagong code. Nagtatago ng checkpoint ang mga builder gaya ng Mythex para maibalik mo ang dati.

Bago mag-publish

Basahin ang bawat salita sa bawat page. Siguraduhing gumagana ang contact details. Buksan ang site sa phone. Tiyaking sa iyo o may tamang lisensya ang mga larawan. Pagkatapos, mag-publish at ibahagi ito kung saan naroon na ang mga bisita mo. Kung gusto mong walang gastos ang buong bagay, sakop ng paano gumawa ng website nang libre ang mga opsyon sa libreng hosting nang mas detalyado.

Mga tanong