Sådan laver du en hjemmeside med ChatGPT: tre metoder der virker

Du laver en hjemmeside med ChatGPT ved at bede den skrive sidens HTML og CSS og så lægge filerne på en hostingtjeneste selv, bruge den til at planlægge siderne og skrive teksten, før du bygger i en hjemmesidebygger, eller forbinde en AI-builder som Mythex i ChatGPT, så den kan bygge, hoste og udgive siden for dig fra samme chat. Den første metode er gratis og fin til en enkelt side; den tredje er det, du vil have, når siden skal have formularer der gemmer data, logins eller jævnlige opdateringer. Denne guide viser hver metode med prompts og er tydelig om, hvor hver af dem stopper.

Hvad ChatGPT kan og ikke kan selv

ChatGPT er meget god til at skrive: kode, overskrifter, sidetekst og planer. Lige ud af boksen er den ikke et hostingfirma. Den giver ikke din side en offentlig adresse, den kører ikke en database, og den gemmer ikke din sides filer mellem projekter, sådan som en builder gør. Hver metode nedenfor er et svar på netop dette hul.

Metode 1: ChatGPT skriver koden, du hoster den

Det er den klassiske tilgang, og den fungerer godt for en enkel, statisk side: en portfolio, en landingsside, en bryllupsside.

Trin 1: Bed om en komplet side i én fil

Vær konkret om indhold og layout:

Skriv en komplet hjemmeside på én side som én HTML-fil med CSS inde i en style-tag. Den er til Maya Haddad, en freelance-illustrator i Amman. Sektioner: en header med hendes navn og „Illustration til bøger og brands“, et gitter med seks portfolio-billeder (brug pladsholder-stier, jeg kan erstatte dem), et kort om-afsnit, en liste over tre ydelser med startpriser, og en kontaktsektion med hendes e-mail som mailto-link. Rent, moderne design med god luft, virker på telefoner. Ingen JavaScript-frameworks.

At bede om én fil gør det enkelt at gemme og uploade.

Trin 2: Gem og åbn den

Kopiér koden ind i en teksteditor, gem den som index.html, og åbn den i din browser. Hvis noget ser forkert ud, så beskriv det til ChatGPT: „billedgitteret er én kolonne på desktop; gør det til tre kolonner over 900 px bredde.“

Trin 3: Erstat pladsholderne

Byt pladsholder-billederne ud med dine egne, og erstat den tekst ChatGPT har fundet på. Tjek priser, e-mails og navne grundigt; AI udfylder huller med stor selvsikkerhed.

Trin 4: Læg den online

Upload filen til en gratis statisk host som GitHub Pages, eller til en webhost du allerede betaler for. Du får en offentlig adresse. Vil du bruge dit eget domæne, så følg din hosts vejledning; vores guide til at forbinde et eget domæne forklarer DNS-delen.

Hvor metode 1 stopper

• Formularer der gemmer data. En kontaktformular har brug for et sted at sende indsendelserne hen. Du skal bruge en formulartjeneste eller en server.
• Logins og medlemsområder. De kræver en backend og en database.
• Mange sider. Det bliver kedeligt at holde header og menu ens på ti håndkopierede filer.
• Opdateringer. Hver ændring betyder, at du beder om ny kode, indsætter den og uploader igen.

Metode 2: ChatGPT planlægger, en builder bygger

Her klarer ChatGPT tænkningen og skrivningen, og en hjemmesidebygger står for bygningen og hostingen.

Trin 1: Planlæg siden med ChatGPT

Jeg driver et lille familiebageri i Manchester, der tager bestillinger på kager. Foreslå de sider, min hjemmeside skal have, hvad hver side skal sige, og den ene handling jeg vil have besøgende til at tage på hver side. Hold det til fem sider eller færre.

Trin 2: Skriv teksten

Bed om teksten til hver side, og omskriv den i din egen stemme. Tilføj de rigtige detaljer, ChatGPT ikke kan vide: åbningstider, priser, leveringsområder og det, der gør dine kager anderledes.

Trin 3: Byg den i en builder

Indsæt planen og teksten i en hjemmesidebygger. I et drag-and-drop-værktøj placerer du teksten i en skabelon. I en AI-builder kan du give hele planen som én besked, og den bygger siderne; for eksempel i Mythex hjemmesidebygger:

Byg en hjemmeside til et familiebageri i Manchester ud fra denne plan og tekst: [indsæt]. Inkluder en bestillingsformular, der gemmer hver forespørgsel (navn, telefon, kagetype, dato og besked), så jeg kan se dem på en admin-side, som kun jeg kan logge ind på. Varmt, hjemligt design, der virker på telefoner.

Bestillingsformularen her gemmes i en rigtig database, hvilket en indsat HTML-fil ikke kan. For mere om denne vej, se hvordan du bygger en hjemmeside med AI.

Metode 3: Byg og udgiv fra inde i ChatGPT

Den nyeste mulighed er at forbinde en builder til ChatGPT, så ChatGPT kan bruge builderens værktøjer direkte. Du bliver i ChatGPT-samtalen; builderen leverer projektet, forhåndsvisningen, databasen og hostingen.

Mythex fungerer på denne måde via sin ChatGPT-app (en MCP-connector). Du forbinder den fra Kontoindstillinger i Mythex; forbindelsen virker på alle abonnementer, og de værktøjer, der kører dit projekts sandkasse, kræver Pro. Når den er forbundet, kan du spørge ChatGPT noget som:

Brug Mythex til at oprette en ny hjemmeside til mit bageri med en forside, en menuside med kager og priser og en bestillingsformular, der gemmer til en database. Vis mig forhåndsvisningen, og udgiv den, når jeg siger, at den ser rigtig ud.

ChatGPT opretter så projektet, skriver koden, kører den og udgiver den til en offentlig URL, når du godkender. Ændringer er blot flere beskeder i samme chat. Den samme connector-tilgang virker også fra Claude, Cursor og Codex. For baggrund om hvordan det fungerer, og hvilke builders der understøtter det, se AI-app-builders med MCP.

Hvilken metode skal du vælge?

Prompt-tips, der virker til alle metoder

• Giv rigtige fakta fra start. Navn, sted, ydelser, priser og kontaktoplysninger. Færre opfundne detaljer betyder mindre oprydning.
• Beskriv den besøgende og målet. „En forælder der leder efter en fødselsdagskage, og som ender med at sende en bestillingsforespørgsel.“
• Bed om layouts, der starter på telefonen. De fleste besøgende bruger telefoner.
• Ændr én ting pr. besked, når den første version findes.
• Bed eksplicit om SEO-grundlaget: en unik titel og beskrivelse pr. side, rigtige overskrifter og alt-tekst på billeder. Se SEO til AI-byggede hjemmesider.

Vores guide til at skrive prompts til AI-app-builders har flere mønstre.

Almindelige problemer og løsninger

• Designet ser generisk ud. Giv en reference: „som et roligt skandinavisk café-miljø, masser af hvidt og én dæmpet grøn.“
• Koden blev afkortet. Bed ChatGPT om at fortsætte fra sidste linje, eller at dele siden op i sektioner og give dig én ad gangen.
• Den har opfundet anmeldelser eller statistikker. Fjern dem. Falske anmeldelser skader tilliden, og de er mange steder i strid med forbrugerbeskyttelsesregler.
• Siden går i stykker efter en ændring. Gem en kopi af den sidste fungerende version, før du indsætter ny kode. Builders som Mythex gemmer checkpoints, så du kan rulle tilbage.

Før du udgiver

Læs hvert ord på hver side. Tjek at kontaktoplysningerne virker. Åbn siden på en telefon. Sørg for, at billederne er dine egne eller korrekt licenserede. Udgiv derefter, og del den der, hvor dine besøgende allerede er. Hvis du vil have det hele til at koste nul, dækker sådan laver du en hjemmeside gratis de gratis hostingmuligheder mere detaljeret.

Spørgsmål