Kā izveidot mājaslapu ar ChatGPT: trīs darba veidi

Lai izveidotu mājaslapu ar ChatGPT, varat lūgt tam uzrakstīt vietnes HTML un CSS, pēc tam ievietot šos failus hostēšanas pakalpojumā pats; izmantot to lapu plānošanai un teksta rakstīšanai pirms veidošanas mājaslapu būvētājā; vai savienot AI būvētāju, piemēram, Mythex, ChatGPT, lai tas vietni izveidotu, izvietotu un publicētu tieši no tās pašas tērzēšanas. Pirmais veids ir bezmaksas un labs vienlapas vietnei; trešais ir tas, kas vajadzīgs, kad vietnei nepieciešamas formas, kas saglabā datus, pieteikšanās vai regulāri atjauninājumi. Šajā rokasgrāmatā ir katra veida uzvednes, un tā skaidri norāda, kur katrs no tiem beidzas.

Ko ChatGPT var un ko nevar paveikt pats

ChatGPT ir ļoti labs rakstīt: kodu, virsrakstus, lapu tekstus un plānus. Uzreiz pēc uzstādīšanas tas nav mitināšanas uzņēmums. Tas nepiešķir jūsu vietnei publisko adresi, neuztur datubāzi un nesaglabā vietnes failus starp projektiem tā, kā to dara būvētājs. Katrs tālāk aprakstītais veids ir citāds risinājums šai atšķirībai.

1. veids: ChatGPT raksta kodu, jūs to hostējat

Tā ir klasiskā pieeja, un tā labi darbojas vienkāršai statiskai vietnei: portfolio, nosēšanās lapai, kāzu lapai.

1. solis: lūdziet pilnīgu vienfailu lapu

Norādiet precīzi saturu un izkārtojumu:

Uzrakstiet pilnīgu vienlapas mājaslapu kā vienu HTML failu ar CSS iekš style taga. Tā ir Maijai Haddadai, neatkarīgai ilustratorei Ammanā. Sadaļas: galvene ar viņas vārdu un „Ilustrācijas grāmatām un zīmoliem”, režģis ar sešiem portfolio attēliem (izmantojiet vietturu attēlu ceļus, ko varēšu nomainīt), īss par sevi teksts, trīs pakalpojumu saraksts ar sākuma cenām un kontaktu sadaļa ar e-pasta adresi kā mailto saiti. Tīrs, mūsdienīgs dizains, daudz balta lauka, darbojas uz tālruņiem. Bez JavaScript ietvarstruktūrām.

Viena faila lūgšana atvieglo saglabāšanu un augšupielādi.

2. solis: saglabājiet un atveriet

Ielieciet kodu teksta redaktorā, saglabājiet kā index.html un atveriet pārlūkā. Ja kaut kas izskatās nepareizi, aprakstiet to ChatGPT: „attēlu režģis darbvirsmā ir viena kolonna; padariet trīs kolonnas virs 900 px platuma.”

3. solis: aizstājiet vietturus

Aizstājiet vietturu attēlus ar saviem un nomainiet visu tekstu, ko ChatGPT izdomājis. Rūpīgi pārbaudiet cenas, e-pastus un vārdus; AI aizpilda robus pārliecinoši.

4. solis: ievietojiet tiešsaistē

Augšupielādējiet failu bezmaksas statiskā hostingā, piemēram, GitHub Pages, vai jebkurā tīmekļa hostingā, par ko jau maksājat. Saņemsiet publisku adresi. Lai izmantotu savu domēnu, sekojiet hostinga pakalpojuma norādījumiem; mūsu rokasgrāmata par pielāgota domēna pieslēgšanu izskaidro DNS daļu.

Kur 1. veids beidzas

• Formas, kas saglabā datus. Kontaktforma kaut kur ir jānosūta. Vajadzēs formu pakalpojumu vai serveri.
• Pieteikšanās un dalībnieku zonas. Tām nepieciešama aizmugures daļa un datubāze.
• Daudzas lapas. Galvenes un izvēlnes saskaņošana desmit ar rokām ielīmētos failos kļūst garlaicīga.
• Atjauninājumi. Katrai izmaiņai jālūdz jauns kods, jāielīmē un atkal jāaugšupielādē.

2. veids: ChatGPT plāno, būvētājs veido

Šeit ChatGPT veic domāšanu un rakstīšanu, bet mājaslapu būvētājs veido un hostē.

1. solis: ar ChatGPT saplānojiet vietni

Es vadu mazu ģimenes maizes ceptuvi Mančestrā, kas pieņem kūku pasūtījumus. Ieteiciet lapas, kas manai mājaslapai vajadzīgas, ko katrā lapā vajadzētu teikt un vienu darbību, ko apmeklētājam vajag veikt katrā lapā. Paturiet to līdz pieciem lapām.

2. solis: uzrakstiet tekstu

Lūdziet katras lapas tekstu, pēc tam to pārrakstiet savā balsī. Pievienojiet reālas detaļas, ko ChatGPT nevar zināt: darba laiku, cenas, piegādes zonas, to, kas jūsu kūkas atšķir no citām.

3. solis: veidojiet būvētājā

Ielieciet plānu un tekstu mājaslapu būvētājā. Vilkšanas un nomešanas rīkā teksts tiek ielikts sagatavē. AI būvētājā varat visu plānu nodot vienā ziņā, un tas izveido lapas; piemēram, Mythex mājaslapu būvētājā:

Izveidojiet mājaslapu ģimenes maizes ceptuvei Mančestrā, izmantojot šo plānu un tekstu: [ielīmēt]. Iekļaujiet pasūtījuma pieprasījuma formu, kas saglabā katru pieprasījumu (vārds, tālrunis, kūkas veids, vajadzīgais datums, ziņojums), lai es tos varētu redzēt administratora lapā, kurā var pieslēgties tikai es. Silts, mājīgs dizains, darbojas uz tālruņiem.

Šeit pasūtījumu forma saglabājas īstā datubāzē, ko ielīmēts HTML fails nevarētu. Vairāk par šo ceļu skatiet kā izveidot mājaslapu ar AI.

3. veids: publicēšana tieši no ChatGPT

Jaunākā iespēja ir savienot būvētāju ar ChatGPT, lai ChatGPT varētu tieši izmantot būvētāja rīkus. Jūs paliekat ChatGPT sarunā; būvētājs nodrošina projektu, priekšskatījumu, datubāzi un hostingu.

Mythex darbojas šādi caur savu ChatGPT lietotni (MCP savienotājs). Savienojumu veidojat Mythex konta iestatījumos; savienošana darbojas jebkurā plānā, bet rīki, kas darbina jūsu projekta smilškasti, prasa Pro plānu. Kad savienojums ir izveidots, varat ChatGPT lūgt kaut ko līdzīgu:

Izmantojot Mythex, izveidojiet jaunu mājaslapu manai maizes ceptuvei ar sākumlapu, ēdienkartes lapu ar kūkām un cenām un pasūtījuma pieprasījuma formu, kas saglabājas datubāzē. Parādiet man priekšskatījumu un publicējiet, kad teikšu, ka izskatās labi.

Tad ChatGPT izveido projektu, raksta kodu, palaiž to un, kad apstiprināt, publicē publiskā URL. Izmaiņas ir tikai jaunas ziņas tajā pašā sarunā. Tā pati savienotāju pieeja darbojas arī ar Claude, Cursor un Codex. Par to, kā tas strādā un kuri būvētāji to atbalsta, skatiet AI lietotņu būvētājus ar MCP.

Kuru veidu izvēlēties?

Uzvedņu padomi, kas darbojas jebkurā veidā

• Sniedziet reālus faktus uzreiz. Vārds, atrašanās vieta, pakalpojumi, cenas, kontaktinformācija. Jo mazāk izdomātu detaļu, jo mazāk jātīra.
• Aprakstiet apmeklētāju un mērķi. „Vecāks, kurš meklē dzimšanas dienas kūku un beigās nosūta pasūtījuma pieprasījumu.”
• Lūdziet izkārtojumus, kas vispirms domāti tālruņiem. Lielākā daļa apmeklētāju izmanto tālruņus.
• Mainiet vienu lietu vienā ziņā, kad pirmā versija ir gatava.
• Skaidri pieprasiet SEO pamatus: unikālu virsrakstu un aprakstu katrai lapai, īstus virsrakstus, alt tekstu attēliem. Skatiet SEO AI veidotām mājaslapām.

Mūsu rokasgrāmatā par uzvedņu rakstīšanu AI lietotņu būvētājiem ir vairāk piemēru.

Biežākās problēmas un risinājumi

• Dizains izskatās vispārīgs. Dodiet atsauci: „kā mierīga skandināviska kafejnīca, daudz baltā un viens pieklusināts zaļš tons”.
• Kods tika pārtraukts. Lūdziet ChatGPT turpināt no pēdējās rindas vai sadalīt lapu sadaļās un dot pa vienai.
• Tas izdomāja atsauksmes vai statistiku. Izņemiet tās. Viltotas atsauksmes graujas uzticēšanos, un daudzviet tās ir pretrunā ar patērētāju tiesību noteikumiem.
• Vietne pēc izmaiņas salūst. Pirms jauna koda ielīmēšanas saglabājiet pēdējo strādājošo versiju. Būvētāji, piemēram, Mythex, glabā kontrolpunktus, lai varētu atgriezties.

Pirms publicēšanas

Izlasiet katru vārdu katrā lapā. Pārbaudiet, vai kontaktinformācija darbojas. Atveriet vietni tālrunī. Pārliecinieties, ka visi attēli ir jūsu vai pareizi licencēti. Tad publicējiet un dalieties tur, kur jau atrodas jūsu apmeklētāji. Ja viss jāizmaksā nulle, kā izveidot mājaslapu bez maksas detalizētāk apskata bezmaksas hostinga iespējas.

Jautājumi