Bygg din första webbplats med AI – från idé till publicering

1. Du behöver inte kunna programmera

Tidigare behövde du ofta anlita en utvecklare, lära dig ett tekniskt verktyg eller utgå från en färdig mall för att bygga en webbplats. Nu kan du beskriva vad du vill bygga och låta AI ta fram en första version som du själv kan prova.

Du behöver fortfarande veta vem du bygger för, vad sidan ska hjälpa besökaren att göra och om resultatet fungerar i praktiken. Det är sådant du kan bedöma även om du aldrig har skrivit en rad kod.

2. Börja med syftet – inte designen

Skriv ner svaren på tre frågor.

Vem ska besöka webbplatsen?
Vad vill jag erbjuda?
Vad vill jag att besökaren ska göra?

Tänk dig ett litet konsultföretag som hjälper butiker att få ordning på sina lagersaldon. Besökaren är en butikschef som ofta hittar fel i lagret. Erbjudandet är en genomgång av butikens lagerrutiner. Nästa steg är att boka ett första samtal.

För det räcker det att börja med en enkel startsida som beskriver tjänsten och gör det lätt att ta kontakt. När du vet vad besökarna behöver mer hjälp med kan du bygga vidare.

3. Så lärde jag mig att bygga med AI

Jag började bygga simflexity.com i Lovable. Det var ett bra sätt att komma igång. Jag kunde prova olika sätt att lägga upp design, innehåll och funktioner och direkt se vad som hände.

Framför allt lärde jag mig hur utveckling med AI fungerar. Jag blev bättre på att formulera instruktioner, granska resultatet och förstå hur olika delar av webbplatsen hänger ihop.

Jag använde ChatGPT och Lovable tillsammans. Först bollade jag idén i ChatGPT och bad om hjälp att göra instruktionen tydlig. Sedan klistrade jag in den färdiga prompten i Lovable. Det är ett arbetssätt jag rekommenderar. Om du reder ut vad du vill bygga i förväg kan du behöva färre omgångar i Lovable och spara på de krediter du använder där. Lovable om ChatGPT och krediter

Efter hand flyttade jag utvecklingen av simflexity.com till Codex. Det blev en naturlig fortsättning när jag hade fått mer erfarenhet. För mig var tiden i Lovable viktig. Den gav mig en förståelse jag saknade från början. Om verktyget du börjar med fortsätter att passa projektet kan du fortsätta bygga där.

4. Vilket AI-verktyg ska du välja?

Lovable – mitt råd till nybörjare

Om du aldrig har byggt en webbplats rekommenderar jag att börja med Lovable. Beskriv vad du vill skapa och prova den version du får upp i webbläsaren. Du kan ändra designen, testa idéer och bygga vidare utan att kunna programmera. Lovables dokumentation

Claude Code – ett alternativ för fortsatt utveckling

Jag använder Claude för utvecklingen av min CRM-app, ett verktyg för att hålla ordning på kundrelationer. Det fungerar bra för det projektet. Med Claude Code kan du arbeta direkt i ett utvecklingsprojekt och få hjälp av AI att läsa och ändra filer och köra tester. Claude Code-dokumentationen

Codex – mitt personliga förstaval

Jag använder Codex för bland annat simflexity.com, help.simflexity.com och Mikroentreprenör. Jag har använt ChatGPT i många år och är van vid miljön. Därför känns Codex naturligt för mig. Vilket verktyg som passar dig beror mycket på vad du är van vid och hur du vill arbeta. OpenAI Docs om Codex

Behöver man använda flera verktyg?

Jag använder olika verktyg för olika projekt. För dig som börjar kan det vara enklare att lära känna ett verktyg ordentligt.

Börja i Lovable. Fortsätt där så länge det fungerar. Gå vidare till Claude Code eller Codex när du känner dig redo och vill ha mer kontroll.

5. Varför jag avråder från WordPress

Jag ser WordPress som ett äldre sätt att bygga webbplatser. Att få teman, tillägg och inställningar att fungera ihop kunde ta tid och kosta pengar. När jag börjar från noll i dag vill jag kunna beskriva vad jag behöver och snabbt få en version att prova. Mitt råd är att lägga tiden på att lära dig bygga med AI. Det är den väg jag själv skulle välja.

6. Så planerar du din första webbplats

Startsida. Vad erbjuder du och för vem?
Tjänster eller produkter. Vad kan kunden köpa och vad ingår?
Om oss. Vem står bakom företaget?
Kontakt. Hur når kunden dig?

Det här kan vara fyra avsnitt på samma sida. Börja med att göra erbjudandet och kontaktvägen tydliga. När de fungerar kan du lägga mer tid på designen och dela upp innehållet på fler sidor om det behövs.

7. Så ger du AI bra instruktioner

En prompt är instruktionen du ger till AI-verktyget. Kopiera exemplet och fyll i uppgifterna inom hakparenteser.

Jag vill bygga en enkel webbplats för mitt företag.

Företaget erbjuder [produkt eller tjänst].

Målgruppen är [beskriv målgruppen].

Webbplatsens viktigaste uppgift är att [vad besökaren ska göra].

Jag vill börja med en startsida, en sida som beskriver mitt erbjudande och en kontaktsida.

Designen ska vara enkel, professionell och fungera bra i mobilen.

Börja med att föreslå en struktur och ställ frågor om något viktigt saknas.

Bygg sedan en första version som vi kan granska tillsammans.

När verktyget vet vem du bygger för och vilken handling du vill få till kan det ge mer träffsäkra förslag. Be först om en struktur. Gå sedan igenom en sida i taget, så att du till exempel kan rätta ett otydligt erbjudande innan samma text hamnar på flera ställen.

8. Bygg, testa och förbättra

Beskriv vad du vill skapa.
Låt AI bygga en första version.
Granska texten och klicka igenom sidan.
Testa på dator och mobil.
Ge konkret återkoppling om en sak i taget.
Prova igen efter ändringen.

AI kan skriva en övertygande text med fel uppgifter eller skapa en knapp som ser färdig ut men saknar rätt länk. Kontrollera både vad sidan säger och vad som faktiskt händer när du använder den.

Bra återkoppling beskriver problemet och önskad ändring. ”På mobilen blir rubriken för stor. Gör den mindre utan att ändra desktopversionen.”

9. Domän – min erfarenhet av one.com

Jag har köpt mina domäner via one.com i ungefär 15 år. Jag valde dem från början för att det var billigt och för att jag kunde få e-post på min egen domän. Priserna har blivit högre med åren, men tjänsten har fungerat bra för mig och därför har jag fortsatt. Om jag valde leverantör i dag skulle jag jämföra flera alternativ.

Fyra saker att hålla isär

Domänregistrering. Du registrerar och förnyar adressen, till exempel dittforetag.se.
DNS. Inställningarna styr vart domänen pekar för exempelvis webbplats och e-post.
Hosting. Tjänsten som gör webbplatsen tillgänglig på internet. Den kallas också webbhotell.
E-post. Tjänsten som tar emot och skickar mejl från till exempel [email protected].

Du kan köpa tjänsterna från olika leverantörer. Du kan till exempel ha domänen hos ett företag och webbplatsen hos ett annat.

Jämför innan du väljer

Titta på priset första året och vid förnyelse. Kontrollera om e-post ingår, hur du ändrar DNS, vad som krävs för att flytta domänen och hur lätt det är att använda tjänsten och få support. Exempel på leverantörer att undersöka är one.com, Loopia och Cloudflare Registrar. Loopias domäninformation, Cloudflare Registrars dokumentation

10. Publicera webbplatsen

Publicering innebär att webbplatsen får en adress som andra kan öppna. Vissa byggtjänster har en publiceringsknapp och ger dig en adress direkt. Har du en egen domän kan du sedan följa tjänstens instruktioner för att koppla den till sidan. Om du arbetar med ett eget kodprojekt behöver du välja var det ska byggas och köras.

GitHub är en tjänst där du kan lagra projektets kod och dess ändringshistorik. Det kallas versionshantering och gör det möjligt att se vad som har ändrats och gå tillbaka till en tidigare version.

Mikroentreprenör byggs med Astro. Det tar sidornas kod och innehåll och skapar färdiga webbfiler. Det lokala bygget fungerar. Planen är att lagra koden på GitHub och låta Cloudflare Pages bygga och leverera webbplatsen därifrån. Anslutningen till GitHub och publiceringen via Cloudflare Pages återstår i det här projektet. Cloudflare Pages guide för Astro

11. Checklista före lansering

Mobil. Öppna sidan på en telefon och kontrollera att du kan läsa texten och trycka på knapparna.
Länkar och knappar. Klicka på dem och kontrollera att de leder dit du tänkt.
Kontaktuppgifter. Dubbelkolla e-postadress, telefonnummer och öppettider där de visas.
Formulär. Skicka ett provmeddelande och kontrollera att det kommer fram.
Rubriker och texter. Be någon läsa startsidan och säga vad företaget erbjuder och vad besökaren kan göra där.
Grundläggande SEO. Ge varje sida en tydlig sidtitel och en kort metabeskrivning, alltså en sammanfattning som kan visas i sökresultat. Kontrollera att sidorna går att öppna utan inloggning och får indexeras om de ska synas i sök. Googles tekniska krav för sök
Bilder. Skriv korta alternativtexter för bilder som förmedlar information.
Integritet. Gå igenom vilka personuppgifter du samlar in, varför du behöver dem och hur de hanteras. Vilka krav som gäller beror på hur webbplatsen fungerar och hur uppgifterna används. IMY om dataskydd
Tillgänglighet. Prova att navigera med Tab. Se att fokus syns och att texten är lätt att läsa mot bakgrunden.

12. Publicera och lär dig längs vägen

Jag började själv i Lovable och lärde mig efter hand. Det jag lärde mig där gjorde det möjligt för mig att arbeta vidare i Codex.

Du behöver inte kunna allt innan du börjar. Bygg något litet och visa det för några personer som skulle kunna använda det. Be dem prova en uppgift, till exempel att hitta kontaktvägen. Se var de fastnar och förbättra det först.

Stora drömmar. Små steg.

Tillbaka till steg 3 – Bygg och testa