Verkkosivun tekeminen ChatGPT:llä: kolme toimivaa tapaa

Verkkosivun voi tehdä ChatGPT:llä kolmella tavalla. Voit pyytää sitä kirjoittamaan sivuston HTML- ja CSS-koodin ja laittaa tiedostot itse isännöintipalveluun. Voit käyttää sitä myös sivujen suunnitteluun ja tekstien kirjoittamiseen ennen kuin rakennat sivuston verkkosivurakentajalla. Tai voit yhdistää ChatGPT:hen AI-rakentajan, kuten Mythexin, joka voi rakentaa, isännöidä ja julkaista sivuston suoraan samasta keskustelusta. Ensimmäinen tapa on ilmainen ja sopii yhden sivun sivustolle. Kolmas on tarpeen, kun sivustolla on lomakkeita, jotka tallentavat tietoja, kirjautumisia tai säännöllisiä päivityksiä. Tämä opas näyttää jokaisen tavan kehotteineen ja kertoo selvästi, missä kukin lakkaa riittämästä.

Mitä ChatGPT osaa ja mitä ei yksin

ChatGPT on erittäin hyvä kirjoittamisessa: koodissa, otsikoissa, sivutekstissä ja suunnitelmissa. Sellaisenaan se ei kuitenkaan ole isännöintiyritys. Se ei anna sivustollesi julkista osoitetta, se ei pidä tietokantaa käynnissä eikä säilytä sivustosi tiedostoja projektien välillä niin kuin rakentaja tekee. Jokainen alla kuvattu tapa on eri vastaus tähän aukkoon.

Tapa 1: ChatGPT kirjoittaa koodin, sinä isännöit sen

Tämä on klassinen tapa, ja se toimii hyvin yksinkertaiselle staattiselle sivustolle, kuten portfoliolle, laskeutumissivulle tai hääsivulle.

Vaihe 1: pyydä täydellinen, yhden tiedoston sivu

Ole tarkka sisällöstä ja asettelusta:

Kirjoita täydellinen yhden sivun verkkosivu yhtenä HTML-tiedostona, jonka CSS on style-tagin sisällä. Sivu on Maya Haddadille, freelance-kuvittajalle Ammanissa. Osiot: ylätunniste, jossa on hänen nimensä ja teksti ”Kuvitusta kirjoille ja brändeille”, kuuden kuvan portfolioruudukko (käytä paikanvaraajien kuvapolkuja, jotka voin korvata), lyhyt tietoteksti, lista kolmesta palvelusta aloitushintoineen sekä yhteystietojen osio, jossa on sähköpostiosoite mailto-linkkinä. Siisti, moderni ilme, runsaasti tyhjää tilaa, toimii puhelimella. Ei JavaScript-kehyksiä.

Yksi tiedosto pitää tallentamisen ja lataamisen helppona.

Vaihe 2: tallenna ja avaa

Kopioi koodi tekstieditoriin, tallenna se nimellä index.html ja avaa se selaimessa. Jos jokin näyttää väärältä, kuvaile se ChatGPT:lle: ”kuvaruudukko on yksi sarake työpöydällä; tee siitä kolme saraketta yli 900 pikselin leveydellä.”

Vaihe 3: korvaa paikanvaraajat

Vaihda paikanvaraajakuvat omiisi ja korvaa kaikki teksti, jonka ChatGPT keksi. Tarkista hinnat, sähköpostiosoitteet ja nimet huolellisesti, sillä tekoäly täyttää aukot varmalta näyttävällä tekstillä.

Vaihe 4: vie se verkkoon

Lataa tiedosto ilmaiseen staattiseen isännöintiin, kuten GitHub Pagesiin, tai mihin tahansa verkkopalveluun, josta maksat jo. Saat julkisen osoitteen. Jos haluat oman verkkotunnuksen, seuraa isännöintipalvelusi ohjeita. Oppaamme oman verkkotunnuksen liittämisestä selittää DNS-osan.

Missä tapa 1 lakkaa riittämästä

• Lomakkeet, jotka tallentavat tietoja. Yhteydenottolomake tarvitsee paikan, johon lähetykset menevät. Tarvitset lomakepalvelun tai palvelimen.
• Kirjautumiset ja jäsenalueet. Ne vaativat taustapalvelun ja tietokannan.
• Monta sivua. Ylätunnisteiden ja valikoiden pitäminen yhtenäisinä kymmenessä käsin liitetyssä tiedostossa on työlästä.
• Päivitykset. Jokainen muutos tarkoittaa uuden koodin pyytämistä, liittämistä ja uudelleen lataamista.

Tapa 2: ChatGPT suunnittelee, rakentaja rakentaa

Tässä ChatGPT hoitaa ajattelun ja kirjoittamisen, ja verkkosivurakentaja hoitaa rakentamisen ja isännöinnin.

Vaihe 1: suunnittele sivusto ChatGPT:llä

Pyöritän pientä perheleipomoa Manchesterissa, joka ottaa tilauksia kakuille. Ehdota sivut, joita verkkosivuni tarvitsee, mitä kukin sivu sanoo ja se yksi toiminto, jonka haluan kävijöiden tekevän kullakin sivulla. Pidä se enintään viidessä sivussa.

Vaihe 2: kirjoita teksti

Pyydä jokaisen sivun teksti ja kirjoita se uudelleen omalla äänelläsi. Lisää todelliset tiedot, joita ChatGPT ei voi tietää: aukioloajat, hinnat, toimitusalueet ja se, mikä tekee kakuistasi erilaisia.

Vaihe 3: rakenna rakentajalla

Liitä suunnitelma ja teksti verkkosivurakentajaan. Vedä ja pudota -rakentajassa sijoitat tekstin malliin. AI-rakentajassa voit antaa koko suunnitelman yhdessä viestissä, ja se rakentaa sivut. Esimerkiksi Mythex-verkkosivurakentajassa:

Rakenna verkkosivu perheleipomolle Manchesterissa tämän suunnitelman ja tekstin pohjalta: [liitä]. Lisää tilauslomake, joka tallentaa jokaisen pyynnön (nimi, puhelin, kakkutyyppi, tarvittava päivämäärä, viesti), jotta voin nähdä ne ylläpitosivulla, johon vain minä kirjaudun. Lämmin, kotoisa ulkoasu, toimii puhelimella.

Tilauslomake tallentaa tässä oikeaan tietokantaan, mitä liitetty HTML-tiedosto ei pystyisi tekemään. Lisää tästä reitistä on oppaassamme verkkosivun tekeminen tekoälyllä.

Tapa 3: rakenna ja julkaise ChatGPT:n sisältä

Uusin vaihtoehto on yhdistää rakentaja ChatGPT:hen, jolloin ChatGPT voi käyttää rakentajan työkaluja suoraan. Pysyt ChatGPT-keskustelussa, ja rakentaja tarjoaa projektin, esikatselun, tietokannan ja isännöinnin.

Mythex toimii tämän ChatGPT-sovelluksensa kautta (MCP-yhdistäjä). Yhdistät sen Mythexin tilin asetuksista. Yhdistäminen onnistuu millä tahansa suunnitelmalla, mutta projektisi hiekkalaatikon ajavat työkalut vaativat Pro-suunnitelman. Kun yhteys on tehty, voit pyytää esimerkiksi:

Luo Mythexin avulla uusi verkkosivu leipomolleni: etusivu, valikkosivu kakuista ja hinnoista sekä tilauslomake, joka tallentaa tietokantaan. Näytä minulle esikatselu ja julkaise se, kun sanon sen olevan hyvä.

ChatGPT luo projektin, kirjoittaa koodin, ajaa sen ja julkaisee sen julkiseen osoitteeseen, kun hyväksyt. Muutokset ovat vain lisää viestejä samassa keskustelussa. Sama yhdistäjätapa toimii myös Claudesta, Cursorista ja Codexista. Taustatietoa tästä toiminnasta ja siitä, mitkä rakentajat sitä tukevat, löytyy oppaasta AI-sovellusrakentajat MCP:llä.

Mikä tapa kannattaa valita?

Kehotevinkkejä, jotka toimivat kaikissa tavoissa

• Anna todelliset tiedot heti alussa. Nimi, sijainti, palvelut, hinnat ja yhteystiedot. Mitä vähemmän keksittyjä yksityiskohtia, sitä vähemmän siivottavaa.
• Kuvaile kävijä ja tavoite. ”Vanhempi, joka etsii syntymäpäiväkakkua ja joka lopulta lähettää tilauspyynnön.”
• Pyydä puhelimelle sopivia asetteluja. Suurin osa kävijöistä käyttää puhelinta.
• Muuta yhtä asiaa kerrallaan, kun ensimmäinen versio on olemassa.
• Pyydä hakukoneoptimoinnin perusteet nimenomaisesti: yksilöllinen otsikko ja kuvaus jokaiselle sivulle, oikeat väliotsikot ja alt-teksti kuville. Katso hakukoneoptimointi tekoälyllä rakennetuille verkkosivuille.

Oppaamme kehotteiden kirjoittamisesta AI-sovellusrakentajille sisältää lisää malleja.

Yleisiä ongelmia ja korjauksia

• Ulkoasu näyttää geneeriseltä. Anna viite: ”kuin rauhallinen skandinaavinen kahvila, paljon valkoista ja yksi vaimea vihreä”.
• Koodi katkesi. Pyydä ChatGPT:tä jatkamaan viimeisestä rivistä tai jakamaan sivu osiin ja antamaan ne yksi kerrallaan.
• Se keksi arvosteluja tai tilastoja. Poista ne. Väärennetyt arvostelut heikentävät luottamusta, ja monissa maissa ne ovat kuluttajansuojasäännösten vastaisia.
• Sivusto hajoaa muutoksen jälkeen. Säilytä kopio edellisestä toimivasta versiosta ennen uuden koodin liittämistä. Rakentajat, kuten Mythex, tallentavat tarkistuspisteitä, joihin voi palata.

Ennen julkaisua

Lue jokainen sana jokaisella sivulla. Tarkista, että yhteystiedot toimivat. Avaa sivusto puhelimella. Varmista, että kuvat ovat omiasi tai asianmukaisesti lisensoituja. Julkaise sitten ja jaa sivu sinne, missä kävijäsi jo ovat. Jos haluat koko jutun maksavan nollaa, verkkosivun tekeminen ilmaiseksi käy läpi ilmaiset isännöintivaihtoehdot tarkemmin.

Kysymykset