Kuidas teha veebisaiti ChatGPT-ga: kolm toimivat viisi

Veebisaidi tegemiseks ChatGPT-ga saad paluda tal kirjutada saidi HTML ja CSS ning panna need failid ise majutusteenusesse. Samuti saab seda kasutada lehtede planeerimiseks ja tekstide kirjutamiseks enne ehitamist veebisaidi ehitajas. Või saad ühendada ChatGPT-s AI-ehitaja nagu Mythex, mis ehitab, majutab ja avaldab saidi otse samast vestlusest. Esimene viis on tasuta ja sobib ühele lehele; kolmas on see, mida vajad, kui sait vajab andmeid salvestavaid vorme, sisselogimist või regulaarseid uuendusi. See juhend näitab iga meetodit koos viipadega ja ütleb selgelt, kus iga meetod lõpeb.

Mida ChatGPT ise suudab ja mida mitte

ChatGPT on väga hea kirjutamises: kood, pealkirjad, lehtede tekst ja plaanid. Ta ei ole algusest peale majutusfirma. Ta ei anna saidile avalikku aadressi, ei käita andmebaasi ega hoia saidi faile projektide vahel nii, nagu seda teeb ehitaja. Iga allpool kirjeldatud meetod on erinev vastus sellele lüngale.

Meetod 1: ChatGPT kirjutab koodi, sina majutad

See on klassikaline lähenemine ja toimib hästi lihtsa staatilise saidi puhul: portfoolio, maandumisleht või pulmalehekülg.

Samm 1: Palu täielik ühe failiga leht

Ole sisu ja paigutuse suhtes konkreetne:

Kirjuta täielik ühe lehekülje veebisait ühe HTML-failina, CSS on sees style-märgendis. See on Maya Haddadi jaoks, vabakutselisele illustraatorile Ammanis. Osad: päis tema nime ja tekstiga „Illustratsioonid raamatutele ja brändidele“, kuus portfelli pilti ruudustikus (kasuta kohatäiteid, mille saan asendada), lühike tutvustav lõik, nimekiri kolmest teenusest koos algushindadega ning kontaktosa, kus on tema e-post mailto-lingina. Puhas, kaasaegne, rohke tühi ruum, toimib telefonis. Ilma JavaScripti raamistiketa.

Ühe faili palumine teeb salvestamise ja üleslaadimise lihtsaks.

Samm 2: Salvesta ja ava

Kopeeri kood tekstiredaktorisse, salvesta nimega index.html ja ava see brauseris. Kui midagi tundub valesti, kirjelda seda ChatGPT-le: „pildiruudustik on arvutis üks veerg; tee üle 900 px laiuse ekraani puhul kolm veergu.“

Samm 3: Asenda kohatäited

Vaheta kohatäitepildid oma piltide vastu ja asenda ChatGPT leiutatud tekst. Kontrolli hoolikalt hindu, e-posti aadresse ja nimesid; AI täidab lüngad kindlalt, aga valesti.

Samm 4: Pane internetti

Laadi fail üles tasuta staatilisele majutusele, näiteks GitHub Pages, või mõnele veebimajutusele, mille eest juba maksad. Saad avaliku aadressi. Oma domeeni kasutamiseks järgi majutaja juhiseid; meie juhend kohandatud domeeni ühendamisest selgitab DNS-i osa.

Kus meetod 1 lõpeb

• Andmeid salvestavad vormid. Kontaktvorm vajab kohta, kuhu esitused saata. Vajad vormiteenust või serverit.
• Sisselogimine ja liikmeala. Need vajavad taustaprogrammi ja andmebaasi.
• Palju lehti. Päiste ja menüüde ühtlasena hoidmine kümnel käsitsi kleepitud failil on tüütu.
• Uuendused. Iga muudatus tähendab uue koodi palumist, kleepimist ja uuesti üleslaadimist.

Meetod 2: ChatGPT planeerib, ehitaja ehitab

Siin teeb ChatGPT mõtlemise ja kirjutamise töö, ehitaja aga ehitamise ja majutamise töö.

Samm 1: Planeeri sait ChatGPT-ga

Mul on väike perepagariäri Manchesteris, mis võtab vastu kookide tellimusi. Soovita, millised lehed mu veebisait vajab, mida iga leht peaks ütlema ja milline üks tegevus tahan külastajatelt igal lehel. Hoia see viies lehes või vähem.

Samm 2: Kirjuta tekst

Palu iga lehe tekst ja kirjuta see siis oma häälega ümber. Lisa päris üksikasjad, mida ChatGPT ei tea: lahtiolekuajad, hinnad, tarneala, mis teeb sinu kookid erinevaks.

Samm 3: Ehita ehitajas

Kleebi plaan ja tekst veebisaidi ehitajasse. Lohistamisega töötavas tööriistas paigutad teksti malli. AI-ehitajas saad kogu plaani ühe sõnumina ja see ehitab lehed; näiteks Mythex veebisaidi ehitajas:

Ehita perepagariärile Manchesteris veebisait selle plaani ja tekstide põhjal: [kleebi]. Lisa tellimisvorm, mis salvestab iga päringu (nimi, telefon, kooki tüüp, vajatav kuupäev, sõnum), et saaksin need näha haldusleheküljel, kuhu ainult mina pääsen sisse. Soe, koduse ilmega disain, toimib telefonis.

Siin salvestab tellimisvorm päris andmebaasi, mida kleebitud HTML-fail ei suudaks. Selle tee kohta rohkem loed juhendist kuidas teha veebisaiti AI-ga.

Meetod 3: Ehita ja avalda ChatGPT seest

Uuim võimalus on ühendada ChatGPT-ga ehitaja, et ChatGPT saaks selle tööriistu otse kasutada. Jääd ChatGPT vestlusse; ehitaja annab projekti, eelvaate, andmebaasi ja majutuse.

Mythex töötab nii oma ChatGPT rakenduse kaudu (MCP-ühendusena). Ühenda see Mythexi kontoseadetest; ühendamine toimib igal paketil, aga projekti liivakasti käitavad tööriistad vajavad Pro-paketti. Kui see on ühendatud, saad ChatGPT-le paluda midagi sellist:

Kasuta Mythexit, et luua minu pagariärile uus veebisait: avaleht, menüülehekülg kookide ja hindadega ning tellimisvorm, mis salvestab andmebaasi. Näita mulle eelvaadet ja avalda see, kui ütlen, et see on valmis.

Seejärel loob ChatGPT projekti, kirjutab koodi, käivitab selle ja avaldab selle avalikul aadressil, kui kiidad heaks. Muudatused on lihtsalt veel sõnumid samas vestluses. Sama ühendusviis toimib ka Claude'ist, Cursorist ja Codexist. Taustast, kuidas see töötab ja milliseid ehitajaid see toetab, loe juhendist AI-rakendusehitajad MCP-ga.

Millist meetodit valida?

Viipenõuanded, mis töötavad igal meetodil

• Anna kohe päris faktid. Nimi, asukoht, teenused, hinnad, kontaktandmed. Mida vähem välja mõeldud detaile, seda vähem korrastamist.
• Kirjelda külastajat ja eesmärki. „Lapsevanem, kes otsib sünnipäevakooki ja peaks lõpuks saatma tellimispäringu.“
• Palu telefonile esmalt sobivat paigutust. Enamik külastajaid kasutab telefoni.
• Muuda ühte asja korraga, kui esimene versioon on olemas.
• Küsi SEO põhitõdesid selgesõnaliselt: iga lehe unikaalne pealkiri ja kirjeldus, päris pealkirjad, piltide alt-tekstid. Vaata SEO AI-ga ehitatud veebisaitidele.

Meie juhendis viipade kirjutamine AI-rakendusehitajatele on rohkem mustreid.

Levinud probleemid ja lahendused

• Disain tundub üldine. Anna viide: „nagu rahulik skandinaavia kohvik, palju valget ja üks vaikne roheline toon“.
• Kood lõigati pooleli. Palu ChatGPT-l jätkata viimasest reast või jagada leht lõikudeks ja anda neid ükshaaval.
• Ta leiutas arvustused või statistika. Eemalda need. Võltsarvustused kahjustavad usaldust ning paljudes kohtades on need tarbijakaitse reeglitega keelatud.
• Sait puruneb pärast muudatust. Hoia viimase töötava versiooni koopiat enne uue koodi kleepimist. Ehitajad nagu Mythex hoiavad kontrollpunkte, et saaksid tagasi võtta.

Enne avaldamist

Loe iga lehe iga sõna. Kontrolli, et kontaktandmed töötavad. Ava sait telefonis. Veendu, et pildid on sinu omad või korralikult litsentsitud. Seejärel avalda ja jaga seda seal, kus su külastajad juba on. Kui tahad, et kogu asi ei maksaks midagi, selgitab kuidas teha veebisaiti tasuta tasuta majutusvõimalusi põhjalikumalt.

Küsimused