Slik lager du en nettside med ChatGPT: tre måter som fungerer

For å lage en nettside med ChatGPT kan du be den skrive HTML og CSS for siden og deretter legge filene ut på en hostingtjeneste selv, bruke den til å planlegge sidene og skrive teksten før du bygger i en nettsidebygger, eller koble til en AI-bygger som Mythex i ChatGPT slik at den kan bygge, hoste og publisere siden for deg fra samme chat. Den første måten er gratis og fin for en enkel side; den tredje er det du vil ha når siden trenger skjemaer som lagrer data, innlogging eller jevnlige oppdateringer. Denne guiden viser hver metode med ledetekster, og er tydelig på hvor hver av dem stopper.

Hva ChatGPT kan og ikke kan gjøre alene

ChatGPT er veldig god til å skrive: kode, overskrifter, sidetekst og planer. Rett ut av boksen er den ikke et hostingselskap. Den gir ikke nettstedet ditt en offentlig adresse, den kjører ikke en database, og den tar ikke vare på nettstedets filer mellom prosjekter slik en bygger gjør. Hver metode under er et annet svar på dette gapet.

Metode 1: ChatGPT skriver koden, du hoster den

Dette er den klassiske tilnærmingen og fungerer godt for en enkel, statisk side: en portefølje, en landingsside, en bryllupsside.

Steg 1: Be om en komplett side i én fil

Vær konkret om innhold og layout:

Skriv en komplett enkeltside for nettsted som én HTML-fil, med CSS inni en style-tagg. Den er for Maya Haddad, en frilanseillustratør i Amman. Seksjoner: en topptekst med navnet hennes og «Illustrasjon for bøker og merkevarer», et rutenett med seks porteføljebilder (bruk plassholderbaner jeg kan erstatte), et kort avsnitt om henne, en liste med tre tjenester med startpriser, og en kontaktseksjon med e-posten hennes som mailto-lenke. Rent, moderne, god luft, fungerer på mobil. Ingen JavaScript-rammeverk.

Én fil gjør det enkelt å lagre og laste opp.

Steg 2: Lagre og åpne

Kopier koden inn i en tekstredigerer, lagre den som index.html og åpne den i nettleseren. Hvis noe ser feil ut, beskriv det for ChatGPT: «bildegalleriet er én kolonne på desktop; gjør det til tre kolonner over 900 piksler bredt.»

Steg 3: Erstatt plassholdere

Bytt plassholderbildene med dine egne, og erstatt tekst ChatGPT har funnet på. Sjekk priser, e-poster og navn nøye; AI fyller hull med stor selvsikkerhet.

Steg 4: Legg den ut på nettet

Last opp filen til en gratis statisk hosting som GitHub Pages, eller til en webhost du allerede betaler for. Da får du en offentlig adresse. For å bruke ditt eget domene, følg hostens instruksjoner; vår guide om å koble til eget domene forklarer DNS-delen.

Der metode 1 stopper

• Skjemaer som lagrer data. Et kontaktskjema trenger et sted å sende innleveringene. Du trenger en skjematjeneste eller en server.
• Innlogging og medlemsområder. Dette krever en backend og en database.
• Mange sider. Å holde topptekst og meny konsekvent på ti håndlimte filer blir kjedelig.
• Oppdateringer. Hver endring betyr at du ber om ny kode, limer den inn og laster opp på nytt.

Metode 2: ChatGPT planlegger, en bygger lager siden

Her gjør ChatGPT tenkingen og skrivingen, og en nettsidebygger gjør bygging og hosting.

Steg 1: Planlegg siden med ChatGPT

Jeg driver et lite familiebakeri i Manchester som tar imot kakebestillinger. Foreslå sidene nettstedet mitt trenger, hva hver side skal si, og den ene handlingen jeg vil at besøkende skal ta på hver side. Hold det på fem sider eller færre.

Steg 2: Skriv teksten

Be om teksten for hver side, og skriv den om med din egen stemme. Legg til ekte detaljer ChatGPT ikke kan vite: åpningstider, priser, leveringsområder og hva som gjør kakene dine annerledes.

Steg 3: Bygg den i en bygger

Lim inn planen og teksten i en nettsidebygger. I et dra-og-slipp-verktøy plasserer du teksten i en mal. I en AI-bygger kan du gi hele planen som én melding, og den bygger sidene; for eksempel i Mythex-nettsidebyggeren:

Bygg et nettsted for et familiebakeri i Manchester basert på denne planen og teksten: [lim inn]. Inkluder et bestillingsskjema som lagrer hver forespørsel (navn, telefon, kaketype, dato og melding), slik at jeg kan se dem på en adminside som bare jeg kan logge inn på. Varm, hjemlig design, fungerer på mobil.

Bestillingsskjemaet her lagrer til en ekte database, noe en limt HTML-fil ikke kunne gjøre. For mer om denne veien, se hvordan lage en nettside med AI.

Metode 3: Bygg og publiser fra inni ChatGPT

Det nyeste alternativet er å koble en bygger til ChatGPT slik at ChatGPT kan bruke byggerens verktøy direkte. Du blir i ChatGPT-samtalen; byggeren leverer prosjektet, forhåndsvisningen, databasen og hostingen.

Mythex fungerer slik gjennom sin ChatGPT-app (en MCP-konnektor). Du kobler den til fra Kontoinnstillinger i Mythex; tilkobling fungerer på alle abonnementer, og verktøyene som kjører prosjektets sandkasse krever Pro. Når den er koblet til, kan du be ChatGPT om noe slikt:

Bruk Mythex til å lage et nytt nettsted for bakeriet mitt med en forside, en menyside med kaker og priser, og et bestillingsskjema som lagrer til en database. Vis meg forhåndsvisningen, og publiser den når jeg sier at den ser bra ut.

ChatGPT oppretter da prosjektet, skriver koden, kjører den og publiserer den på en offentlig URL når du godkjenner. Endringer er bare flere meldinger i samme chat. Den samme konnektortilnærmingen fungerer også fra Claude, Cursor og Codex. For bakgrunn om hvordan dette fungerer, og hvilke byggere som støtter det, se AI-appbyggere med MCP.

Hvilken metode bør du velge?

Tips til ledetekster som fungerer for alle metoder

• Gi reelle fakta først. Navn, sted, tjenester, priser, kontaktopplysninger. Færre oppdiktede detaljer betyr mindre opprydding.
• Beskriv besøkende og målet. «En forelder som leter etter en bursdagskake, og som skal ende opp med å sende en bestillingsforespørsel.»
• Be om layout som starter på telefon. De fleste besøkende bruker telefon.
• Endre én ting per melding når første versjon finnes.
• Be eksplisitt om SEO-grunnleggende: en unik tittel og beskrivelse per side, ekte overskrifter og alt-tekst på bilder. Se SEO for AI-bygde nettsider.

Vår guide til å skrive ledetekster for AI-appbyggere har flere mønstre.

Vanlige problemer og løsninger

• Designet ser generisk ut. Gi en referanse: «som et rolig skandinavisk kafé, mye hvitt og én dempet grønnfarge».
• Koden ble kuttet av. Be ChatGPT fortsette fra siste linje, eller del siden i seksjoner og få dem én om gangen.
• Den fant på anmeldelser eller statistikk. Fjern dem. Falske anmeldelser ødelegger tilliten, og de er mange steder i strid med forbrukerregler.
• Siden brekker etter en endring. Behold en kopi av den siste fungerende versjonen før du limer inn ny kode. Byggere som Mythex lagrer sjekkpunkter, slik at du kan gå tilbake.

Før du publiserer

Les hvert ord på hver side. Sjekk at kontaktopplysningene fungerer. Åpne siden på en telefon. Sørg for at bildene er dine eller har riktig lisens. Publiser deretter, og del det der besøkende allerede er. Hvis du vil at alt skal koste null, dekker hvordan lage en nettside gratis de gratis hostingalternativene mer i detalj.

Spørsmål